wprox

Thanks so much for your answers!

Re #5, my page is private, and of course now I can’t seem to recreate those text based images, they’re not coming up, saw them yesterday…

One other issue that I do keep running into on mobile PORTRAIT is the following:

When I press the Pinterest button in mobile PORTRAIT orientation on my iphone 6+, it takes me to a window with a list of images to pin. I can’t scroll with my finger beyond the viewport (3 images), so I get to 3 + 1/4 images and then am stuck trying to pull down to the remaining images. It won’t go down any further.

When I turn to LANDSCAPE orientation, it works fines; I am able to pull down with my finger all the way to the last image.

When I preview this same device in portrait orientation in Dev Tools, I have no problem scrolling with my mouse through the images and selecting what I want.

Any thoughts on this?

Thanks again ??

Sorry, just also want to confirm that the plugin works with some of my other settings:

I want to add pinit.js JUST ONCE to the page above the closing body tag to add additional Pinterest stuff.

1. It seems that you are using / adding to the page the pinmarklet.js, NOT pinit.js, correct?

2. If so, I’m assuming I can load pinit.js and be able to run your Pinterest button alongside my additional Pinterest widgets, correct?

3. I am lazy loading images, which seems to work ok with your Pinterest button, and only shows the images that have been loaded at whatever point the button is clicked, for the most part. Any issues with lazy loading that I’ve missed?

4. When I press the Pinterest button, pinmarklet.js for some reason very early on page loads a 35kb webp image that doesn’t show up on the page for a while, and is supposed to lazy load later. This is not a huge deal, but any idea why it might do that?

5. On Pinterest button click, the window displays a text-based image (not created by me) of my page’s meta tag and another of my title tag. Is that something Pinterest generates?

Thanks again!!!

Ok, thanks for getting back to me, and for the great plugin ??

Thanks Lisa! Trying to figure it all out ??

Hi Florian,

I have this at the bottom of my page, is this from your plugin?

<script src=”https://myurl.com/min/lazyload.js”></script></body&gt;
</html>

Thanks!

Thank you Florian for all your help!

Still working through this with Monarch support…

Thank you Florian, the site is private and there is data-src.

I tried that pinterest pin it button plugin that worked for you, and it works ok for me on an image by image basis. I intend to use a plugin like that one.

But IN ADDITION to that type of Pinterest plugin, I am also using the Monarch plugin which has one sticky Pinterest social sharing button that scrolls down the page with the user. THAT Pinterest button (not attached to one image, but scrolling down the page) when clicked, opens up a window with ALL the images on the page to allow the person to choose which one to pin to Pinterest. When lazy load is off, it does that just fine. When lazy load is on, it doesn’t get most of the images, only the ones that don’t lazy load for the most part.

Since Monarch is under the Elegant Themes membership, I’m assuming you don’t have access to it. But this plugin is more similar to what I’m describing with Monarch than the pin per image plugin you tried above:
https://www.ads-software.com/plugins/sassy-social-share/

Let me know if that offers any clues as to what the problem is…

Thanks again!!!

Thanks, just deactivated amp plugins but they made no difference…

Thanks Florian!

So, today my initiator is back to lazysizes too, not sure what that Other was yesterday. I am switching back and forth between js and no js a lot, so not sure if that’s affecting anything.

Just noticed tons of errors in my error_log since 07-Mar-2018 14:22:17 UTC with this format:
[07-Mar-2018 14:22:17 UTC] PHP Warning: getimagesize(https://mydomain.com/wp-content/uploads/2017/08/each_image_on_page.jpg): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden
in /home/myID/public_html/wp-content/plugins/lazy-loading-responsive-images/src/Plugin.php on line 262

It goes through every image on the page. The line changed to 231 yesterday, perhaps when I loaded the new plugin version.

Any idea what this is?

Thank you ??

Thanks a lot Florian!

So sorry, that was actually my error, I had some css that was overriding your .lazyload {display: none; } for that device. I fixed the issue on my end, and it looks great.

Interesting, that with the new plugin version with the spinner, the Initiator in Dev Tools is no longer lazysizes, but now called Other…

Thanks Florian.

Just noticed same error still showing on ipad pro portrait in Google Inspect with no js: gray area below <noscript> img, coming from img. Once I delete the img element in DOM, it looks fine.

Thanks Florian! That solution came from https://iamsteve.me/blog/entry/nice-and-easy-lazy-loading-with-lazysizes-js

Thanks so much Florian, the images look good now ??

Did you use the solution I pasted above?

Why didn’t this code below that I put in functions.php work? I’m finding similar noscript type code recommended on some blogs for updating css on script / noscript elements, so I would really like to at least know how to get it into wordpress…

function some_function_name() { ?>
<noscript>
<style>
.image.loading { display: none; }
</style>
</noscript>
<?php }

add_action( ‘wp_head’, ‘some_function_name’ );

Thanks again ??

Thanks so much Florian!!!

I’m testing the <noscript> that the plugin generates and getting this issue that I found described on a blog (below). Basically I see the noscript image PLUS a little gray empty section below it that is from the lazy load image. The blog provides a non-WP solution, which I tried to just put into the WP code structure you gave me above, to put in functions.php, but it’s not working, unless you have a better solution???

When JavaScript is disabled you will still have the leftovers from the image which will be lazy loaded. In your <head> you can add some CSS to hide this. It’s the most reliable way to do so.

<noscript>
<style>
.image.loading { display: none; }
</style>
</noscript>

Thanks again ??

Thanks Florian!

1. I checked the lazysizes demo soon after sending the last reply, so that is indeed the way it’s supposed to look. Couldn’t remove that reply, but all good there!

2. Great suggestion regarding the lazysizesconfig.expand. I spent some time looking at that. Unfortunately as a relative WP newbie, not sure exactly in what format or where to put that in a wordpress-friendly way in my child theme. Could you please guide me on that?

Thanks again ??