Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Featured image markup on archives

Home Forums Support [Resolved] Featured image markup on archives

Home Forums Support Featured image markup on archives

  • This topic has 7 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #550194
    Matthias

    Hi Tom and Leo,

    I’m using this lazy loading plugin to speed up my site.

    Strangely, the plugin works fine on single posts and pages, but not on the (blog) homepage and archive pages.

    When I asked the plugin author about this, he wrote:

    As far as I see, the theme uses the get_the_post_thumbnail() function for displaying the featured images on blog and archive pages, and that is supported by my plugin… But there are classes missing for the img elements on your site that should be present for image elements that are generated using the function (like, for example, the wp-post-image class), so I think a plugin or modification of the theme causes the issue.

    When I disabled all plugins on my site and re-activated only the lazy loading plugin, it worked fine on all pages (singulars and archives). As soon as I activated the GP Premium plugin, it stopped working on the homepage and archive pages.

    I use GP Premium plugin to create a 2-column blog page where the 350×200-images are displayed next to the title (see homepage).

    Does that change the featured image markup? Or do you have any idea what could be the issue?

    Thank you!

    GeneratePress 2.0.2
    #550379
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Yes, we alter the image HTML when resizing is enabled, as we need to call a different image function.

    What’s the class that needs to be added? We should be able to give you a filter to add it manually.

    Let me know 🙂

    #550709
    Matthias

    Hey Tom,

    The lazy load plugin changes a few things in the image markup:

    1. Adds a lazyload-class to the image
    2. Prepends the src, srcset and sizes attributes with the word data-
    3. Creates a new noscript-element as a fallback

    Below is an example from my theme (I’m using GP with a custom function for srcset and sizes):

    <figure>
      <noscript>
        <IMG 
    	src="https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-800x533.jpg" 
    	alt="cyclist in front of Barcelona skyscraper" 
    	width="800" 
    	height="533" 
    	class="size-mm_img_800 wp-image-462" 
    	srcset="https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-800x533.jpg 800w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-200x133.jpg 200w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-400x267.jpg 400w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-600x400.jpg 600w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-1000x667.jpg 1000w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-1200x800.jpg 1200w" 
    	sizes="(min-width: 769px) 760px, calc(100vw - 60px)">
      </noscript>
      <img 
        alt="cyclist in front of Barcelona skyscraper" 
        class="size-mm_img_800 wp-image-462 lazyload" 
        data-sizes="(min-width: 769px) 760px, calc(100vw - 60px)" 
        data-srcset="https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-800x533.jpg 800w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-200x133.jpg 200w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-400x267.jpg 400w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-600x400.jpg 600w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-1000x667.jpg 1000w, https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-1200x800.jpg 1200w" data-src="https://thingstodoinbarcelona.com/wp-content/uploads/f-cycling-1-800x533.jpg" 
        width="800" 
        height="533">
      <figcaption class="wp-caption-text">Cycling is one of the best ways to explore Barcelona</figcaption>
    </figure>

    You wrote:

    we alter the image HTML when resizing is enabled, as we need to call a different image function.

    The plugin dev gave me this reaction:

    If this is a custom function of the theme to build the markup, and not wp_get_attachment_image(), and they could add a filter to modify the resulting markup of that function, I could use that filter in Lazy Loader and it should work.

    That sounds like a great solution. Do you think that could work? Or is there a better way to approach this?

    #550986
    Tom
    Lead Developer
    Lead Developer

    Let’s give this function a try:

    add_filter( 'generate_resized_featured_image_output', 'tu_add_featured_image_filter', 10, 2 );
    function tu_add_featured_image_filter( $output, $image ) {
        $image = apply_filters( 'post_thumbnail_html', $image );
    
        return $output;
    }

    Let me know 🙂

    #551358
    Matthias

    I tried the function but it didn’t change the markup of featured images unfortunately.

    BTW Don’t worry about it if this takes too much time. I want to be respectful of your time and I’m happy to hire a developer or pay the plugin author to make his plugin compatible with GeneratePress if you can point me to the relevant function(s) in the GP Github repository.

    It would be great if this lazy loading plugin works well with GP since it’s the only one that uses the awesome lazysizes script and doesn’t require jQuery 🙂

    #551955
    Tom
    Lead Developer
    Lead Developer

    No problem – I’m happy to help.

    Let’s try this, for now at least.

    1. Turn off the image sizing options in Customize > Layout > Blog. I assume the lazy loading works now?

    2. Add your size to this filter:

    add_action('after_setup_theme', 'tu_add_image_sizes');
    function tu_add_image_sizes() {
        add_image_size( 'large-thumbnail', 600, 600, true );
        add_filter( 'generate_page_header_default_size', 'tu_set_image_size' );
    }
    
    function tu_set_image_size() {
        return 'large-thumbnail';
    }

    You may have to regenerate the thumbnails for the images to be created: https://en-ca.wordpress.org/plugins/regenerate-thumbnails/

    #552511
    Matthias

    This worked, thank you so much! I just left a donation for ongoing development.

    Last question: is it possible to specify two different image sizes with this function (one for the homepage and one for archive pages)?

    I tried this, but that didn’t work:

    add_action('after_setup_theme', 'tu_add_image_sizes');
    function tu_add_image_sizes() {
    	if ( is_front_page() ) {
    		add_image_size( 'mm_img_400', 400, 9999, false );
    		add_filter( 'generate_page_header_default_size', 'tu_set_image_size_home' );
    	} elseif  ( is_post_type_archive () ) {
    		add_image_size( 'mm_img_800', 800, 9999, false );
    		add_filter( 'generate_page_header_default_size', 'tu_set_image_size_attractions' );
    	}		
    }
    
    function tu_set_image_size_home() {
        return 'mm_img_400';
    }
    
    function tu_set_image_size_attractions() {
        return 'mm_img_800';
    }
    #552825
    Tom
    Lead Developer
    Lead Developer

    That code should work. Although you may need to specific both add_image_size() functions outside the conditionals, and only keep the filters in there.

    Thanks so much for the donation! 🙂

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