[Resolved] Featured Image Output Error

[Jose]

Hi,

I recently installed https://publit.io/ to handle all the images, setup a CDN for image handling. However, after updating to the new cdn… the images of the thumbnail changed. Now I see a blurry image, it seems like their plugin picks up a setting on GeneratePress to display images. On the individual posts its working fine.

https://cdn.mariasmenu.com/file/w_9999,h_450,c_fill,q_100/MJM/tomato-macaroni-soup-2.png

[David]

Hi there,

you have this CSS in Customizer > Additional CSS which is forcing the height of the image:

@media (min-width: 769px) {
    .post-image img {
        height: 400px;
        object-fit: cover;
    }
}

Remove that and they will be displayed at the aspect ratio the CDN is serving up.
But you may need to look at your CDN settings as the images are very wide yet very short. You will see when you remove that CSS

[Jose]

Yes, if you see my earlier support question – I think that was there to ensure the height of the featured image thumbnails were the same in the archive page.

So if I change that, wont the size be affected?

[David]

Yes that CSS was used to force a fixed height of the image without distorting the image, however your CDN is outputing some rather odd sized and very large images they are 9,999px wide by 450px high – which is why they look extremely pixellated.

[Jose]

Publito basically converts the image size output to their format, and creates images on the spot… very nice software. But for some reason the images being generated on the thumbnail are wider… 999. So something in the css probably needs to be fixed?

[David]

Can you remove that CSS.
And in Customizer > Layout > Blog > Featured Images make sure the sizing is set to Auto. Then let me know.

[Jose]

Done, but if you see the frontpage / homepage now… you’ll see the images have not been cropped to the same height. I previously had 450 height instead of auto in the layout/blog/featured image settings.

[David]

Try re-adding the CSS to fix the height issue.

[Jose]

Seems to be working fine now! So basically it was the change in blog/layout/height?

[David]

Yeah – the image sizes set in the blog are rendered server side so chances are they were conflicting

[Author]

Posts