[Resolved] Change size of page featured image

Home Forums Support Change size of page featured image

  • This topic has 13 replies, 3 voices, and was last updated 1 year ago by eric.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #96701
    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. 🙂

    #96740
    Tom
    Lead Developer
    Lead Developer

    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!

    #96984
    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.

    #97133
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #97215
    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.

    #97282
    Tom
    Lead Developer
    Lead Developer

    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 );
    }
    #98483
    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

    #98568
    Tom
    Lead Developer
    Lead Developer

    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).

    #98667
    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!

    #98669
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #98711
    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!

    #98731
    Tom
    Lead Developer
    Lead Developer

    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!

    #1027215
    eric
    #1027216
    eric

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.