mikejandreau

I gave up on this and reversed my logic. Since the email template only fires when an order is Completed, I set up the IF ELSE in the opposite order.

<?php if ( $order->has_status( 'completed' ) ) { ?>
COMPLETED TEXT

Then a simple elseif since my custom status is sending the same template but wouldn’t be “completed” (but instead would be my custom status).

Thanks. That defeats the entire purpose of lazyloading since the whole site is slideshows, but I understand what you’re saying.

Here’s the CSS I’m getting output: https://take.ms/ITEcK

The top is without Lazyload running, the bottom is with.

You can see the height is being reduced by ~60 pixels and the width is being increased by ~2500 pixels.

How can I tell Autoptimize’s lazyload to not change the height and width of these images? The slideshow is handling that.

No caching in place, and it should work fine in functions.php. It’s not a very complicated function.

No worries, I think we’ll survive without it, given how much faster this new server is anyway (and I’m running image optimization there now, too, for even smaller images).

It’s in my functions.php file.

I just don’t see it loading when something is lazyloaded, like I assumed it would be.

Not sure I understand.

Shouldn’t this code add a placeholder to anywhere that’s being lazyloaded? I don’t see that on the URL I linked earlier.

I removed that apostrophe, but still not seeing the preloader image. Just the blank gray screen.

That fixed it, but it didn’t seem to work. Mind taking a look?

https://dev.cummingsarchitects.com/portfolio/1785-reverend-john-mottey-house-centre-farm/ I’m just getting the gray “your image is downloading” background.

I’m getting a 500 error when I try the other code I found.

Here’s what I’m using:

add_filter('autoptimize_filter_imgopt_lazyload_placeholder','replaceholder');
function replaceholder($in) {
$loader = "data:image/png;base64,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";
return $loader';

Any idea what’s wrong?

Nevermind, found another post with sample code that I’ll try!

Awesome. Can you point me to the docs on it? I haven’t seen that anywhere yet.

That makes sense.

At least I’ve got a workaround that seems to do the trick (I’m testing across all browsers and resolutions now, but it seems good so far).

Thanks for the (super quick) replies!

I fixed it (at least temporarily) by adding:

img.show-on-mobile {
    left: -92px !important;
    width: 600px !important;
}

But I’d love if you’ve got a more permanent fix.

Comparing the HTML from no-plugin vs plugin:

No-plugin:
<img class="show-on-mobile" src="https://www.cummingsarchitects.com/wp-content/uploads/CentreFarm_Vertical_Exterior2.jpg" style="backface-visibility: hidden; position: absolute; left: -92.8615px; top: 0px; z-index: -1; max-width: none; height: 896px; width: 599.723px;">

Plugin:<img class="show-on-mobile ls-is-cached lazyloaded" src="https://build.mjjdesigns.net/ca/wp-content/uploads/CentreFarm_Vertical_Exterior2.jpg" data-src="https://build.mjjdesigns.net/ca/wp-content/uploads/CentreFarm_Vertical_Exterior2.jpg" style="backface-visibility: hidden; position: absolute; left: -689px; top: 0px; z-index: -1; max-width: none; height: 896px; width: 1792px;">

And here’s a side by side of the CSS: https://take.ms/HWuxE (Left is non-plugin, right is plugin)

It looks like the plugin is altering the width of the image (making it too big) and the left padding. If I change those to the same as the non-plugin version, it looks right. But why is the plugin doing that and how can I fix it?

• This reply was modified 5 years, 8 months ago by mikejandreau.
• This reply was modified 5 years, 8 months ago by mikejandreau. Reason: Added CSS side by side

Okay, here’s that same project on a copy of the site, with Autoptimize enabled and lazy load turned on: https://build.mjjdesigns.net/ca/portfolio/1785-reverend-john-mottey-house-centre-farm/

You can see what happens when you go to that URL on a mobile device (or use Chrome’s responsive view and look at the mobile phone view). The images get squished and don’t look correct.