Blazy PhotoSwipe

Provides a simple Blazy PhotoSwipe integration.

Requirements

• Blazy (>=Blazy:2.18 including Blazy:3.x since BP:8.x-1.6+).
• PhotoSwipe, optional to avoid unfixable CS issues with PSWP 5 since BP:8.x-1.5+. Both library versions will just work with/ without it.

Versions

Specific for PhotoSwipe 5:

• Blazy (2.18+ || 3.x+).
• BP 1.6+ || 2.x supports only v5.4.1.
• BP 1.4+ supports only v5.3.7 (broken at some point due to breaking changes, as usual).
• BP 1.3 supports only v5.1.7.

"Only" means the only tested versions. Normally broken if mismatched. For cross-compatibility, be sure to name the library folder as photoswipe, not PhotoSwipe, if any issues.

Features

• Supports PhotoSwipe v4 and v5.1.7 since 1.3. Be sure to have the correct library, see PS4 to PS5 below.
• Vanilla JavaScript, no jQuery required.
• Has no formatter, instead integrated into "Media switcher" option of blazy-related contribs. This means PhotoSwipe will be available for free at Blazy, GridStack, Slick, Splide, Mason, and any blazy sub-modules which have field formatters, including Blazy Views fields for file ER and Media Entity. Either as Blazy static grids, Slick carousel single or multiple row grids, or GridStack dynamic grids.
• Supports swipeable Videos if Video Embed Media (Blazy 1.x) or core Media (Blazy 2.x+) is installed.
• Responsive image pan zoom is only available at PhotoSwipe library v5 and Blazy 2.3+ || 3.x+.

Installation

• Install the module as usual, more info can be found on:
  https://drupal.org/documentation/install/modules-themes/modules-8
• Enable Blazy PhotoSwipe module under "Blazy" package:
  /admin/modules#edit-modules-blazy

Usages

• Go to any "Manage display" page, e.g.:
  admin/structure/types/manage/page/display
• Find a Blazy, GridStack, Splide, Slick, or Mason formatter under "Manage display" for Image or Media fields.
• Choose "Image to photoswipe" under "Media switcher" option. Adjust anything else accordingly.
• Also available at Blazy Views fields under the same "Media switcher" option for File ER, or Media Entity, if using Blazy Views field.

How to change from PS4 to PS5, and vice versa

Repeat this every time changing library major versions.

• Change the library accordingly and manually at your libraries folder.
• Visit Blazy UI: /admin/config/media/blazy, and find PhotoSwipe under Extra settings.
• Must clear cache due to cached hook_alter, and or regenerate CSS and JS assets only if needed: /admin/config/development/performance.
• Ensure you can view the JS files in browsers manually, and press F5:
  • /libraries/photoswipe/dist/photoswipe.min.js?rblj1v
  • /modules/contrib/blazy_photoswipe/js/blazy.photoswipe.min.js?rblj1v
  • /modules/contrib/blazy_photoswipe/js/blazy.photoswipe5.min.js?rblj1v

  Change the token after "?" as per your install. Press CTRL/CMD + U for sure, and press End to reach them out.

• Ensure you see the correct library version at the top of the file: 4 or 5, only if changing them. By default, always 4.
• If you have file permission issues: 404 (not found) or 403 (forbidden), please fix it accordingly and manually at your server.
• Only if any issues, use Drupal UI to clear cache, if drush cr failed. Also press CTRL/CMD + R or F5 to clear/ refresh browser cache. Some browsers are stubborn due to caches.
• Disable BigPipe if any errors noticed with keyword BigPipe due to unwanted CSS and JS re-ordering issues. Should be no BigPipe issues since Blazy:3.0.9.