[Resolved] Is There a Way to Set Max Height on Blog Images?

[Samuel]

Is there a way to set featured images to a max height on a blog page? I’m working on a situation where the vast majority of posts have the same size featured image which is landscape. There are a handful of posts that have a portrait oriented feature image and it disrupts the layout of the blog which uses two columns. Is there a way to limit the height on the portrait images so the columns in the blog line up? Of course the portrait images would not fill the same width but I’d rather have a portrait image with space on either side than a portrait image with a different height from the landscape oriented images.

[Leo]

Hi there,

Would the customizer option work for you?
https://docs.generatepress.com/article/adjusting-the-featured-images/

Let me know 🙂

[Samuel]

That might be the best solution. One question: when height is set is there a way to define how the image aligns (top, middle or bottom)?

Is it possible to do it in a more responsive way where the image scales down on phones for example instead of just keeping a consistent height?

[Leo]

Any chance you can link us to the site in question so I can see the current setup/issue?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Samuel]

I would but this is site I’m developing on my personal computer. Here are two images though that could help.

Here is the original problem I was trying to solve: https://www.dropbox.com/s/6l5zwv9myo9uwsw/Screen%20Shot%202020-06-20%20at%203.08.22%20PM.png?dl=0

You can see that I have some portrait featured images though the vast majority are landscape oriented. If a portrait and landscape are next to each other the layout looks bac.

Your suggestion solves that problem and may be the best way to solve it. My only question is there a way to “scale” the images for mobile or to set the alignment on vertical images that are being cropped. For example this: https://www.dropbox.com/s/spyk1x85roroohl/Screen%20Shot%202020-06-20%20at%203.07.36%20PM.png?dl=0

In this case the top and bottom of the featured image is being cut off. Is there a way to tell it to align top instead of center? If there isn’t I think it can still work I’m just checking.

[Tom]

Hi there,

How is that image being cropped on mobile, exactly? If it’s possible to put the page up on a staging server it would really help us see the issue.

If it’s using object-fit to crop the image with CSS, you should be able to use object-position to position where the crop happens.

[Samuel]

The images that are portrait are cropped top and bottom on all views and then of course the landscape are cropped on mobile. Maybe I will go with Leo’s suggestion for now and when the site is online see if there are any other options. Right now Leo’s suggestion is workable.

[Leo]

Sounds good 🙂

[Author]

Posts