Change size and alignment of featured images

Hi @tiffanic!

These two CSS styles should do the trick for the first item:

/*prevent title overlapping post featured image*/
@media screen and (min-width: 1180px) { 
.post-thumbnail+.entry-header {
    margin-top: 0;
}
}

/*prevent title overlapping page featured image*/
.content-wrapper.full-width.with-featured-image {
		margin-top: 0;
}

The second item you’ve mentioned will involve playing with the margins and width a bit, like this:

.post-thumbnail {
    width: auto;
    margin-left: 146px;
    margin-right: 0;
}

Thanks so much for the reply, Chad! For the second item, the margins you provided made the left side of the image line up perfectly with the text. The only problem now is that there is a shaded area to the right of the photo. (I wanted to upload a screenshot for your reference, but I can’t figure out how to do that here.) I’d like the photo to extend the entire width of the post. It looks like the default image size is square, while my photo is a tall rectangle. It seems like there is a limit to how tall the image can be, so my rectangular photo is getting scaled down to fit within the square. Any idea how to change that?

Absolutely!

I was actually getting ready to type that up for you when I had to step away, sorry about that ?? Your third question about the cropping should resolve that problem.

This one is a bit more involved because we need to tell the theme to resize the featured images differently.

First step will be to create a child theme so your changes don’t get lost in future theme updates.

Once that is set up and activated you’ll need to add the following snippet to the child theme’s functions.php file:

add_action( 'after_setup_theme', 'my_sela_child_image_sizes', 12 );
function my_sela_child_image_sizes() {
	/*Tall post thumbnails, no cropping*/
	set_post_thumbnail_size( 820, 1000, false );
	/*Tall page thumbnails, no cropping*/
	remove_image_size( 'sela-page-thumbnail' );
	add_image_size( 'sela-page-thumbnail', 1180, 1000, false );
}

What’s happening here is we’re telling the theme to make features images for posts 820 (the theme default) by 1000 (changed so it won’t crop tall images), then using false for the crop value – so your image will fit inside an imaginary 820×1000 box – you can tweak the 1000 upwards if needed, should you find yourself using really tall images ??

The same thing is happening on pages (with a wider width, since those display differently).

Now there’s one more step – the different image sizes get generated when you upload the original file, so your existing images won’t be affected by this change. To update those according to these new specs, you can regenerate them with a plugin, like this one ??