[Support request] Featured Images

[John]

Hello Folks !

I have Featured Images on many of my pages (not posts).
I would like to standarize their height and width.

On mobile they are already standardized.
One of you folks – Dave or Leo or Emily – had sent me
the proper customization.

See:
https://understand-culture.com/wp-admin/customize.php?url=https%3A%2F%2Funderstand-culture.com%2F

However, the dimensions of these same Featured Images
appear not to be standarized when viewed my laptop.

How can I standardize their height and width?

Thanks !

John

P.S. I just found the following Simple CSS on my site:

@media (max-width: 768px) {
.page .featured-image img {
width: 500px;
height: 125px;
object-fit: cover;
}
}

. . . and . . .

.slideout-navigation.main-navigation .inside-navigation .main-nav ul ul ul li a {
text-transform: capitalize;
}

.love-container {
padding: 25px 40px;
text-align: right;
font-size: 0.9em;
}

@media(max-width: 768px) {
.imprint-container {
padding: 25px 30px;
}
}

[Ying]

Hi John,

I’m not able to view the featured images as your site requires login.

You can try removing the media query( @media(max-width: 768px) {}) to make the CSS work on the desktop as well.

[John]

Hello Ying,

Working on a Sunday?

You don’t need login access to the site
in order to see the anecdotes. Please go to:
https://understand-culture.com/anecdotes/

In Simple Custom CSS I deleted:

@media(max-width: 768px) {
.imprint-container {
padding: 25px 30px;
}
}

but it did not make a difference.
Did I delete too much or the wrong customization?

Thanks !

John

[Ying]

Working on a Sunday?

Yes, just can’t keep our users waiting for too long. 🙂

@media(max-width: 768px) {
.imprint-container {
padding: 25px 30px;
}
}

This is a custom class, I’m not sure what it’s targeting. So don’t touch it.

The CSS you attached for the featured images are targeting the static pages, but the link you sent is to the author archive with posts, so are we looking at the page’s featured image or the post’s feature image or the archive’s featured image?

Let me know!

[John]

That was fast again, Ying.
Thank you.

I will not touch the custom class above.
Thanks for the warning.

Yes, the link I sent is to posts.
I want to standardize the size of
featured images in all posts in/with
the category “Anecdotes”.

[Ying]

I’m quite confused about your posts’ set ups.

I just rechecked the page, and every link on that page leads to a category archive, but none of them are from the category Anecdotes.

Is there an actual category called Anecdotes?

If I can’t find the relationship between those links and the Anecdotes, I can not target them with CSS.

Let me know!

[John]

Hi Ying,

Thanks for your very rapid and helpful reply.

I’m using this plugin to create the directory:
https://mctagmap.tugbucket.net

Perhaps that is the reason why you can’t
see the category in the URL-line.

Yes, I created a category named “Anecdotes.”

[Fernando]

It would be hard to target those Archive pages and single Posts since they seem to have nothing pointing to “Anecdotes”. What we can do is target all archive pages and post instead to have similar Featured image dimensions. Is this something you’re okay with?

[John]

That was superfast, Fernando.
Thank you.

You write:

“What we can do is target all archive pages and post instead to have similar Featured image dimensions. Is this something you’re okay with?”

Oh heck, why did I not state that at the beginning?
Sorry. Yes, I would like all featured images to have
the same dimensions.

[Fernando]

Let’s target the Single Post images first.

Try adding this through Appearance > Customize > Additional CSS:

.single-post .featured-image.page-header-image-single img {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    .single-post .featured-image.page-header-image-single img {
    height: 150px;
}

}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    .single-post .featured-image.page-header-image-single img {
    height: 250px;
}
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .single-post .featured-image.page-header-image-single img {
    height: 300px;
}
}

Replace the height values with your preference.

[John]

Hi Fernando,

That seems to have worked on mobile.

On my laptop I still see differences
in height, but I think that is because
when cropping images downloaded from
Unsplash I was not consistent in how
far I cropped down.

[Fernando]

For reference, can you share a couple of links to posts that have different featured image heights on desktop?

[John]

Gladly, Fernando:

Strange Black Man
https://understand-culture.com/2023/04/07/strange-black-man-2/

Are Germans Holding Back
https://understand-culture.com/2023/01/31/are-the-germans-holding-back/

Get a Bike Helmet
https://understand-culture.com/2023/01/31/get-a-bike-helmet/

. . . or simply scroll up and down:

https://understand-culture.com/category/authors/magee/

[David]

Hi John,

there are some concerns with “auto cropping” images using CSS.

For example adding this CSS:

.single-post .featured-image.page-header-image-single img {
    height: 250px;
    object-position: center center;
}

And then viewing:

https://understand-culture.com/2023/01/31/get-a-bike-helmet/

We go from the Top image to the Bottom Image:

Now we could compensate for that, by changing the object-position: center center; in the CSS so we see more of the top of the image. And there lies the issue, what works for one image may be an issue for another image.

As each image is a different size and aspect ratio making a one size fits all solution is kinda tough.

How many images are we dealing with ?
If its not a lot it may make better sense to replace those images with ones already cropped.

Let me know your thoughts.

[John]

That explanation is really helpful, Dave. Thanks !

We’re talking about 30 images. But there will be
more coming.

Please recommend an approach which a.) establishes
a maximum standard height, and b.) requires minimal
use of CSS.

Nothing against your CSS, but I am assuming the fewer
plugins on a WordPress site, and the less customizing
on the site, the better.

I can go back an re-crop the 30 images. Key is that I
know max. height. I’ll then simply have to choose the
images wisely.

Does that make sense?

[Author]

Posts