[wpStan.comParticipant]

Hello,

I am new to WordPress. I assumed when I set a picture as a featured image in my post, that the picture would actually be the size it actually is.

Unfortunately, I set a picture as a featured image that was 300 x 168. Upon checking the site after uploading my post I noticed the image was resized bigger, it was changed to 595 x 333.

1.) How can I prevent this from happening?

2.) Is there a way to have images be the exact size that they actually are?

3.) Or be able to set the image size I desire proportionately? Specifically for “Featured Images” in posts on my blog.

[ChristopherModerator]

Hi there,

#1 Please add the following CSS under Customize -> Custom -> CSS :

.single-post .entry-featured {
width:50%;
margin:0 auto;
display:block;
}

#2 and #3 Images size are calculating depending on your setting in customizer, By adding code above you keep them all the same fixed size.

Hope it helps.

[wpStan.comParticipant]

Okay so this changed the size in the specific Post. Thank You.

4.) I would like to reduce the size on the Blog index page where all the posts are shown, the picture takes up more than half the screen on my laptop. How do I do that?

5.) You mentioned the image size calculating based upon the setting in my customizer? What setting are you referring to specifically? I did not know there was a setting to change the Featured image size in the customizer, I could not find one.

[ZeshanMember]

Hi there,

#1: Please provide us with your website’s URL so that we can provide you with a tailored CSS code.

#2: There isn’t any option available in the Customizer as the size is calculated automatically based on the layout you are using. For example, your stack, boxed layout, site max width, sidebar enabled or disabled and et cetera.

Thanks!

[wpStan.comParticipant]

1.) http://www.sharisekent.com/blog

[ChristopherModerator]

Hi there,

Please add this code as well :

.blog .entry-featured {
width: 50%;
margin: 0 auto;
}

Thank you.

[brijyotParticipant]

Hi,
The information above was very useful , can you suggest the code for archive page , the featured image on archives is blown up

Brijyot

[ChristopherModerator]

Hi there,

Please add this :

.archive .entry-featured {
width: 50%;
margin: 0 auto;
}

Hope it helps.

[elsobadorParticipant]

Hello,

Website: elsobador.org | I’m trying to make the feature image on each blog same size. What size would that be?

Also, when doing the search, the feature images takes almost half a page as mentioned above.
Already applied CSS to remove feature image at the top of blog but this one didn’t work.

thanks in advance,

[LelyModerator]

Hello There,

Thanks for the URL.
Upon checking your blog page, featured image on single blog post is now hidden. The following custom CSS you’ve added is working:

.single .entry-featured .entry-thumb {
    display: none !important;
}

Please clear cache or use incognito mode of browser if you’re still seeing featured image. You may also add the following CSS to remove the border that is left after you hide the featured image:

.single .entry-featured {
    border: none;
    padding: none;
}

Since featured image is now hidden, which feature image are you referring to that you want to be of the same size?

[elsobadorParticipant]

Hello,

Yes, I don’t want a feature image at the top of the blog, but I was referring to the image when doing a search. Currently takes almost half a page each image.

Thanks,

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

/* remove featured image on search results */
.search .entry-featured {
    display:none;
}

/* reduce featured image size on search results */
.search .entry-featured {
    display:block;
    width:50%;
    margin: 30px auto;
}

Note: just use the rule you would like to use depending on if you want the images gone or if you want them just reduced in size.

Hope this helps – thanks!

[Alex DParticipant]

How can I set the featured image to have a 25px border radius?

I’ve tried:

.single-post .entry-featured {
border-radius: 25px !important;
}

But doesn’t work

[JadeModerator]

Hi Alex,

Please try:

.single-post .entry-featured img {
    border-radius: 25px !important;
}

Hope this helps.

[autolingua1Participant]

This thread helped a lot! Thank you!

[Author]

Posts