- This topic has 5 replies, 3 voices, and was last updated 4 years, 7 months ago by
.
-
Posts
-
I’ve read the comments I could find here on image sizes but do not see anything on this specific point.
I’m making 40 blogposts about works of various artists, each has 1 (featured) image. The images are portrait, landscape, square, panorama. I want to show the whole image, no crop.
I chose medium-large in the customizer. I also regenerated thumbnails etc, just to be sure.
I would like the images to have a maximum height, as portrait at 768px is still quite long. If that means more white space left./right, that’s okay the images don’t have to be the full width of the column.
However, if I add a height in the customizer (say 600), some portrait images are cropped, instead of, as I would hope, reduced in size while keeping aspect ratio. Morever, the landscape images then are also forced to fill a height of 600 (which especially in the case of panorama means they are heavily cropped left and right).
So obviously that is not the way to do it. So my question: is there a way to set a *maximum* height for featured images so that the aspect ratio is kept and the images are not cropped?
I can of course scale down the images by hand, if there is no other way.But a general rule for the whole site would be easier.
Thank you, and best,
Yola
Customer Support
Hi there,
So obviously that is not the way to do it. So my question: is there a way to set a *maximum* height for featured images so that the aspect ratio is kept and the images are not cropped?
We can force it to keep the aspect ratio and prevent cropping by setting
object-fit: containto the post images through CSS.Any specific page you want this applied on? Can you link us to the page in question? You can use the private information text field to provide the site details. 😀
Hi Elvin,
Thank you for your quick response.
The site is public, but links below just in case.
There is a link to a single post (most I have changed by hand for now, but that is time-consuming and not a structural solution). However, I was hoping that it is possible to cover all featured images for single posts of a specific category (in this case “atelierroute 2021” ).
Or perhaps even all featured images of single posts on the site. For I guess that with a container at 1100px and a right sidebar the medium-large images would be wide enough for all single posts.
Even so, I’d preferably be able to target a specific category or type, for as yet I cannot quite predict the consequences for the whole site.
I checked this page of your documentation about using a filter https://docs.generatepress.com/article/adjusting-the-featured-images/ and thought of using ‘object-fit’ but I wasn’t able (not even with WP documentation on filters) to adjust the code for my purposes. Sorry, I know my way around CSS but php I can only kind of half-understand.
By the way, I think it is great!! that you provide so much documentation about your theme. I use it for 20+ sites because of the endless flexibility and the thorough documentation and support. It has taught me a lot over the years and made my life easier.
Customer Support
Hi there,
the simplest method would be to use this CSS:
.post-image-above-header .inside-article .featured-image img { max-height: 600px; object-fit: contain; }This will cap the height, whilst displaying the full image.
Or if you wanted to get real fancy, you can add this PHP Snippet:
function add_orientation_class_to_featured($attr) { $orientation = ''; $img = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), "full" ); $width = $img[1]; $height = $img[2]; if ( $width >= $height ) { $orientation = ' landscape'; } else { $orientation = ' portrait'; } if ( !empty($orientation) ) { $attr['class'] .= $orientation; } return $attr; } add_filter('wp_get_attachment_image_attributes', 'add_orientation_class_to_featured' );Which will add
portraitandlandscapeclasses to all the featured<img>elements. Which you could do specific style for either image orientation.Hi David,
Thank you!! The CSS works fine, and now I have an idea how to use this object-fit also in future.
The php I have now used instead, works fine too, I can even get the portrait featured-images to float on large screens.
I’m very happy with this, the sites I manage are mostly of artists. Their works should be presented intact and cannot be subjected to preferences of the web designer – but they don’t always respect standard aspect ratios 🙂 I often have to choose not to show featured images on posts and insert a standard image instead. So this saves me some extra work.
Thank you once again, you guys are great!
Awesome – so happy to hear that!
- You must be logged in to reply to this topic.
