Archived topic
Featured Image
22 replies · Started by John on November 4, 2021
Hello Support !
Thanks for providing above 10 Article and 10 Forums. This is great. It enables me to find answers without bothering you folks. Which means you can help others, thus making the GP-community that much better !
However, I could not find my topic. Perhaps I did not look hard enough.
If you go on http://www.understand-culture.com you'll see that I typically have a featured image. I grab them from Unsplash, then crop them with iLoveIMG. Therein lies the problem. The image width is uniform. But not the image height.
Is there a way to define the image height so that we have uniformity across the site?
Please keep in mind that I have designed the site primarily for smartphones. So the images should not be all too high.
Thanks !
John
Hi John,
If you want the image to be the same height and same width, you can set the value at Customizing > Layout >Blog > Featured Images > Archives.
https://docs.generatepress.com/article/adjusting-the-featured-images/
But some of them will be cropped to match the height and width but keep the aspect ratio at the same time.
Let me know :)
Very helpful, Ying. Thank you !
A question, however: I see how to change the height. The change is immediately visible on my laptop. However, the height is different on my iPhone. Much larger.
275 px seems to be just right for viewing on my laptop, but far too large on my mobile.
Should I be in Archives- or Pages-mode? These images are on pages.
the height is different on my iPhone. Much larger.
The value you set in customizer is the max value. On mobile, its max width depends on the mobile screen which might be smaller than the value you set, but the height you set is not effected. We can add some CSS to make it shorter on mobile.
You can try this CSS, feel free to change the numbers.
@media (max-width: 768px) {
.resize-featured-image .post-image img {
width: 300px;
height: 160px;
object-fit: cover;
}Should I be in Archives- or Pages-mode? These images are on pages.
Can you link me to the page you are talking about?
Hi Ying,
You're always super fast and super helpful. Thanks !
Let's use the Patterns-page as our test:
https://understand-culture.com/patterns/
Ok. I entered the code into Additional CSS and it seems that all images on my iPhone have the identical height. Yeah !
However, on my laptop I still see differences.
In fact, I change the height from 160 to 200 in order to see the effect. There was no differences.
Yes, so for pages featured image, set the width/height under the Pagestab :)
In fact, I change the height from 160 to 200 in order to see the effect. There was no differences.
The CSS was for archive, if we are talking about page featured images, try this CSS instead:
@media (max-width: 768px) {
.page .featured-image img {
width: 500px;
height: 100px;
object-fit: cover;
}
}I set the height at 130 pm, Ying, and it looks perfect on my iPhone. And all of the images have the same height. However, there are differences still when viewing on my laptop. Is that simply a weakness of WordPress? No thing and no one is perfect !
there are differences still when viewing on my laptop
Can you link me the pages that are showing differences?
No thing and no one is perfect !
The codes should be, at least they never lie :P
It requires a username and password to login.
I don't need login details, just need the pages' links :)
Oh !
You can access any of these pages via the terms:
https://understand-culture.com
Is that what you mean, Ying?
Or should I give you admin-status?
