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?