[Resolved] Change size of page featured image

[dmendana]

Is there some way that I can change the size of the page header image that is loaded in single posts and pages? Not the display size, but the version that is loaded. It is full size now, and I have some very big images that take long to download.

I’m aware that the page header plugin provides granular control over page headers, but I don’t think it’s the solution I need, precisely because I don’t want to give authors that kind of control. I just want them to select the featured image and let the theme display in some way.

As far as I understand, the relevant function is in template-tags.php.

function generate_featured_page_header_area($class)
{
...
<div class="<?php echo $class; ?> grid-container grid-parent">
<?php the_post_thumbnail( 'full', array('itemprop' => 'image') ); ?>

I would like to register a custom image size and then make this function load that. Can you suggest some way to do this without overwriting the header template?

Thanks!

PS: this time I have double checked that there are no customizer settings for this. 🙂

[Tom]

Good question! Are you using GP Premium? If so, it’s a little more complicated.

I just added a new filter to the Page Header add-on that will allow you to add the simple function below to give it a custom size:

add_filter( 'generate_page_header_default_size', 'generate_custom_default_page_header_size' );
function generate_custom_default_page_header_size()
{
      $width = 1000;
      // 9999 will generate a proportional height to the width, set a reasonable number to crop the image
      $height = 9999; 
      return array( $width, $height );
}

Note: The above filter won’t work until GP Premium 1.2/Page Header 1.3.

Let me know if you’re using GP Premium or Page Header, if you want to email me at support@generatepress.com I can send you the updated files so the above works.

Thanks!

[dmendana]

If that requires the Page Header addon, and I don’t want to let users change page headers, then I’d have to install the addon and unregister the page header metaboxes, right? And then I could use the new filter to change the header image size.

[Tom]

Ah, I just assumed you were using the Page Header add-on.

GP 1.2.9.3 is already being reviewed on WP.org, but this filter will be added in 1.2.9.4.

To make the change now, open template-tags.php in the /inc/ folder.

Find:

<?php the_post_thumbnail( 'full', array('itemprop' => 'image') ); ?>

Replace with:

<?php the_post_thumbnail( apply_filters( 'generate_page_header_default_size', 'full' ), array('itemprop' => 'image') ); ?>

If you do the change now, you’ll have to do it again after the next release.

Then it will be in the core files for the version after that.

Thanks! 🙂

[dmendana]

Hi Tom,

First, thank you for being so kind to share this in advance. I’m not using Page header or GP Premium addons, so far I’m using Blog and Colors and considering a few more.

I have tested the code you suggest and I don’t understand its behaviour. So, I’m using this image for a header that is 1984×1488. One of the reasons I’m interested in changing the size is that my headers are 300-400px high, so there are big savings to be made.

Now let’s see how the new code behaves.

Values I set in the function >> Image downloaded in the frontend

• $width=100 , $height=9999 >> 150×150
• $width=200 , $height=300 >> 200×200
• $width=200 , $height=9999 >> 200×200
• $width=1200 , $height=9999 >> 1984×1488
• $width=1200 , $height=300 >> 400×300

While these are the sizes of the downloaded imagen, the size it is displayed differ. So the 1200px width value downloads an uncropped image 1984px wide, but then displays it 1200px wide.

I am quite confused by all this. I would like to reduce and crop the images to something like 1800×400. But I don’t really understand how it is supposed to work.

Thank you again for all this help.

[Tom]

Interesting – can I see an example of the function you’re trying out?

If you’re wanting to hard crop the image, you’ll have to add “true” after the sizes, like this:

add_filter( 'generate_page_header_default_size', 'generate_custom_default_page_header_size' );
function generate_custom_default_page_header_size()
{
      $width = 1800;
      $height = 400; 
      return array( $width, $height, true );
}

[dmendana]

Hi Tom, sorry to keep bothering you. This is really strange.

My code is:

____at template-tags.php:

<?php the_post_thumbnail( apply_filters( 'generate_page_header_default_size', 'full' ), array('itemprop' => 'image') ); ?>

____at functions.php:

add_filter( 'generate_page_header_default_size', 'generate_custom_default_page_header_size' );
function generate_custom_default_page_header_size()
{
      $width = 1800;
      $height = 400;
      return array( $width, $height, true );
}

I have set featured images way wider than 2000px. This didn’t produce hard cropped images of that size.

Then I did something else. I added a custom image size 1800×400 and regenerated thumbnails. And now the featured images display at the cropped size.

Does this make any sense?

Edit: typo, it’s 2000px instead of 200px

[Tom]

Interesting – by default, WordPress requires you to regenerate the thumbnails when new sizes are added to the_post_thumbnail() function.

However, in the latest version of Page Header/Blog add-ons, I’ve included a script which detects if these sizes change, and regenerate the images automatically.

If you’re not using the add-ons above, you’ll have to manually regenerate using one of the plugins available (Force Regenerate Thumbnails for example).

[dmendana]

Maybe I get it now. I’m not using the Page Header addon (as I said in the first post, I don’t want to let users control the header, I just want to build my header in the theme with a little more flexibility). I kind of thought that the function you provided here to copy and paste would crop images on the fly. If it doesn’t, and it relies on existing versions of images, then what has happened in my test makes every sense.

Thanks a lot!

[Tom]

Sorry about that. I answer so many topics that they all kind of merge into one sometimes! Guilty of not looking above!

Hopefully its not too much of a hassle regenerating the thumbnails manually.

Thanks! 🙂

[dmendana]

Hi Tom. First, thank you for this incredibly good support for something that you provide so cheap. I have already posted a five star rating in the wp theme directory.

Of course, registering the right image size and regenerating the thumbnails is no problem.

Finally, I have done it in a slightly different way. Instead of temporarily overwriting template-tags.php, I redeclared the whole function in my child theme’s functions.php:

function generate_featured_page_header_area($class)
{
	// Don't run the function unless we're on a page it applies to
	if ( ! is_singular() )
		return;

	// Don't run the function unless we have a post thumbnail
	if ( ! has_post_thumbnail() )
		return;

	?>
	<div class="<?php echo $class; ?> grid-container grid-parent">
		<?php the_post_thumbnail( apply_filters( 'generate_page_header_default_size', 'full' ), array('itemprop' => 'image') ); ?>
	</div>
	<?php
}

And then I used the filter to replace the featured image size, but insted of using width and height, I merely put the name of the custom image size I had registered:

add_filter( 'generate_page_header_default_size', 'generate_custom_default_page_header_size' );
function generate_custom_default_page_header_size()
{
      return 'custom-image-size';
}

I tested it uploading a new featured image. Perfect! Thank you so much!

[Tom]

Awesome! This is a perfectly acceptable solution, and is why I wrap my function in a !function_exists() function, so others can overwrite them 🙂

Great job! And thanks so much for the review!

[eric]

[eric]

Wonderful! That works beautifully. Thanks very much for your help!

[Author]

Posts