Black Friday Sale! Get up to $40 off GP Premium!Learn more

Avoid using original image for featured header image?

Home Forums Support Avoid using original image for featured header image?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #203532
    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.

    #203554
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #204060
    Tom
    Lead Developer
    Lead Developer

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

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

    #204088
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #204569
    Samuel

    It works.

    Thank you very much.

    #204611
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.