Optional big featured image on posts

Hi, this isn’t the optimal solution since it results in some image degradation, but it does take the image full width. I’ve pulled the single and the postid CSS classes from the opening body selector on the page you reference (Everton launch…) and this CSS is targeted at that post.

.single.postid-2057 .entry-hero .post-thumbnail img {
    width: 100%;
}

This of course would mean that anytime you had a post with a featured image that was not wide enough, you would need to create a new CSS rule, or add the additional CSS selector with the appropriate ID to the above.

Thanks for the help, but it’s actually the opposite thing I’m trying to do.

If the image isn’t big enough to look good as a big featured image, I’d like to manually display if without stretching so it looks like this.

When I look at https://theonlinerule.com/news/2057-bluecrimbo-everton-blue-box-appeal-christmas/ on your site, I’m seeing the image at its normal size, narrower than the available area right now. It seems that is what you are looking for, correct? Am I misunderstanding?

Yes and no ?? I’d like the option to choose whether it’s going to display this way, or the default full-width style. At the moment the only way I can make images look like this is by deleting the JS script that controls full width images, but I’d like the option to have them display the default way too.

To have some sort of way to choose from within the editor would likely take a good bit of expertise in js and php and really is beyond our scope. It may require hiring a developer.

The only other thing I have to offer would be to create unique CSS rules when you want to have the image smaller. If you had a set maximum width you wanted to use, such as 750px, then you could comma separate the selectors for the different posts. This is a sample that I did off of this post on your site.

.single.postid-2052 .post-thumbnail img {
    max-width: 750px;
    width: 100%;
}

I’ve use .single and .postid-2052 CSS classes from the opening body tag so that I’m targeting only this post.

Thanks for the replies. It wasn’t a massively important thing, I was just curious about how easy it would be to implement – obviously not very!

Thanks for taking the time to help me though, I really appreciate it.

I’ve marked this as resolved even though I couldn’t get what I was looking for, but there’s not really much to add to the discussion now.

You are welcome and let us know if you have additional questions.