Hero image distortion on blog pages

[ProfYaffle]

Hero image distortion on blog pages

[pkscout]

I could never get gatsby-plugin-image to work. The documentation assumes you are already a GatsbyJS and GraphQL expert. From what I can tell you have to use some magic incantation get all your images into GraphQL, then with a separate animal sacrifice you query GraphQL with specific unknown parameters to get back what you want. Oh, and there is no information on how you use any of this with the YAML generated by the Netlify CMS.

If someone can figure that out, feel free to update the site code. After two weeks of pulling my hair out, I gave up.

[pkscout]

I'm hoping @razzeee can make some suggestions. I exhausted my CSS knowledge getting the image to look moderately crappy in every usage case and size on a variety of devices.

Inline images are easier because they only have to render in the page body. The header image is used as the header of the blog post as well as the top of the card on the index page. So the header images tend to get copped and stretched based on need. If you optimize the image for one of the two, the other one almost always looks like crap.

We could require two "header" images for every blog post (on for the ribbon header on the blog post and the other for the card) with specific dimensions, but that seems like a real hassle to manage. And will require a fair amount of code update on the site too.

[razzeee]

We should probably bite the bullet and maybe do two images in a backwards compatible mannor?

Right now loading https://kodi.tv/blog loads 6.81mb of images, that's not very good. As it's loading the full size images used for the headers.

So if we would separate those images, we could load a small one on the overviews and a different big one on the page itself (with the correct aspect)

Do we still remember what the old page did with these images?

[ProfYaffle]

Just in case it's useful...

https://www.gatsbyjs.com/plugins/gatsby-plugin-image

[razzeee]

Even if we get that working, it doesn't help with aspect ratios of images? At least I would be surprised.

[JohnVeness]

I realise that no one asked for an example of this problem, but https://kodi.tv/article/kodi-community-may-2015/ is particularly bad!