Missing API documentation

[AndreHoe]

Hi there, the link in the documentation is down: https://photoswipe.com/documentation/api.html. Can you please restore this one?

And maybe someone have a tip for me. I want to use JavaScript to automatically adjust the following meta tags when an image is opened in lightbox-photoswipe.

<meta property="og:image" content="[lightbox-photoswipe current image url]" />
<meta property="og:image:secure_url" content="[lightbox-photoswipe current image url]">
<meta name="twitter:image" content="[lightbox-photoswipe current image url]">

If a lightbox-photoswipe link is shared e.g. in social media, the respective lightbox-photoswipe image should appear there as site image. Does anyone have an idea whether this works at all? Or does that not work with anchors and social media caches the site images? How does it Instagram and co because it works for them.

Greetings

[arnowelzel]

The URL https://photoswipe.com/documentation/api.html is still up and running. However this site is not maintained by me - the website https://photoswipe.com is not mine. Anway, you will find all API calls also in the source at https://github.com/arnowelzel/lightbox-photoswipe/blob/main/src/lib/photoswipe.js.

About the meta tags:

Where exactly to you want to have these tags? The shared link is either the image itself - which does not have any tags at all as it is just the image - or to the URL which opens the image, which also does not have any of those tags as it is your website containing the image.

Example:

Link to the opened image: https://arnowelzel.de/en/#&gid=1&pid=1

The image itself: https://arnowelzel.de/en/wp-content/uploads/sites/2/2021/07/roland-sc55.jpg

[AndreHoe]

Wow, many thanks that was a quick answer. It seems like the api page was down temporary (got an error 404). It is now working again.

Sorry, I have expressed myself inaccurately. I meant when a link like https://arnowelzel.de/en/#&gid=1&pid=1 is shared in social media / messanger app, then the preview image of the page including page description is inserted above the message. (the page arnowelzel.de unfortunately doesn't use these meta tags, that's why it's not such a good example).

But if we take heise.de for example, it would be the following image: https://heise.cloudimg.io/bound/1200x1200/q85.png-lossy-85.webp-lossy-85.foil1/_www-heise-de_/icons/ho/opengraph/opengraph.png . If there were lightbox-photoswipe on the page and an image from the gallery would be shared, there would be shown the .../opengraph.png image and not the clicked image from lightbox-photoswipe. Thats why I would like temporarily change the meta property. However, I am unsure if this would work for messenger apps and social media due to caching on theses sites. But I am pretty sure there have to be a solution. As I see Instagram is refreshing the whole URL without using anchors and reloading the page. If you share an image it shows the image, not the Instagram default image. I think this would be a beneficial feature for lightbox-photoswipe. Do you have any ideas how to implement it theoretically?

[arnowelzel]

I still don't understand what you are talking about.

The link at https://heise.cloudimg.io/bound/1200x1200/q85.png-lossy-85.webp-lossy-85.foil1/_www-heise-de_/icons/ho/opengraph/opengraph.png is just an image. There is no meta data (or if there is, it is part of the image itself). What do you mean with "shown the .../opengraph.png image and not the clicked image"?

However - you can always create a custom sharing link in the backend using your own script on your server creating whatever you want as output - you can add any link to "Custom link, URL" using any of the placeholders like {{image_url}} for the URL of the image.

For example if you have a script on your server like /tools/showimage-with-metadata.php which will generate all required meta data and forward this to a social media API and uses the image URL as parameter, this could be: /tools/showimage-with-metadata.php?image={{image_url}}.

[AndreHoe]

I mean the html meta tags in the part of the website.

This is the source for messengers and social media to show a preview image when adding an URL in a message. For example heise.de it looks like:

Most websites have a default static image in their meta tags. I am looking for a way to set it dynamically, to do it like Instagram and all the other "Image websites". Instagram example https://www.instagram.com/explore/tags/philodendronselloumvariegated/

Instagram shows the image in a slideshow like lightbox-photoswipe does: https://www.instagram.com/p/CDqNMcygpyF/

By adding the URL to a messanger (e.g. Signal, WhatsApp, FacebookMessanger etc.) it looks like this:

I probably need to take a close look at Instagram's code. But maybe you have an idea how I can implement this quickly? Sorry for my poor explanation at the beginning.

[arnowelzel]

Well - if the meta information is taken from the website than you have to add it to the website. I don't see what shared images have to do with it. And no, there is no way to "dynamically" add this for shared images. Either the meta information for the website is there or not.

[AndreHoe]

I think we are talking past each other. I don't mean the sharing option of the plugin itself. My point is:

We include lightbox-photoswipe via WordPress plugin in a website. When we click on a photo (and the plugin is set accordingly), lightbox opens and the photo is displayed. Appropriate parameters are appended to the URL via hashtag. If we now call a link to lightbox incl. #-parameters, the web page is loaded normally (incl. meta data in the part, if these are set e.g. in the WordPress template or by RankMath or other plugins). JavaScript of the lightbox recognizes that the URL contains an anchor (i.e. #-parameter) and loads the lightbox as an overlay over the current page. The meta tags, which provides other pages with a preview image of the page does not change. It remains statically as it was loaded on the WordPress page. Is there any way in PHP to determine if the lightbox is loaded with an image (# tag)? Unfortunately, there is no way to determine # tag parameters with PHP. A subsequent setting of the preview image is unfortunately not possible, because most pages fetches the image directly from the DOM object and JavaScript is loaded much later.

I'm thinking of the following scenario to solve the problem:

1. add function to header.php which determines if a lightbox overlay is loaded with an image and if so, what image id it has.
2. get matching URL based on the image id.
3. set appropriate <meta property="og:image" ...> in header.php

Is there any way to get this information from lightbox plugin? And the final question, would it work? Because I read about a caching mechanism why changing the preview image in meta property is not possible easily. So thinking out of the box - Is there another way to include the lightbox gallery in a page without using # tags, but real URLs which can be read with PHP? (I am not talking about the sharing option)

[arnowelzel]

In short: what you wan't is not possible.

There is no way to tell on the server side if an URL contains a # symbol, since everything after the # symbol will not be sent to the server at all - this is only used as an URL fragment inside the browser and can only be checked using JavaScript. Therefore header.php can not check if the URL will cause a lightbox to be opened.

However - instead of sharing URLs of the opened lightbox you can create your own script on the server side using PHP to build this meta data and also serve the image along with and then use this script in the backend settings for the sharing URL. This is what I already suggested earlier - please take your time to read my comments, thank you!