Dispatch Single Post Featured Image

[Charalambos]

Hello,

I read somewhere in this forum that the best size for dispatch single post featured image is 1200×800 px or 2400×1600 px. However when you use these dimensions, the featured image in the single post is cropped (in height).

Could you please advise where can you adjust the height of the featured image shown in the single post in order to show the full picture?

thanks

[Leo]

Hi there,

If you set a specific dimension for both height and width, the pictures will always be cropped unless the original picture is already that size – this is the purpose of “cropping”.

If you don’t want the pictures to be cropped in height, then only set the width property and leave height to auto – this will make it scale rather than crop.

Let me know if this makes sense 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charalambos]

Hello,

I understand that the height of the featured image is already customized in the additional css of Dispatch theme.

So I am asking where can i find this settings in the existing css and how can i change the height to auto?

[Leo]

The single posts featured image in Dispatch is actually added with header element:
https://docs.generatepress.com/article/header-element-overview/

And the height of the element is determined by the padding option:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

Simply remove the header element if you just want to display a static featured image instead.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charalambos]

Thanks, I get it now.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Charalambos]

Hello,

Regarding the single post hero featured image. I have tried several paddings options both in desktop and mobile, however it looks like i can never achieve the perfect result. For example it can look ok in mobile but not in an ipad or vice versa.

Is there any way to set the height to auto inside the header element, so that the picture can be scaled instead of cropped and be responsive in all devices?

thanks in advance

[Leo]

Unfortunately background images aren’t responsive by default – it’s not a theme thing.

Have you tried using % instead of px for padding? Sometimes it works better.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts