Add gallery grouping options

Hey guys, I just added some documentation and included the easy workaround from #11 ✨ Add gallery grouping options Closed: won't fix ✌️

https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... →

Just upgraded a site to Drupal 10, and the PhotoSwipe modules works perfectly, so thanks for working on it :)

A "gallery per page" feature is the only thing missing ...

What are the steps required to make this work, apart from wrapping the images with the class "photoswipe-gallery" ( #11 ✨ Add gallery grouping options Closed: won't fix ) in Drupal 10?

Yeah, someone needs to implement this. The simple workaround for this is: Set the class "photoswipe-gallery" on a wrapper, who surrounds all pswp images you want to have inside the gallery. In most cases, we use the fences module to set this class.

If the script doesn't find a wrapper with this class (!$(this).parents('.photoswipe-gallery').length), it will add the wrapper around the image pswp link itself (photoswipe-gallery photoswipe-gallery--fallback-wrapper).

This is a very, very flexible solution, but yes, the UI is still not implemented.

I have wrapped images with that class using https://www.drupal.org/project/field_group → , but it does not seem to quite work ...

I think I figured out a workaround:

1. Create a Fieldset container with Field Group → , with "Extra CSS class" photoswipe-gallery
2. Wrap all image fields within the Fieldset
3. Update line 12 in js/photoswipe.init.js from .photoswipe-gallery to fieldset.photoswipe-gallery

Now, all the individual photoswipe-gallery classes for each image field are ignored, since the wrapping Fieldset container has higher specificity, and all images are treated as a single big gallery.

I wonder if making the gallerySelector variable configurable via the settings in /admin/config/media/photoswipe could be an acceptable workaround. You do as a user need to add the wrapping element yourself with Field Group (or another method).

@ressa yes, making that selector a setting seems a really good and flexible idea, I think. Not yet sure if we should do that at the formatter level or the global settings or both with override functionality (I'd tend to that).

But I don't totally understand why you had to:

In js/photoswipe.init.js, update .photoswipe-gallery to fieldset.photoswipe-gallery in line 12

Would it perhaps be enough to just use the most outer .photoswipe-gallery class?

Couldn't you just remove the other photoswipe-gallery classes and only keep the one on the fieldset?

Setting this active again based on the proposed solutions.

Sounds great @anybody, thanks for fast feedback.

Targeting the outermost photoswipe-gallery class would work better, and even make configuration not needed, I think. Because if you use Field Group to wrap a Fieldset with class photoswipe-gallery around the image fields, that should be enough, right?

I tried and ended up with this:

document.getElementsByClassName('photoswipe-gallery')[0]

... but I don't really know JavaScript, and it doesn't work (trying "get the first element with that class") ...

From the console, where it seems to work, and I get the desired outermost class:

document.getElementsByClassName('photoswipe-gallery')[0];
<fieldset class="photoswipe-gallery js-fo…rm-wrapper form-wrapper" data-once="photoswipe">

Without the [0] I get all instances:

document.getElementsByClassName('photoswipe-gallery');
HTMLCollection {
  0: fieldset.photoswipe-gallery.js-form-item.form-item.js-form-wrapper.form-wrapper,
  1: div.photoswipe-gallery.field.field--name-field-front-of -building.field--type-image.field--label-above,
  2: div.photoswipe-gallery.field.field--name-field-special-view-outside.field--type-image.field--label-above,
  3: div.photoswipe-gallery.field.field--name-field-interior.field--type-image.field--label-above,
  length: 4
}

Maybe someone with more JavaScript knowledge can figure this out? Or perhaps a more pure PhotoSwipe method should be used?

3.x is unsupported, what's the situation in 5.x? Can we close this outdated?

I can still use a grouping feature, so it's still relevant. Do you think a native solution, built into the module will be possible, or is your opinion the same as in August 2022?

[...] I think this can't work, setting this won't fix for that reason. Proof me wrong otherwise and I'll reopen this.

... or perhaps this has become more feasible in version 5?

After updating the photoswipe module from version (4.0.1 => 5.0.5) ( maj DB, new composer require, clean cache).
Clicking on the photos works again, but the gallery (arrows in photoswipe mode to go to the next photo in the group) no longer work on several websites.
It's strange, but I have the impression that the ‘.photoswipe-gallery’ is added to each photo displayed with the photoswipe formatter? so maybe the system sees each photo as a group of 1 photo (so no arrows).

@steveoriol Did you remove the field wrapper? The module adds the photoswipe-gallery class to the field wrappers attributes. The behaviour of wrapping each image in a photoswipe-gallery wrapper is the fallback if no outer photoswipe-gallery wrapper is present.

OK, but with this new version I can't see any goup option in the formatter settings or the phtoswipe settings page (/admin/config/media/photoswipe)?