Global option: Images/videos use LightBox of Gutenslider or of 3rd party plugin

@abitofmind thanks for the feature request. I understand your wishes very much. I think what you are requesting is a very specific (though valuable) improvement of Gutenslider’s lightgallery functionality. I think a feature like must be implementend in javascript by page owners themselves.

I will not categorically say no to this feature but will postpone it a while and close this issue for now, as we are working on many other improvements:

• chunks / faster loading time (so also lightgallery would not be loaded when not activated in the slider and a custom solution can be written in js)
• better video integration (blocks and also youtube slides with working playback across all browsers)
• … many more to come in gutenslider 6 this year

Hi, thanks for your reply!

I) Thanks for stating your priorities. Of course I respect those!

II) Workaround to use 3rd party Lightbox plugin for images in Gutenslider will become somehow possible. You announced you will implement Lightbox should also work for empty slides containing image block or video block. Although manual labor intensive one can then:

1. Create Gutenslider
2. Add empty slide
3. Add image block into empty slide.
4. Set image block to link to its media file.
5. Duplicate the slide block holding the image block as often as you need it and then replace the image as needed (and possibly re-create the link to the (then changed) media file).

Of course it would be way more efficient to use Gutenslider’s media batch functions (add/remove with shift-clicking in media library) plus toggling one more centralized option.

III) Why a uniform Lightbox for all media in a pageflow is important

I want to make the case that my request serves not so much an “edge case” but is quite a common use case: Not all images within the flow of a post or page are necessarily wrapped within Sliders. Very often you will have a mix of: Single images, galleries, sliders.

Still with this media mix it is a reasonable UX requirement to offer a uniform LightBox to step through all media items of the pageflow. As an editor you still have opt-in control: Only linked images are picked up by lightbox plugins, is the usual convention. Hence purely decorative image material such as separators, background-images, etc, you do not link, hence they do not occur in the lightbox image series.

So either offer a possibility that Gutenslider’s own Lightbox can also open other images of the pageflow in its Lightbox (#5 in my original proposal ) or allow other 3rd party LightBox plugins to pickup media from Gutenslider blocks (#3 and #4).

If you don’t offer this, then UX fragmentation is unavoidable. If you want LightBoxes for single images and galleries too, you will need to use 2-3 different LightBoxes on your WordPress website ?? , and at best style them similar. Nevertheless the user will be puzzled: Even if they LOOK very similar, their FEEL will differ noticeable. Inconsistency == subconscious dissonance == Strong contributor to bad UX.

IV) Craziest workaround: Gutenslider wrapper for every image on WordPress website to get its LightBox site-wide: Gutenslider block with single slide which holds image, arrow buttons de-activated, LightBox ON. Very labor intensive. And does not support many layout needs, e.g. totally different dimension controls in comparison to native Gutenberg blocks. I really would like to avoid that route.

I really hope that a solution for this will come in the long run.

Courtesy notice: Set it to unresolved that you notice my reply.

• This reply was modified 1 year, 4 months ago by abitofmind.
• This reply was modified 1 year, 4 months ago by abitofmind.
• This reply was modified 1 year, 4 months ago by abitofmind.
• This reply was modified 1 year, 4 months ago by abitofmind.
• This reply was modified 1 year, 4 months ago by abitofmind.

True UX wise. I think then there should be a separate plugin for doing lightboxes for all images on the site (including those in Gutenslider). I will happily work together with you or other plugin authors to add required classes or other dom changes to slider images in order for them to be recognized by some other plugin.

And as I said, the next version will be offering chkunked js files for several features, also lightgallery. So gutenslider lightgallery code would not be loaded if it is disabled and does not negatively influence load times when using a side wide plugin for Gutenslider images.

Hi, glad to read the good news from you.

I have good news too: My proposal was written in general, but I had a concrete plugin in mind which already does LightBoxes site-wide in a perfect manner: The WordPress plugin Lightbox with PhotoSwipe by Arno Welzel which uses PhotoSwipe by Dmytro Semenov.

Only requirement for that plugin to pick up an image as a lightbox item: It must be linked to the underlying media file.

So not much work for Gutenslider to be compatible with that LightBox plugin (or others, which have the same minimal requirement):

• If the central Gutenslider preference “LightBox” is set to option °2 Enforce 3rd party LightBox by linking to Media File
• then Gutenslider wraps each <img> of a Gutenslide into an <a> element with a href pointing to the underlying image file (the src attribute of the img). That’s it. The 3rd party site-wide LightBox plugin will pick it up then.

If you would go further with the “convenience options” and also offer preference °4 “Offer 3rd party LightBox” then per Gutenslider block instance the corresponding option in the Inspector is:

?? 3rd party LightBox
Open images/videos of this slider with a 3rd party LightBox as centrally defined.

Do you have ideas about other lightbox plugins? Is there an option for LightBox to only pick images with a specific class?

We wrote on the same topic at the same time ??

Yes my solution is in the comment above! ??

No I mean other plugins apart from the one you stated.

I’ll look up my notes on that subject.

Answer: This is the only site-wide LightBox for WordPress my research had yielded. All other lightboxes I noted in my research were an extra option of gallery or slider plugins.

Further notes on Lightbox with PhotoSwipe

1) Has a lot of inclusion/exclusion options, see its screenshots → #1

a) Some of those you set in the plugin itself, such as:

• Excluded pages/posts
• Excluded post types

b) Other attributes which can be easily added/removed programmatically by the originating plugin (image block, gallery block, slider block, etc):

• Ignore links to images which contain a hash (#)
• Custom image order in LightBox which is not necessarily order in pageflow or source code by using the attribute tabindex (the origin plugin could set that accordingly)
• You can cluster images into LightBox groups programmatically by setting the data attribute data-lbwps-gid. So a series of one slider would use gid=1 the next slider gid=2, etc if you don’t want all images of the entire pageflow to be shown in one lightbox series, but in separate series (for storytelling/presentation reasons).

2) Further interesting topics regarding interplay of Lightbox with PhotoSwipe with other plugins:

• Works great but multiple galleries on a page are complicated

Gutenberg galleries don’t need data-lbwps-gid if you want to have them as a separate lightbox – they are supported using the backend option “Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes”. In this case Lightbox with PhotoSwipe adds a hook to the render_block filter of Gutenberg to add the required attributes to Gutenberg gallery images.

The attributes are only documented in case you want to show a group of images wich are not part of a gallery in their own collection and not as part of the global image collection built images on a page outside a gallery.

Unfortunately not every gallery provides hooks to add these attributes like Gutenberg or WordPress – however if one provides a pointer to the respective documentation for filter hooks to modify the gallery output (similar to the render_block filter in Gutenberg), I’m happy to add that as well.

• Exclude pictures of the plugin Photo Gallery by 10Web

In short: if you use a gallery which has it’s own lightbox, you can’t use Lightbox with PhotoSwipe at the same time.

Further ad-hoc research:
(only reading plugin description pages, no practical experience with it)

https://www.ads-software.com/plugins/tags/lightbox/ yields the following plugins (emphasis in the quotes are mine)

Easy Fancybox (300k installations)

[…] gives you a flexible and aesthetic light box solution for just about all media links on your website […]

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox […]

?? Mechanism: Linked image gets picked up.

Simple Lightbox (100k installations)

Automatically activate links (no manual coding required) […]

Supports WordPress?image attachment?links […]

?? Mechanism(s): Link to media file, link to media page (aka “image attachment link”)

FooBox Responsive Media Lightboxes (100k installations)

Within Gutenberg, FooBox lightbox will automatically add a modal popup to images and galleries that have the “Link To” setting set to “Media File”. […]

FooBox will automatically add modals to WordPress galleries, WordPress images with captions, and attachment images. […]

?? Mechanism(s): Link to media file, attachment images (very old WordPress mechanism)

Offtopic: Inline emojis are currently rendered as full width block elements, which makes some of my posts hardly readable at the moment. Hope this gets reverted in the coming days, until then I hope you still can read my posts somehow.

Have my examples about other site-wide LightBox plugins been helpful?

I think they showed: The common smallest denominator is that media linked to the underlying media file is considered for opening in the LightBox.

Are you willing to create a first MVP of this new feature? As written, I’?d test it’m offering to test it.

Hi,

I have served you all research regarding site-wide LightBox plugins, and by what mechanism they include/exclude images for opening.

I prefer the mechanism “Link to media file” which the majority of site wide Lightbox plugins support, and which I assume would be quite trivial to implement for your plugin too: In the HTML output just wrap an <a href="/path/to/media.png"></a> element around the IMG or VIDEO element. I personally would like to use it with Lightbox with PhotoSwipe.

I would appreciate a reaction whether you plan to support this. Thank you!

Looking into it again, is it still relevant to you?