Photoswipe 5: provide a download link

Thank you.

I avoided extra settings UI, and relied on PS module for that if exists:

// Both PS4 and PS5 have usable options, if any exists..
$options = $exists ? blazy()->config('options', 'photoswipe.settings') : [];

I thought defaults are decent and working, too.

There was a similar hook for BP customization:
https://git.drupalcode.org/project/blazy_photoswipe/-/blob/8.x-1.5/blazy...

hook_blazy_photoswipe_js_options_alter(array &$options)

Will that suffice?

BP 1.6 was just released due to breaking changes with earlier versions.

I just realized you were talking about UI options :)

Overriding lightbox options were as #2 from the start.

Registering UI options, applicable since 1.8:

  // The library weight must be lighter than blazy_photoswipe/load5, says -1.
  Drupal.blazyPhotoSwipe = Drupal.blazyPhotoSwipe || {};
  Drupal.blazyPhotoSwipe.ui = {};

  // Be sure to add keys starting from 0 for each UI options.
  // Only relevant for images, not youtube, adjust anything below.
  Drupal.blazyPhotoSwipe.ui[0] = {
    name: 'download-button',
    order: 8,
    isButton: true,
    tagName: 'a',

    // SVG with outline:
    html: {
      isCustomSVG: true,
      inner: '<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',
      outlineID: 'pswp__icn-download'
    },

    // Or provide full svg:
    // html: '<svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="pswp__icn"><path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" /></svg>',
    // Or provide any other markup:
    // html: '<i class="fa-solid fa-download"></i>'
    onInit: (el, pswp) => {
      el.setAttribute('download', '');
      el.setAttribute('target', '_blank');
      el.setAttribute('rel', 'noopener');

      pswp.on('change', () => {
        el.href = pswp.currSlide.data.src;
      });
    }
  };
  
  // Add more UI:
  // Drupal.blazyPhotoSwipe.ui[1] = {};

Untested:
To access lightbox object to add events, etc., this time likely a dependent on blazy_photoswipe/load5 to have heavier weight:
const lightbox = Drupal.blazyPhotoSwipe.beforeInit;

This can be improved later when we need one.

That will be all without full blown overrides.

Hi,

Thanks a lot @gausarts for the quick responses.

Comment 2: Thanks for pointing to the hook_alter, as there is no blazy_photoswipe.api.php file to document it, I missed it. Should it be documented in this issue or do you prefer that I create another one?

Comment 3: thanks a lot for the code snippet, so it requires JS and the customization entrypoint exist. Thanks! When needed I will try that.

Automatically closed - issue fixed for 2 weeks with no activity.