Bigger Picture + Gumlet = broken images

[fiveleaf]

I'm using Gumlet to serve responsive images on a client site. I've implemented Bigger Picture in a portfolio area to display enlarged versions of the images. The same code running on an A2 Hosting server runs fine, but running on an IONOS server displays a broken image. The image filename is completely stripped from the source URL in the BP overlay code for some reason. Wondering if you have any insight whatsoever as to what could be happening. I'm uploading two screenshots, both from Chrome Version 121.0.6167.184 (though this happens in Safari, Edge, and Firefox as well). Same code. Different host. Different behavior. Working site at https://edkenney.5iveleaf.com/collection/recent-work. Broken site at https://ekenney.com/collection/recent-work.

Broken:

Working:

Source:

In the interest to ensuring Gumlet isn't to blame, I've also made a sample page which does not use Gumlet for serving the images and instead just uses the full res image. Same issue. https://ekenney.com/image-test

[henrygd]

No idea I'm afraid.

My guess would be that the gumlet library is messing it up. I see it's modifying the img tag.

You can use a console log to see if the img property is being passed in correctly:

bp.open({
  ...
  onOpen: (container, activeItem) => {
    console.log('activeItem', activeItem)
    container.setAttribute('data-gumlet', 'false')
  },
})

The gumlet docs say you can exclude an image if you set data-gumlet="false" on it. You don't have access to the img tag in onOpen bc it's added when the image loads, but you can try what I put above to see if adding the property on a parent prevents it.

Or try using the elements_selector_img option documented on that page. Maybe try img:not(.bp-wrap) or using a class like the example.

https://docs.gumlet.com/docs/image-integration-javascript-gumletjs#ignore-images

Otherwise you can try removing the whitespace in the data-img tag.

Also, I like your implementation, but a few tips: set the thumb property to be equal to the thumbnail you're displaying on the page -- this uses the thumb for the animation when the bigger image isn't loaded yet. And set your thumbnail a tags to display: block so they take the full space of the image. If you have the max width / height of the image ahead of time, you should set those properties as well.

[fiveleaf]

Thanks for the quick reply. I did further notice that if I strip out the Gumlet script in the header (even though I was telling it to ignore the image), that functionality of Bigger Picture is restored. So I think you're right that this is some sort of Gumlet oddity. Strange that it works on Bluehost and not IONOS though. That's the real head scratcher. Thanks for the additional tips as well. I'll have a look at those improvements as well.

[fiveleaf]

Well, here goes one of those developer moments where you finally figure out the issue and you feel completely stupid about it, but have no idea how you would have ever thought of it if you hadn't just tried everything else and started doing seemingly meaningless things out of desperation.

Since one difference between the staged site on Bluehost and the production site on IONOS was that the Gumlet script settings were slightly different, I decided to try a 'www' in front of the current domain in the Gumlet config. Lo and behold, it works now. So dumb. So instead of:

<script type="text/javascript">
    window.GUMLET_CONFIG = {
        hosts: [{
            **current: "ekenney.com",**
            gumlet: "edkenney.gumlet.io"
        }],
        lazy_load: true,
        srcset:  true,
        auto_webp: true
    };
    (function(){d=document;s=d.createElement("script");s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

I have:

<script type="text/javascript">
    window.GUMLET_CONFIG = {
        hosts: [{
            **current: "www.ekenney.com",**
            gumlet: "edkenney.gumlet.io"
        }],
        lazy_load: true,
        srcset:  true,
        auto_webp: true
    };
    (function(){d=document;s=d.createElement("script");s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

Thanks again for the assistance. It at least got me thinking about other possibilities for the cause of the issue. I'm going to change the title of the post to reflect the actual issue in hopes someone else experiencing the same issue might be helped by it.

[henrygd]

Cool, glad you got it figured out :+1: