[Resolved] Featured image markup on archives

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

[Tom]

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 🙂

[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?

[Tom]

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 🙂

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

[Tom]

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/

[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';
}

[Tom]

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

[Author]

Posts