Images inserted with URL won’t open in lightbox

Please explain what exactly you mean with “inserted with URL”.

Images need to be linked to open in the Lightbox. So just having an image showing in the page is not enough.

Also see the following example:

https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-external-images/

@awelzel Sure thing. Insert a new image block, select “Insert from URL” and paste the URL. Click the curved “Apply” arrow button. The image will be inserted into the page. Click the insert link button and choose “Link to Media file.”

When you click on the image on the frontend, it will not open in the lightbox but it will open the image itself and that image will take over the page.

Here’s a link to the page I’m working on: https://nv.vmockup.com/overview/

• This reply was modified 2 years, 10 months ago by vectyr.

Works fine here – exactly as you described it. See the example:

https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-external-images/

So something is wrong on your website. But without seeing the code I can’t help you at all, sorry.

@awelzel I think I may have found the problem. I’m linking to images from Microsoft Sharepoint, and I have the image settings to allow public viewing of the images and that’s obvious because you can see them on the page and view the larger one because the block is linked to the file.

When I link to other images from other URLs it seems that the “data-lbwps-” attributes are being added but not to images where the URLs point to images hosted on SharePoint.

Any ideas? It doesn’t seem like that should matter. It should see a linked image with the same markup and apply those attributes right? Does the source matter?

I added a random linked image down below, it’s blueish city scape and you can see that it works. All the other images don’t though.

• This reply was modified 2 years, 10 months ago by vectyr.

For me all the images on https://nv.vmockup.com/overview/ work fine at the moment.

So what exactly do you mean with “All the other images don’t though.”? See for yourself – this is one of those images:

https://nv.vmockup.com/overview/#&gid=2&pid=1

One thing which may be an issue with images from Microsoft Sharepoint – if the URL does not end with an image extension like “.jpg”, “.jpeg”, “.png”, “.webp” etc. Lightbox with PhotoSwipe will not recognize it as “image” since the plugin only uses the name in the URL. Loading every file to check if the MIME type reported by the server is an image would cause a lot of unwanted traffic as every image would then have to be requested twice: once when rendering the page and a second time when the user opens it.

As a workaround you can always add the required “data-lbwps-…” attributes manually by adding the image including the link as HTML block.

• This reply was modified 2 years, 10 months ago by Arno Welzel.

Ah, yeah, the gallery works, those are uploaded to the site. I’m looking at the first three images on the page. There is a .jpg extension on the files and the links. Haven’t found a solution yet and the images are not appearing on mobile either which is unfortunate.

It looks like this is SharePoint causing issues here, I appreciate your help though. I’ll keep looking for another solution, we may just have to have the images on the site, the client was hoping that we could keep all the images within SharePoint because they like them organized there.