How to Place H1 Page Title and Featured Image in the Header

Thanks, Tom, looks great!

I don't seem to be able to get the featured image sizes quite right though. I've tried multiple different pixel dimensions. Tried cropping them and the results seems pretty hit and miss.

What would you recommend?

Thanks

Did you use my PHP functions to size the images automatically? Or are you resizing them yourself?

Hi Tom,

I used the PHP functions to size the images automatically.

And did you run that force regenerate thumbnails plugin that I mentioned?

Hi,

I ran the regenerate thumbnail plugin today, although I was notified that many images failed.

However, I remain confused because images seem to act differently e.g. are sized differently in the page hero thumbnail, even though they have the same dimensions.

For example, the featured image of these two pages appear to have the same dimensions (1024 by 512 pixels):

1.https://bit.ly/2TAMmbs - prefer this one and would be desired for the whole site.
2.https://bit.ly/2TDIBlx

I have noticed that one is jpeg and the other is png format. Not sure if this makes any difference?

Hmm, they don't seem to be using that image size.

Just to confirm, did you add these functions with your desired size?:

add_action( 'after_setup_theme', function() {
    add_image_size( 'hero-image', 500, 500, true );
} );

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'hero-image';
} );

Hi Tom,

Yes that exact code was added using the snippets plugin and I have played around with the dimensions but no changes seem to take effect when I do.

Just realized you mentioned desired image size...so what would that be for the example above?

Hmm, strange. Can you try this code instead?:

add_action( 'after_setup_theme', function() {
    add_image_size( 'hero-image', 500, 500, true );

    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'hero-image';
    } );
} );

The first 500 is the width, and the second 500 is the height. That's where you would input your own width and height depending on what you're needing.