Avoid using original image for featured header image?

[Samuel]

When I use a featured / header image above the title, for a blog post. It looks ok, but it is using the original full width image (downsized using HTML/CSS), which is much larger that it needs to be. This slows down the loading of the pages and is not ideal.

I understand that using the full size image is more flexible when adapting the layout.

Still, I suggest a solution to somehow use a resized version of the image that has the actual size of what you see on screen. Maybe adding an option (dropdown) in the Customizer to use one of the existing wordpress image sizes. So that I could (beforehand) create a custom image size of 730px for example, and then I could ask GeneratePress in the customizer options to use that size for the header / featured image.

Another option: maybe GeneratePress could load an image size of 1200px, bigger than it needs to be, but still smaller than the original image.

Or anything to avoid loading the original image.

[Tom]

Hi there,

If you’re using the Featured image setting, WordPress should point to multiple images using srcset: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

By default, it’s set to show the “full” image in GP, but you can change this with a filter:

add_filter( 'generate_page_header_default_size','generate_change_page_header_size' );
function generate_change_page_header_size()
{
    return 'full';
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Simply change full to another size like large, and set that size in “Settings > Media”.

Hope this helps 🙂

[Samuel]

I can’t get it to work.

This is what I’ve done:

In my child functions file, I have added

/* Ask GeneratePress to use custom size instead of full size in header/featured image */
// Create header size
add_image_size( 'DFX-Header', 1100, 1100, false ); // false = scaled, true = cropped
// Use the header size
function dfx_change_page_header_size()
{
  return 'DFX-Header';
}
add_filter( 'generate_page_header_default_size','dfx_change_page_header_size' );

I have regenerated the thumbnails.

And it is still the original image that is used in the page header (featured image above the title).

HTML code:

<div class="page-header-image grid-container grid-parent generate-page-header">			
<img width="2816" height="1584" src="http://www.doucheflux.be/wp/wp-content/uploads/top.jpg" class="attachment-full size-full" alt="top" itemprop="image" srcset="http://www.doucheflux.be/wp/wp-content/uploads/top.jpg 2816w, http://www.doucheflux.be/wp/wp-content/uploads/top-320x180.jpg 320w, http://www.doucheflux.be/wp/wp-content/uploads/top-1024x576.jpg 1024w, http://www.doucheflux.be/wp/wp-content/uploads/top-400x225.jpg 400w" sizes="(max-width: 2816px) 100vw, 2816px" />				
</div>

I can’t show you the page, as it’s not public.

[Tom]

Have you tried changing it to a default size like “large” just to see if the filter is working?

[Samuel]

I just tried it, and… Yes! It is working with “large”.

And then I tried with another custom size “DFX-Mini”, and it worked also.

But it is still not working for size “DFX-Header”… I noticed, using an ftp program, that the size is of DFX-Header is not even generated for the images, so that’s why it didn’t work – the image doesn’t exist. Not sure why.

I have it working with “large” and that is good enough for me, so I’m closing the issue.

Thank you for the tip!

[Tom]

Try adding your add_image_size into a function like this:

add_action( 'after_setup_theme','generate_add_custom_image_size' );
function generate_add_custom_image_size()
{
    add_image_size( 'DFX-Header', 1100, 1100, false );
}

That might do it 🙂

[Samuel]

It works.

Thank you very much.

[Tom]

You’re very welcome 🙂

[Author]

Posts