Here’s a simple goal: Resize the WordPress post feature image WITHOUT having to go to the bother of creating a child theme OR modifying functions.php. It can be done. You’ll want to do this to control the size of the feature image when it shows at the top of your post. If you don’t want it to cover the entire width of the screen, that is. (Caveat: If you have a better, simpler way to do this, I’m all ears.)
First, in a post all of your images will have an “align…” class assigned. That’s the key. There is no align class assigned to your feature image. That makes it distinct. The sample code below has stubs in place for the align classes as well as the post-template-default class. They’re empty but need to exist just for the sake of test functionality. To test this you’ll need 6 pictures. You can change the names in the HTML lines as needed, or rename your pics. That’s the easy/tedious part.
The default width for an image is 400px here. But … for any image that does NOT have one of the align classes assigned a new width is selected.
You can also see that the body designates the post template. That keeps this CSS distinct from pages.
The key is the “body” class text in bold. My theme is DIVI and it goes in the Theme Options -> General -> Custom CSS section. Your preferred theme may have another location for it.
Even more importantly, if you want to control other custom characteristics of your page, just change that body.post-template-default class so that you might modify other items. “NOT” lets you do exclusion in order to sort down the items to be modified, so it is good for more than just images. You’ll find plenty of examples for managing site appearance out there.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>.post-template-default { }
.alignleft { }
.aligncenter { }
.alignright { }
.alignnone{ }img {
width: 400px;
height: auto;
}body.post-template-default img:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignnone)
{
width: 200px;
height: auto;
}
</style>
</head>
<body class=”post-template-default”>
<img src=”pic1.jpg” ><br>
<img class=alignleft src=”pic2.jpg” ><br>
<img class=alignleft src=”pic3.jpg” ><br>
<img class=aligncenter src=”pic4.jpg” ><br>
<img class=aligncenter src=”pic5.jpg” ><br>
<img class=alignright src=”pic6.jpg” >
</body>
</html>
It’s that easy.