Gutenberg block, image compare

Hi Jeff

Is Image-Compare a separate plugin? Or do you mean Gallery block when two images are next to each other? I couldn’t spot a problem with the page you linked.

Plugins released on WordPress are open source, so are provided free and as-is by their developers. Those developers need to update their plugins to stay compatible with WordPress/Gutenberg, and sometimes they don’t or may have to prioritise other things in their life. If you spot an issue with a plugin, I would always advise posting for support in that plugins Support form first.

Hope that helps

James

Well this “plugin” is a part of Gutenberg under layout elements, in mine, it’s on the top row called Image Compare. I thought it was a plugin from another developer but they said it’s not theirs.
I’m not up on those “elements” that are inside of Gutenberg and what belongs to Gutenberg and what is Separate like the Jetpack section in the Gutenberg is obviously separate as is the Yoast structured data blocks.
I would assume that all elements in layout, formatting, and common, belong to Gutenberg. The embeds (youtube and Spotify) are ones where I would go to them for the assist.

If the layout elements also belong to other developers, maybe when you go to use them, they should announce who the developer is and how to contact them.

I did stop using this image compare because it made my blog look bad. I can put it back in down below my signature block and you can see how the images get formatted. I also assume it may be one of my plugins that minimize CSS or other plugins that are there to try and speed up the loading and resulting speed of the page. I would just like an assist in figuring out if I broke it or something else.
I just don’t know who to talk to, so I’m thinking a Gutenberg person is the place to start.
I don’t HAVE to use it but it would be very useful in comparing some of my photography techniques.

If you go back to that page I have now put at the bottom of the page two new items. First is a screenshot showing the layout element that I am trying to use. And as someone else posted it works perfectly on the inside where you are editing the blog article but when you look at it in preview or after it’s published, then it shows as two separate images stacked on top of each other.

Let me know if you have any thoughts on this.
Thanks

Here’s a list of default (core) Gutenberg blocks – https://www.ads-software.com/support/article/blocks/ unfortunately image compare is not a default Gutenberg block.

Image Compare seems to be part of the JetPack plugin. Support for that plugin is here https://www.ads-software.com/support/plugin/jetpack/ and also here https://jetpack.com/support/ – yeah it’s a bit confusing, but the right people to help you solve your issue will be hanging out in those place.

BUT, I don’t think this is a Gutenberg or Jetpack issue. From inspecting the code on your site, there are console errors – jQuery is not being loaded correctly, and I imagine the image comparison block needs this.

From what I can see – you have used AutoOptimize on your site, and this is breaking jQuery and thus Jetpack and thus Image Compare. You should inspect AO options, and get it to ignore jQuery or to not defer it. Optimising your website for speed is important, but you should always check for errors once you have done it.

Here’s a link to AO support forum if you cannot solve it yourself https://www.ads-software.com/support/plugin/autoptimize/

just make sure that:
1. js/jquery/jquery.js is (still) in the comma-separated JS optimization exclusion list.
2. that jQuery is not asynced/ deferred.

hope this helps,
frank (ao/asyncjs dev)

Thanks Frank. I turned off all js optimization and it gave me the dividing line between the two pictures but the two pictures that are to be compared are blank. I’m not real good with the code side of things (good enough to be dangerous) and I really need to speed up my site so I try to minify everything and to make sure nothing is blocking the render…
But it seems the closer I get to the goal of 1.5 to 2 second page load times, the more things get broken…
I’ve turned off in both auto-optimize and Async defer all js optimization. I’m looking to see if I have another plugin that might have a hand in this. I’ve also purged my CDN but I’m not sure if that will have any effect.

Thanks for the assist.

I think I found the problem. Auto-optimize has a tab for images and lazy-load the images below the fold and this prevented the compared images from displaying, even though you moved to below the fold to view the images. The two images still did not show up.

So my choice is to either use the compare image Gutenberg plugin or the lazy load option which has page speed benefits… I think it’s not worth the trade-off, thoughts? ??

Well, you could use the “lazyload exclusion” field to exclude those images from being lazyloaded?