Images inserted with external URL won’t open in lightbox

The mentioned issue was not a bug. In fact that was specific problem on that website. Also images from imgur.com work fine – see here:

https://wordpress-demo.arnowelzel.de/embedding-image-from-imgur-com/

However you have to embed the image itself, like https://i.imgur.com/YoMXcLE.jpeg. So using https://imgur.com/gallery/Z9ha8eu for the image above will of course not work, since that URL is not the image but a page at imgur.com.

Also keep in mind, that https://www.ads-software.com/plugins/blueimp-lightbox/ has not been updated more than 9 years. Using plugins without active support may be a security risk.

Thank you for the quick response. I’ve disabled BlueImp, enabled Photoswipe and elaborate I use wpforo wordpress plugin. Here is a forum posted imgur image which Photoswipe doesn’t add to a lightbox.

https://egpu.io/forums/builds/2022-14-lenovo-thinkpad-t14s-amd-r6k8cu-rx-580-32gbps-usb4-akitio-node-linux/

Locally hosted images are shown in the Lightbox as seen at:

https://egpu.io/forums/custom-egpu-chassis/oculink-what-it-is-why-you-need-it-and-where-to-get-it/paged/3/#post-105135

Can you offer any advice on how the imgur (or other externally hosted images) can be made to show in the Lightbox?

That image also works on my demo site – so external images in geeneral are not a problem, just on your site:

https://wordpress-demo.arnowelzel.de/embedding-image-from-imgur-com/

I don’t know what is going on on your site – but it seems imgur sends a 302 redirect to the surrounding page when the images URLs are loaded. Maybe one of your plugins or the forum solution handles imgur links in a special way. But I don’t have any idea what is wrong here, sorry.

I concur something is off. Best I’ve come up with is LightboxPhotoSwipe.php isn’t adding “data-lbwps-…” attributes for externally hosted images even if uncheck “Ignore links to images on other sites” option, so then the .js routines skip adding those images to the Lightbox.

For now am reverting back to Blueimp as it handles these externally hosts images perfectly. BTW – I’ve merged the latest (late 2021) .js Blueimp source to the 9yr old plugin to update it’s functionality.

https://github.com/blueimp/Gallery

The data attributes are not added with JavaScript. They have to be added on the server after the headers of linked images got loaded to find out the exact image size. However imgur does not allow this from your server – instead it responds with a 302 redirect to the page, where the image is embedded. See for yourself:

Right-click any of the imgur images in your forum and select “open link in new tab”. Then not the image will be opened but the page on imgur!

Also when you check what event handlers are registered for “click” on the image links you see a lot of them. Lightbix with PhotoSwipe only registers one single handler. But your site contains nearly 20 of them with all kinds of stuff, mostly coming from the forum plugin. I would check, if the forum solution you use, has some options to leave images as they are and not try to be “smart” when clicking them.

Can’t disable forum smarts to leave images as they are. Have reverted back to Blueimp which scans for a data-gallery attribute to add images to a Lightbox.

What is the simplest <a href> or <img> attribute that PhotoSwipe .js files scan for to add images to a LightBox?

There is no “simple” attribute. Every image link (the link – not the image itself!) needs the exact width and height added as data-lbwps-width and data-lbwps-height so Photoswipe knows the size before it will open the lightbox. This is needed since Photoswipe provides zooming if needed – but for this it also needs to know the exact size of the image.

Meanwhile it seems that now my server is now also blocked by Imgur. The demo at https://wordpress-demo.arnowelzel.de/embedding-image-from-imgur-com/ does not work any longer since Imgur will not allow to read the image meta data from the server and a direct link to the image will result in a 302 redirect by Imgur. Sorry, there is nothing I can do to fix this. If the plugin can not read the image data, it can not work, sorry.

Sadly, I confirm that right-clicking on imgur image hosted locally as i.imgur.com/image.jpg, with intent to open it in a new tab where can zoom magnify it doesn’t do that. The (now) second attempt to open the image redirects to imgur where it displays the image in imgur’s advertised interface.

Seems imgur made this change at some recent time to maximize ad revenue.

I guess a workaround there would need to gather/cache the initial image to the local host and then work from that to avoid the second call.

Any chance of creating a workaround using an edittable whitelist of hostname URLs that if match against (eg: imgur.com) that image magnification feature is disabled and hence meta data not gathered? There would just show image like Blueimp shows.

If that feature was added, I could move back to Photoswipe and enjoy magnification when it’s viable.

No, this is not possible.

PhotoSwipe needs to know the size of the image before it will be displayed, because this is the way, how the zooming feature works: since PhotoSwipe knows how big the image is, it also knows if zooming is even possible. Blueimp just displays the image with a maximum width and height of 100% on the screen – so even big images will always fit into the lightbox, but you can not zoom in, since Blueimp knows nothing about the actual size of the image.

For this reason the backend reads the image header and adds the image size as attributes data-lbwps-width and data-lbwps-height to the image link.

Also see the example at https://photoswipe.com/getting-started/#basic-vanilla-js-example – there the attributes are named data-pswp-width and data-pswp-height, but the logic is the same.

Not sure on the intricies of Photoswipe on whether it is possible. Using blueimp functionality as an example, what I asked in my previous post is a feature request of “blacklisted hosts for which magnification is unavailable” so the image hostname is checked in the source html and if matches a blacklisted one, just display the image like Blueimp does. This would circumvent the need to first gather the image’s metadata for sizing, then gather the image for display, something imgur.com are checking for and preventing, creating a redirect on second call to imgur.com’s own advertised interface to display the image.

Photoswipe must know the image size – always. Without the image size PhotoSwipe can not display anything at all. It does not matter if zooming is wanted or not.

Thank you for delving into my queries.

I guess if anybody else encounters this problem my solution was to use the FancyBox for WordPress plugin.

https://www.ads-software.com/plugins/fancybox-for-wordpress/

It provides image magnification like photoswipe but also has blueimp’s correct handling of imgur images.