Thread Starter
Guido
(@guido07111975)
Hi again,
Found an alternative solution, with using the get_the_post_thumbnail() function:
get_the_post_thumbnail( get_the_ID(), 'my-image-size', array( 'class' => 'my-class', 'style' => 'my-custom-css', 'alt' => 'my-alt' ) );
Still would like an answer regarding the base64 encoding 😉
Guido
Hi @guido07111975
I hope you’re well today!
That Base64 encoded data is a placeholder image used by Lazy Load. If it’s not working – do you mean that the image “stays that way” and is never replaced with “real” image?
If yes, that would usually be related to some conflict rather than “no support for base 64” as this image should be replaced by JS anyway when needed (regardless of whether it is rendered or not) – with a regular image and if that happens you would see regular image URL there.
Common reasons are e.g. if more than a single Lazy Load feature is enabled (e.g. in Smush but also in some other plugin or in theme) or if cache is interfering or if there’s some conflict breaking JS.
What you could try, though, would be to change try changing these two settings of Lazy Load in Smush:
1. “Display” option in “Display and Animation” section to “None”
2. and additionally, checking if “Scripts method” works better set to “Header” instead of “footer”
There’s a good chance that one of these settings (or combination of both at once) would solve the issue.
If it doesn’t, then first step would be to take care to disable all the cache (site/server) temporarily and then conduct a full conflict test. But please try above options first.
Kind regards,
Adam
Thread Starter
Guido
(@guido07111975)
Hi Adam,
Thanks for your reply.
do you mean that the image “stays that way” and is never replaced with “real” image?
Yes, you can check for yourself when inspecting the items at my temp page.
I don’t have other optimalisation plugins at that site. As mentioned before, I think it’s because the Smush plugin doesn’t hook into the image when it’s loaded with function wp_get_attachment_image_src().
I now use the get_the_post_thumbnail() function and everything is working smoothly.
Guido
Hi @guido07111975
I hope you are doing well.
I made a test using wp_get_attachment_image_src and it worked fine as long we use the HTML image tag since the Smush Lazy Load doesn’t support background images, but we are happy to hear it worked fine for you using get_the_post_thumbnail()
Best Regards
Patrick Freitas
Thread Starter
Guido
(@guido07111975)
Hi Patrick,
Strange. This is how I did it:
$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ) );
$output .= '<img class="my-class" src="'.$image_attributes[0].'" width="'.$image_attributes[1].'" height="'.$image_attributes[2].'" alt="my-alt" />';
Can you explain what’s the HTML image tag?
Guido
Hi @guido07111975,
Image tag is the img tag ie:
<img>
Are you echoing the output? Where exactly is the above called in your given “my temp page”? As I don’t see any img tags with “my-class” loaded.
If you want us to check why the img tag didn’t work, could you please share the full page template code via Pastebin, so that we could have a better idea?
Looking forward to your response.
Kind Regards,
Nithin
Thread Starter
Guido
(@guido07111975)
Hi,
I can now confirm it does work when using the wp_get_attachment_image_src() function.
In my code there was a single whitespace in the class attribute:
$output .= '<img class ="my-class"
Instead of:
$output .= '<img class="my-class"
When removing that single whitespace the image is loaded and 2 additional classes are added to the img tag:
$output .= '<img class="my-class ls-is-cached lazyloaded"
Thanks for your support 🙂
Guido
