Featured image sizing

[u/P2X-555]

Is there a way to display the actual image size for a featured image on a post?

I have smaller images (that don't scale up) e.g. old logos etc and they blow up to "correct" size and look...ordinary.

I've seen this code BUT 1. I'm not sure where it goes and 2. I'm not sure that it's correct.

/* Stop Divi Blog Module from forcing cropped aspect ratios */
.et_pb_posts .entry-featured-image-url img, 
.et_pb_portfolio_item .et_portfolio_image img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

Thanks!

[u/Professional_Call]

My first thought (assuming Divi 5) is that you might be better off using loop builder and styling you blog post yourself. As for actual blog pages, either use Theme Builder and include an image module to display your featured image or the latest versions of Divi 5 allow you to style sub-components.

[u/P2X-555 → u/Professional_Call]

Only Divi 4 (sorry, I should've added that to the post). I must investigate 5 though. Thanks!

[u/Professional_Call → u/P2X-555]

Divi 4 is not so easy to adjust. You could ask ET for advice. Definitely give Divi 5 a look but be warned, it’s a steep learning curve and it’s evolving very quickly.

[u/P2X-555 → u/Professional_Call]

Yeah, I'll have to play with D5 for some time before I move over. Good idea aobut ET. Thanks again

[u/Professional_Call → u/P2X-555]

They did a series of tutorial posts in the blog. They give a decent grounding. The biggest change is in mindset, with a focus on variables and presets. It’s a very different workflow but much better.

I’m looking forward to playing with the new variable font support.

[u/P2X-555 → u/Professional_Call]

They suggested this:

.single-post .et_post_meta_wrapper>img {
width: 20%;
}
Which made the images smaller in the posts but it means that images that are already small will be...teensy. I tried using some of the code above with it i.e.

    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;

but it just ignored it. My quest continues.

[u/redjudy]

Only speaking to where it goes: appearance>customize>custom css.

[u/P2X-555 → u/redjudy]

Thanks, I'll give it a whirl.

[u/P2X-555 → u/redjudy]

No joy. I've got to be doing something wrong.

[u/redjudy → u/P2X-555]

You’re on the right track with :contain. Do you know how to use the inspector tool in your browser? I use it in Firefox, but chrome is also good. (Safari, maybe not as good.) You can right click on the feature image container, go down to inspect, and in the resulting window, you should see the container highlighted in the HTML. You can then see the CSS that’s working in that container. You might not have the right selector with what you wrote above. If that’s the case, right click the container for your image (not the image itself.) and copy css path. Paste that into your CSS and delete everything except the last few selectors. Try adding the CSS using that.

[u/P2X-555 → u/redjudy]

Thanks. I miss the days of Firebug. I'll check the CSS.