Moving featured image in single posts

The featured images are being called from header.php:

<?php if ( is_single() || is_page() && has_post_thumbnail() ) : ?>
  <div class="featured-header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <?php the_post_thumbnail( 'cerauno-header' ); ?>
    </a>
  </div><!-- .featured-header-image -->
<?php endif; ?>

Not sure how familiar you are with PHP, but what this says is “if this is a single post or a static page AND the post or page has a featured image, display the featured image.”

Then you’ll also want to look at single.php and template-parts/content-single.php.

If you need more specific guidance beyond that, just let me know!

Thanks, Kathryn! Was hoping you might see this, as you solved so many other questions.
This is very helpful, as I had missed the header reference. However, I do not see anything in single.php or content-single.php that currently calls the featured image (those were the first places I looked). I do understand how header.php is calling the image, but don’t quite understand how I can make it do so beneath the post title, rather than above.
Could you give me another clue?
Thanks again.

However, I do not see anything in single.php or content-single.php that currently calls the featured image (those were the first places I looked).

Right, they don’t currently call the featured image – you’d need to remove the featured-image call from header.php and move it into wherever you want it in content-single.php instead. ??

If you’re still stuck, just let me know and I can get this running on my test site and help you with the exact code you’ll need!

Just to clarify a bit, you’ll need to remove the call to featured images only as they relate to is_single() from header.php and leave the rest, so change:

if ( is_single() || is_page() && has_post_thumbnail() ) :

to

if ( is_page() && has_post_thumbnail() ) :

That’ll leave featured images still displayed on pages.

That did the trick! Thanks so much for taking the time to explain this, so clearly. (I’m still not quite sure how WP knew where to place the featured image by having it called in the header, but I do understand the rest.)
You’re the best.

I do have one related question about featured images: could you tell me where featured image sizes are being set? I thought it was in functions.php, but modifying the image sizes there seems to have no effect on thumbnails or full images. (I’d like to prevent the resizing on index.php, as it renders images fuzzy, and I also noticed that inserting the image in content-single.php results in a different size than when it was called form header.php.)
Thanks again.

I will look at this in more detail, but in the meantime, could you provide a link to your site so I can see where you’ve placed the featured images on single posts? Thanks!

Thanks again, Kathryn. I think I’m figuring it out. Appreciate all the help.

Glad to hear you’re figuring things out.

The featured-image sizes are set in the theme’s setup function in functions.php here:

add_theme_support( 'post-thumbnails' );
add_image_size( 'cerauno-home', 900, 300, true );
add_image_size( 'cerauno-header', 1400, 400, true );

If you do still need help, could you provide a link to your site or is it not live yet? I’d really like to see your changes directly so I can recommend how best to modify the featured images so they look right on your site. You may need to make both some CSS and function changes in your child theme in order to do that. Thanks!

Right, that’s what I had been modifying but it doesn’t seem to consistently actually result in modified image sizes for the thumbnails on index.php. (The single page featured images are fine and seem to be shrunk a bit due to div containers, which I can easily fix.) You also guessed correctly: the site is not yet publicly accessible.
Thanks again! If you have any thoughts about 900×300 not being affected by what is in functions.php, do let me know, but, if not, it’s also fine as is.

To override the default theme’s featured-image size, this function goes into your child theme’s functions.php:

function cerauno_child_featured_content() {
	add_image_size( 'cerauno-header', '600', '300' );
}
add_action( 'after_setup_theme', 'cerauno_child_featured_content', 11 );

(Of course you can change 600 and 300 to whatever values you prefer for the width and height, this is just for example purposes.)

And then you’d put this into your child theme’s CSS, again changing 600 to whatever value you want for your width:

.featured-header-image img {
    height: auto;
    width: 600px;
    max-width: 600px;
}

This combination is working for me on my test site. I’m not sure how you’re going about things on your site, but let me know if this helps!

Keep in mind that this is going to affect featured images on your blog posts as well as regular header images, since the theme uses the same function for both – remember how the featured images used to be in the header file in the theme? ??

This is so nice of you, Kathryn. I’ll give it a try and keep you posted. Thanks!

Hi–works great for single posts, and pages. However, does not affect featured image thumbnails on index.php at all. Wondering if there’s a way to set the size for those, as they are the ones that are strangely distorted. Seems to be governed by .img.attachment-cerauno-home.wp-post-image, but trying to set values for that in CSS doesn’t help. (On posts/pages, class is same, but cerauno-featured, instead of cerauno-home.)

Thanks again!

You’re welcome!

However, does not affect featured image thumbnails on index.php at all. Wondering if there’s a way to set the size for those, as they are the ones that are strangely distorted.

Hmm, on my test site, the images don’t seem to be distorted on the blog page.

That said, this is where the home (blog) page featured-image sizes get set:

add_image_size( 'cerauno-home', 900, 300, true );

You could try creating a second function, similar to the one I provided above, that targets the blog index’s featured images separately. You’d then add some accompanying CSS, as I did above for the header featured images. Want to give it a try and let me know how it goes?