Custom Thumbnail not working

Resolved

(@pakpenyo)

Custom thumbnails don’t work well in the latest version 6.2.1. I use template tags and filters. Also vanilla-lazyload.

if ( function_exists( 'wpp_get_mostpopular' ) && ! is_amp() ) {
	$args = array(
		'wpp_start'      => '<section><header><h2>' . esc_html__( 'Popular', 'v13' ) . '</h2></header><div class="list">',
		'wpp_end'        => '</div></section>',
		'post_type'      => 'post',
		'limit'          => 6,
		'range'          => 'last7days',
		'taxonomy'       => 'post_tag',
		'stats_taxonomy' => 1,
		'post_html'      => '<a href="{url}" title="{title_attr}">{thumb_96}<header><h3>{text_title}</h3><div class="post-meta">{tags}</div></header></a>',
	);
	wpp_get_mostpopular( $args );
}

function wpp_thumbnail( $html, $post_id ) {
	if ( false !== strpos( $html, '{thumb_96}' ) ) {
$img_id = 28105;
		$img    = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'thumb96' );
		if ( empty( $img[0] ) ) {
			$img = wp_get_attachment_image_src( $img_id, 'thumb96' );
		}
		$thumb = '<img class="lazy" data-src="' . esc_url( $img[0] ) . '" alt="" width="' . esc_html( $img[1] ) . '" height="' . esc_html( $img[2] ) . '">';

		if ( $thumb ) {
			$html = str_replace( '{thumb_96}', $thumb, $html );
		}
	}
	return $html;
}
add_filter( 'wpp_parse_custom_content_tags', __NAMESPACE__ . '\\wpp_thumbnail', 10, 2 );

All images are blank, data-src doesn’t change to src. All worked fine before 6.2.1. So for now I’m back to 6.1.4. Any suggestion?
Thank’s a lot for your hard work.

This topic was modified 2 years, 10 months ago by pakpenyo.

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Hector Cabrera
(@hcabrera)

2 years, 10 months ago
Hi @pakpenyo,

Just tried your code with the latest version of the plugin and it works as intended, but there are two things that you need to fix on your end.

#1 You have this conditional in your wpp_thumbnail() function:
```
if ( empty( $img[0] ) ) {
    $img = wp_get_attachment_image_src( $img_id, 'thumb96' );
}
```
The $img_id variable you’re trying to use with wp_get_attachment_image_src() has not been defined anywhere. Was this a typo?

#2 The data-src stuff is not part of WordPress Popular Posts. The script that changes it from data-src to src is probably something you / your developer wrote, or something coming from your theme or another plugin. You need to find out why it’s not changing, but again that has nothing to do with WPP.
Plugin Author Hector Cabrera
(@hcabrera)

2 years, 10 months ago

As a side note, you don’t really need to use vanilla-lazyload. All major browsers nowadays support the loading=”lazy” attribute (see Can I Use: Lazy Loading) so you don’t have to use JS for this anymore (unless you want to support dead browsers like Internet Explorer for example).

Thread Starter pakpenyo
(@pakpenyo)

2 years, 10 months ago

Thanks for the reply.

The $img_id is default image for articles without image. I still use 3rd party lazy library for more control. I have several iframe need lazyload (Firefox loading lazy only work with images).

What I’ve found so far is to disable the Load popular posts list via AJAX, and all the images appear. There is something wrong/conflict with <div class="wpp-shortcode wpp-ajax">. I’m using Litespeed Cache and always enable that option.

Plugin Author Hector Cabrera
(@hcabrera)

2 years, 10 months ago

The $img_id is default image for articles without image.

Still, that variable is not defined anywhere within your function so unless it’s a global variable then that bit of your code isn’t really doing anything.

What I’ve found so far is to disable the Load popular posts list via AJAX, and all the images appear. There is something wrong (…)

Most likely the reason is that the generated HTML code is being encapsulated within the Shadow DOM when the AJAX feature is enabled (something I plan on changing soon as that wasn’t intended), hence vanilla-lazyload’s script might not be able to reach it (but this is mere speculation, haven’t really tested anything as I just woke up haha).

Thread Starter pakpenyo
(@pakpenyo)

2 years, 10 months ago

Still, that variable is not defined anywhere within your function so unless it’s a global variable then that bit of your code isn’t really doing anything.

Line $img_id = 28105; it’s the default image ID.

Most likely the reason is that the generated HTML code is being encapsulated within the Shadow DOM when the AJAX feature is enabled (something I plan on changing soon as that wasn’t intended), hence vanilla-lazyload’s script might not be able to reach it (but this is mere speculation, haven’t really tested anything as I just woke up haha).

Take your time.
6.1.4 worked fine after replacing line 166 in src/Output.php which caused a large error_log with a fix from 6.2.0.

Plugin Author Hector Cabrera
(@hcabrera)

2 years, 10 months ago

Most likely the reason is that the generated HTML code is being encapsulated within the Shadow DOM when the AJAX feature is enabled

After having breakfast and now being fully awake, no, that’s not really how it is.

The shortcode isn’t being encapsulated within the Shadow DOM as I stated earlier. The reason why vanilla-lazyload isn’t working when AJAX is enabled is most likely because WPP’s posts (and their thumbnails) are being added to the DOM asynchronously, hence event listeners registered on page load (as I assume that’s how vanilla-lazyload is working) won’t apply to them.

So, either disable the AJAX functionality if you wish to keep using vanilla-lazyload to load your thumbnails (but then you lose the benefit of AJAX preventing caching plugins -if you’re using one- from caching your shortcode) or use the native lazy load attribute with your image tag (which should be able to coexist with vanilla-lazyload) and your thumbnails should load normally even with AJAX enabled.

Thread Starter pakpenyo
(@pakpenyo)

2 years, 10 months ago

I’m now using native lazyload. All working fine. Thanks a lot for plugins and support.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom Thumbnail not working’ is closed to new replies.