Downloading an image that was loaded via the Item content attribute

[mattbarnicle]

I've got a gallery of images, but i don't know the dimensions of the images in advance, and I also want to apply some custom styling to an image container that I'll be displaying each image in. So I used the Item content attribute instead of Item original. So far so good. But I also want to give the user the ability to download the image. So I enabled the download button via <Gallery withDownloadButton={ true }. The button shows up, but when you click on it, nothing happens. I assume because the pswp instance doesn't know about the image inside of my custom content component. How can I get the button to work? Maybe by subscribing to some pswp event and modifying the return payload? I looked through the events API docs and couldn't figure anything out from that. Any ideas?

[akhmadullin]

Yes, you're right.

Download button works only with images, that were rendered via photoswipe (<Item original="img.jpg" />).

Item's content prop was implemented to provide users with an opportunity to open in Photoswipe content, different from simple image - Google maps, for example. That's why download button works only with 'native' Photoswipe images.

I can assume, that you have some knowledge about which image is opened right now in Photoswipe via your custom component (let it be CustomImage component), that you pass to Item (<Item content={<CustomImage} />). If you have such knowledge, you can implement your own download button:

const customDownloadButton = {
  name: 'custom-download-button',
  ariaLabel: 'Download',
  order: 9,
  isButton: true,
  tagName: 'a',
  appendTo: 'bar',
  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-custom-download"/>',
    outlineID: 'pswp__icn-custom-download',
  },
  onInit: (el, pswpInstance) => {
    el.setAttribute('download', '')
    el.setAttribute('target', '_blank')
    el.setAttribute('rel', 'noopener')

    instance.on('change', () => {
      const customImageSrc = ... // here you need to set src of currently opened image

      const downloadButton = el as HTMLAnchorElement
      downloadButton.href = customImageSrc
    })
  },
};

<Gallery uiElements=[customDownloadButton]>
  <Item content={<CustomImage />} />
  ...
</Gallery>

[mattbarnicle]

thanks you so much! this (almost) worked. i had to make one change in order to get the currently opened image src to be set in the custom download button by replacing the change event with contentActivate (because i couldn't figure out how to get the currently active slide that way), but otherwise it worked pretty much as-is. here's the fully working code:

const GALLERY_PATH = '/static/images/gallery'

// example photo data, not what i actually used
const photos = [
  { src: 'photo-1.jpg' },
  { src: 'photo-2.jpg' },
  { src: 'photo-3.jpg', altText: 'Some special alt text for this photo' },
]

const PhotoGallery = ({ photos }) => {
  const customDownloadButton = {
    name: `custom-download-button`,
    ariaLabel: 'Download',
    order: 9,
    isButton: true,
    tagName: 'a',
    appendTo: 'bar',
    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-custom-download"
        />
      `,
      outlineID: `pswp__icn-custom-download`,
    },
    onInit: (downloadButtonEl, pswpInstance) => {
      downloadButtonEl.setAttribute('download', '')
      downloadButtonEl.setAttribute('target', '_blank')
      downloadButtonEl.setAttribute('rel', 'noopener')

      pswpInstance.on('contentActivate', ({ content }) => {
        downloadButtonEl.href = `${GALLERY_PATH}/${content.data.content.props.photo.src}`
      })
    },
  }

  return (
    <Gallery uiElements={[ customDownloadButton ]}>
      <ul className="row">
        { photos.map((photo, index) => (
          <GalleryItem key={ index }
            photo={ photo }
            altText={ `Photo ${index + 1}` }
          />
        ))}
      </ul>
    </Gallery>
  )
}

const GalleryItem = ({ photo, altText }) => (
  <li
    className="col-sm-6 col-md-4 col-lg-3"
    style={{ padding: '.25rem' }}
  >
    <Item content={ <GalleryItemPhoto photo={ photo } altText={ altText } /> }>
      { ({ ref, open }) => (
        <a href="#" onClick={ (e) => { e.preventDefault(); open(e); } } ref={ ref }>
          <img
            src={ `${GALLERY_PATH}/${photo.src}` }
            alt={ `${photo.altText || altText} thumbnail` }
          />
        </a>
      ) }
    </Item>
  </li>
)

const GalleryItemPhoto = ({ photo, altText }) => (
  <div className="gallery-item-photo-container">
    <img
      src={ `${GALLERY_PATH}/${photo.src}` }
      alt={ `${photo.altText || altText} full size` }
    />
    <style jsx>{`
      .gallery-item-photo-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      img {
        margin: auto;
        max-height: 100%;
      }
    `}</style>
  </div>
)

[akhmadullin]

great 🔥

glad to help 😌