Speed optimization test

If you have your own lazy load solution in place like Jetpack, you can adjust this plugin’s output. Per the docs:

In version 1.4 and above you can also customize the image loop completely by creating a parts/wp-instagram-widget.php file in your theme.

So, create the file wp-instagram-widget.php in (your theme folder)/parts/

Then add to it something like this:

<?php
// this is a 1x1px transparent gif in base64
$gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

// this is mostly just the copied output from the plugin, but with Jetpack's data-lazy-src attribute for its lazy load spec
echo '<li class="' . esc_attr( $liclass ) . '"><a href="' . esc_url( $item['link'] ) . '" target="' . esc_attr( $target ) . '"  class="' . esc_attr( $aclass ) . '"><img src="'.$gif.'" data-lazy-src="' . esc_url( $item[$size] ) . '"  alt="' . esc_attr( $item['description'] ) . '" title="' . esc_attr( $item['description'] ) . '"  class="' . esc_attr( $imgclass ) . '"/></a></li>';
 ?>

• This reply was modified 5 years, 3 months ago by taruckus. Reason: code output
• This reply was modified 5 years, 3 months ago by taruckus. Reason: typo

Thanks for the reply, but I don’t really understand what I need to do exactly.

I created a folder called “parts”, so the file was located in “/wp-content/themes/15zine/parts”. Then I simply copy+paste your code, but this resulted in a white space instead of the instagram feed.

I also have a file called wp-instagram-widget.php in the plugin folder (which is not in my theme folder) but I assume I should leave this as it is?

I’m not a developper, so no clue if I’m doing it the way it should.

No problem; I’d like to help you resolve this.

The file placement and white space you’re seeing is partially correct so far; the idea behind lazy loading is that the URL of the image is kept in a separate attribute of its element so it doesn’t load right away. Our problem is that Jetpack didn’t load the image when intended, so that’s what we need to get it to do.

I followed its specification here, but it looks like that wasn’t enough: https://jetpack.com/support/lazy-images/

I had a look at the code for Jetpack’s lazy loading (you don’t need to look at this): https://github.com/Automattic/jetpack/blob/master/modules/lazy-images/js/lazy-images.js

I think the images also need an additional class as well as the data-lazy-srcset attribute. Try replacing all of the code in the file you made with this. I tested this as well, so let me know if it works out.

<?php
// this is a 1x1px transparent gif in base64
$gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

// this is mostly just the copied output from the plugin, but with Jetpack's data-lazy-srcset attribute for its lazy load spec
echo '<li class="' . esc_attr( $liclass ) . '"><a href="' . esc_url( $item['link'] ) . '" target="' . esc_attr( $target ) . 'is-pending-load=1"  class="' . esc_attr( $aclass ) . '"><img src="'.$gif.'" data-lazy-src="' . esc_url( $item[$size] ) . '"  alt="' . esc_attr( $item['description'] ) . '" title="' . esc_attr( $item['description'] ) . '"  class="' . esc_attr( $imgclass ) . ' jetpack-lazy-image" srcset="'.$gif.'" data-lazy-srcset="'.esc_url( $item[$size] ).'" /></a></li>';
 ?>

Thank you so much for customizing the code and explaining me how you came up with it.

I just replaced the code and the insta feed appears again, but no lazy loading yet. If I open the inspect tool I still see the instagram images are loaded.

You’re welcome! it looks like it’s lazy loading to me.

I’m so sorry! I was looking at the pictures of another instagram plug-in I’m using.

The one from “wp-instagram-widget.php”, but I didn’t take in mind I also had an “instagram-slider”.

Tried to use the same method with same code, but that didn’t work unfortunately. Is this solution really specific to the wp-instagram-widget?

Yeah, the template part file is specific to this plugin. Lazy loading slider images requires a little more work as well. You could try heading to that plugin’s support or stackoverflow for help. Good luck!

Allright, good to know! Thanks a lot for fixing this issue! Appreciated a lot!

Looked like the succes was shortlift.

Now I get the message “Instagram has returned invalid data.”

See the screenshot here:

View post on imgur.com

Test this PR: https://github.com/scottsweb/wp-instagram-widget/pull/117

Some related discussion here: https://github.com/scottsweb/wp-instagram-widget/issues/112

Direct download link to the PR version: https://github.com/scottsweb/wp-instagram-widget/archive/fixes/two-point-oh-four.zip

Thanks for the update, but unfortunately this new update didn’t work for me. I changed everything to # in of username. Luckily that worked