Stopped working with external Lightbox
-
Hi,
The recent update broke compatibility with external Lightboxes. I am using Lightbox with PhotoSwipe and instead of opening the Lightbox the attached file is directly linked.
Thanks for your help.The page I need help with: [log in to see the link]
-
Hey @geoffreymerck 👋
The latest version of the Gallery is dynamic, which means that images are loaded at the same time as the Gallery script, rather than during page loading. This allows for better optimization. Most lightbox plugins only capture the content that is loaded at the beginning of the page, making them unsuitable for use with dynamic content. You can contact their support to inquire about how they handle such content. 😊
It seems someone already got in touch with them, see the author answer here.
As a side note, the SEO concerns raised in the linked topic above make sense to me….- This reply was modified 1 year, 1 month ago by geoffreymerck.
I am the maintainer of Lightbox with PhotoSwipe.
To make this more visible here – about issues with Lightbox with PhotoSwipe also see here:
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-with-meow-gallery/
Yes, the explanation by Val Meow is correct – my plugin needs to get the information which images will be linked in the frontend on the server side and will also add
data-lbwps-...
attributes to the content there.Usually this is done by parsing the HTML code of the final output before it goes to the browser and check for image links (only the links are relevant, not the thumbnails). And yes, all this is of course cached as well and you can also use Redis as backend cache. However other ways for providing this information would be possible as well – as long as Meow would provide a documented way for this, I could use that as well.
The structure of the
data-gallery-...
-attributes is not documented (at least I could not find any documentation). It is JSON and I could use that as well as a source for my frontend script if needed. However I don’t have time to manually adapt my code if the way how this option is used, ever changes.Also a backend filter would be helpful which is called when Meow creates the
img_tag
elements in the JSON provided indata-gallery-images
. Then I could use that filter to add additional output for the tag to be used.Whatever you decide, keep in mind: my plugin is open source (see https://github.com/arnowelzel/lightbox-photoswipe) and for free. I don’t ask for any money and I already spent time on this for analyzing the situation and to understand the way Meow gallery works. So if you would add additional ways to make Meow gallery more compatible with plugins like Lightbox with PhotoSwipe this will also be good for both of us – users of my plugin will continue to use your gallery and not get disappointed of compability issues and on the other hand users of Meow gallery will be happy when they can use PhotoSwipe as lightbox as well. But I won’t spend any time on this without any clear feedback by Meow that the developers are willing to support this in some way – thank you.
- This reply was modified 1 year, 1 month ago by Arno Welzel.
Yes I can’t believe they went from a clean SEO friendly compatible plugin to one that loads the images with Javascript. This is exactly the opposite of the reason I used Meow Gallery in the first place, I liked that all the images were listed in the html of the page and just styled with css. They would load even if javascript was off, they would even work with native lazyload with no extra scripts. I’ve removed Meow Gallery from my site and cancelled my membership. I’ve just got a regular wordpress gallery now with some custom css, so many users come to my site on mobile a single column of images is good enough anyway. I do miss the carousel.
- This reply was modified 1 year, 1 month ago by rsmith4321.
Hi @awelzel,
I’m trying to implement a strategy to reintroduce image tags. By doing so, we can then adjust the DOM positioning of images without modifying them. This ensures that lightboxes remain unaffected. 🙂 But this task takes time, as it’s a bit tricky to do with the new architecture, and I want to do it really perfectly.
Regarding infinite loading, the lightboxes won’t detect images loaded dynamically. Even though this issue wasn’t addressed in earlier Meow Gallery versions, I’m open to exploring a solution if you’d like to support this feature.
Could you clarify your mention of a “backend filter”? In another project, my AI Engine plugin, I’ve used a proprietary filter mechanism similar to WordPress filters. It’s custom and not generic. Alternatively, we could deploy a broadcast module that transmits actions, for example, { action: “images_loaded”, data: [10, 11, 12, 13, 14] }.
Looking forward to your thoughts.
@rsmith4321 would you mind sharing your CSS ? Did you find a safe way to convert all meow galleries to WP Galleries, It used to be easy before Gutenberg…
@tigroumeow There are other messages here that compatibility with other lightbox has been broken. When I first installed Meow Gallery a couple of years ago I liked the fact that it was not bloated, used the native WP Galelry tag and did not shove us its own lightbox.
I am running 3 websites that run Meow Gallery:
– a private blog for family and friends and
– a amateur radio club blog
– my own amateur radio blog
On the latter site I have a few posts which are howtos based on meow gallery. Google analytics shows that quite a lot of the visitors landed on the website through image search. Even if you and @awelzel find a way to make it work, there is still a serious SEO issue here.
While I do not care about SEO for the private blog, it is concerning for the other two blogs.
I know I have no Pro Account and yet I am asking for support. Considering the niche target audience of my website, I never considered going Meow pro. The few ads on the website do not even cover the hosting bill.Rs Smith. I do not think this is their fault but a product of fixing one thing breaking another. (I stopped using the plugin for unrelated reasons- I need video as well). But I have always found the team responsive and willing to make changes even after WordPress updates change things,
- This reply was modified 1 year, 1 month ago by tokyoprogressive.
Hi @tigroumeow, some thoughts about your ideas:
Infinite loading
This is not problem at all since my plugin already listens to DOM changes and will handle them. So image links can be added using JavaScript, but they have to contain certain mandatory attributes as explained in the next section. Also see the code here (for PhotoSwipe 5, but the version for PhotoSwipe 4 works the same way): https://github.com/arnowelzel/lightbox-photoswipe/blob/main/assets/ps5/frontend.js#L482-L498
Required attributes for Lightbox with PhotoSwipe
The frontend script of Lightbox with PhotoSwipe works as following: when the page is loaded, it will do an inital check for image links (only the links are relevant, not the visible thumbnails) which contain at least the following two data attributes:
- data-lbwps-width – width of the linked image (mandatory)
- data-lbwps-height – height of the linked image (mandatory)
Without these two attributes, an image link will be ignored, because PhotoSwipe needs to know the size of the image before it is opened (also see https://photoswipe.com/getting-started/).
Also see the code here: https://github.com/arnowelzel/lightbox-photoswipe/blob/main/assets/ps5/frontend.js#L126-L130
In addition, there is also a listener for DOM changes – so if you add or remove images to the DOM using JavaScript, these images will also be used, but only if the mandatory data attributes are present.
In addition Lightbox with PhotoSwipe also adds a number of optional attributes, depending on the available meta data for the images and the configured options in the backend:
- data-lbwps-srcsmall – URL of the smaller image version to be used for the opening transition (depending on the theme, will be automatically detected if present).
- data-lbwps-caption – Image caption, “caption” part
- data-lbwps-title – Image caption, “title” part
- data-lbwps-description – Image caption, “description” part
- data-lbwps-exif – EXIF info text as separate <span> elements
Possible backend filter for Meow gallery
I have to correct my assumption. Indeed Meow does not add image links to the generated JSON data. So forget about this. But another thing is interesting here. Meow gallery creates a DIV element like this:
<div class="mgl-root " data-gallery-options="...." data-gallery-images="..." data-atts="...." ></div>
The attribute
data-gallery-images
contains the information about the images which will be used to build the gallery as JSON. The interesting elements here arecaption
,meta
,image_meta
andattributes
– this is exactly the information my plugin could use.I could work on that – but this would mean that my plugin has to rely on the structure of the JSON in
data-gallery-images
. Aversion
element would help with this – so my plugin could first check if a version information is present and only try to use the JSON if it knows how to handle that specific version. The version would only change, if the structure of the JSON is updated. So we would start with version 1 for the current structure and only increase that to version 2 if the JSON changes and needs another way to handle it.However – a solution which still outputs
<a>
elements for the linked images in the document which is sent to the browser would be better, since the links will then also be visible for search engines and my plugin would just work as it is.Edit: it would also help, if each
<div class="mgl-root" ...>
element would have a unique ID and the generated images would refer to that like this:<a href="someoimage.jpg" data-mgl-root-id="ID of the DIV it came from">
This way it would be easier to find the JSON source for the image when the event handler is notified about clicking the link. Otherwise I would have to parse every
<DIV class"mgl-root" ...>
element to check if the image URL is mentioned in thedata-gallery-images
attribute. Yes, possible, but not very effective.- This reply was modified 1 year, 1 month ago by Arno Welzel.
- This reply was modified 1 year, 1 month ago by Arno Welzel.
Hi @awelzel,
Quick update; I didn’t have time to go through everything you shared with me, but I changed the way the Meow Gallery works and now the IMG elements are created in the DOM naturally, then moved dynamically in the right layout (without being modified). Therefore, it works with Photoswipe, and the attributes you add (data-lbwps) are also present.
About the attributes I have added, I feel like they are polluting the DOM. I have cleaned this in today’s new version, and will clean the gallery even further later (though it’s already quite light now).
Let’s see how it goes with this new Meow Gallery, and we can enhance everything from here 🙂
It’s too late for me, after hearing the gallery was now generated by Javascript and the I felt really poor initial response that you gave me, basically that it was the Photoswipe’s developers issue to get things working, and that I should just use your Lightbox (Which is really bad on iOS). I removed the plugin and won’t be reinstalling it. You should have said the above at the beginning. You can’t just go from a clean, compatible, html gallery to a Javascript generated gallery that breaks everything with just a simple version update and no warning. Just please don’t mess with PhotoEngine too much, I have been using that for probably 10 years and I need it for my site.
It’s too late for me, after hearing the gallery was now generated by Javascript and the I felt really poor initial response that you gave me, basically that it was the Photoswipe’s developers issue to get things working, and that I should just use your Lightbox (Which is really bad on iOS). I removed the plugin and won’t be reinstalling it. You should have said the above at the beginning. You can’t just go from a clean, compatible, html gallery to a Javascript generated gallery that breaks everything with just a simple version update and no warning. Just please don’t mess with PhotoEngine too much, I have been using that for probably 10 years and I need it for my site.
I believe the fact that you are annoyed and will never ever come back ever again was already clear enough 🙁 I am surprised by the sudden and somehow abrupt reaction after all the discussions we had over the past 10 years. You could have simply kept the last version you liked, and discuss the changes that you didn’t like in the latest ones, then give me some time.
I’ll continue to work hard and try to take the best decision for all my users. Let’s keep this thread about the compatibility with other lightboxes.@tigroumeow – thanks for the quick fix! Works as expected and I also updated the text on my demo page:
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-with-meow-gallery/
However, I did not see the gallery block any longer in Gutenberg, so I had to remove the post content and add it again. Maybe a glitch caused by the update to 5.0.3 you should verify.
Oh – and another thing: if one enables captions in a gallery block, the caption labels should not catch click events. There is a CSS rule for that you might add for the caption elements:
pointer-events: none;
However, I did not see the gallery block any longer in Gutenberg, so I had to remove the post content and add it again. Maybe a glitch caused by the update to 5.0.3 you should verify.
@awelzel Same here, deactivating the plugin and activating it again solved the issue.
@tigroumeow it is working again with Lightbox with Photoswipe! Thanks! i was fearing I have to edit about hundreds of galleries on my private family blog….
- The topic ‘Stopped working with external Lightbox’ is closed to new replies.