Adding a Featured Image Changes My Blog Images

Hello,

I think this very much depends on the theme you are using as the developer of the theme could have added code that increases the image size whenever a featured image is set. Do you have a public example of this (i.e a live URL) versus a blog post for how it is supposed to look?

This is the link to the blog post. https://readwithallison.com/creepy-books-to-read-this-fall/

This is closer to what a post should look like. https://readwithallison.com/five-books-to-read-at-the-beach-this-weekend/

Hi, thanks for that.

Can you add the following code to the CSS of your website.

body.single-post article.type-post div.entry-content img.aligncenter.size-full {
    max-width: 400px;
}

What this does is target any images that are aligned “center” and full-size inside a single blog post. The max width of 400px is what the other blog post image was set to so I used that value. Feel free to adjust the number up or down depending on what you like the look of.

You can add CSS anywhere that your theme allows you. Most likely this will be in the WordPress Customiser which is found in Appearance > Customise. There should be an Additional CSS box where you can paste the above code.

• This reply was modified 4 years, 6 months ago by Web Assembler.

I just tried this and the images are still too big. This is so frustrating!

The images in this post are aligned “left,” so maybe that is why this code didn’t work?

Yes most likely. I am not official support by the way, just a developer trying to help in my spare time.

So you can try this for all the images:

body.single-post article.type-post div.entry-content img.alignleft.size-full,
body.single-post article.type-post div.entry-content img.aligncenter.size-full,
body.single-post article.type-post div.entry-content img.alignright.size-full {
    max-width: 400px;
}

That code did not work either! So frustrating. I appreciate your help! I’ve been spending a couple of hours every night after work trying to figure this out all week! I did reach out to my theme developer for support as well. I think the issue has to be in the theme because I never had this problem before self-hosting and installing my theme.

The might be another way. You can either try adding !important to the code above. I.e.

body.single-post article.type-post div.entry-content img.alignleft.size-full,
body.single-post article.type-post div.entry-content img.aligncenter.size-full,
body.single-post article.type-post div.entry-content img.alignright.size-full {
    max-width: 400px !important;
}

OR,

If that doesn’t work, in the WordPress Admin > Appearance > Theme Editor you can enter the code above at the very bottom of the main stylesheet. This should be a file called something like style.css or main.css which will have a comment at the top: Theme Name:, Theme URL etc

Make sure the code above is on it’s own line at the bottom (is not in between any curly brackets { or }

I would also recommend copying the entire file to a text editor like Notepad or TextEdit as a backup before pasting the code, then you’ll have a copy if anything goes wrong. If this doesn’t work then the theme developer will need to help. Fingers crossed!

Thank you again. I tried both fixes you suggested and my theme editor has sent coding. Unfortunately nothing is working! The code they sent me made all of my images disappear.