[Feature Suggestion] Ability to show file name, and metadata along with the image

[joepangyw]

Ability to show file name in carousel, and metadata of image within the lightbox.

[silvia-odwyer]

@joepangyw Hi Joe,
Thanks for this feature request! Before I get started on adding this new feature, I'm just wondering where you'd like the file name to be placed in the lightbox. Also, could you let me know what image metadata would you like to be displayed?

[joepangyw]

@silvia-odwyer Hi

I have done up some mockups for your reference.

Metadata such as resolution, time captured, or even camera settings when the photo was taken.

[silvia-odwyer]

@joepangyw Hi Joe,
I've just added this feature to the library, you can enable the lightbox to show image metadata by setting the displayMetadata prop to true.

<SlideshowLightbox displayMetadata={true}>
...
</SlideshowLightbox>

It will then display the image filename in the sidebar; other details such as the resolution, time captured and camera settings will also be shown if these exist as part of the EXIF metadata.

Hopefully that helps, and let me know if you have any queries or would like any edits/updates.

[joepangyw]

Hi @silvia-odwyer,

I am unable to find this in this current library.

[silvia-odwyer]

@joepangyw I'll take a look into this to see what may be causing the issue. I'm just wondering if you're using React or Next.js?

[joepangyw]

@silvia-odwyer I'm using React with Tailwind

[silvia-odwyer]

@joepangyw Be sure to also pass an array to the images prop for the SlideshowLightbox component, which contains an array of images that you want to display. Here's an example:

let images = [
  {
    src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Paysage_de_Guin%C3%A9e_07.jpg',
    alt: 'Clouds in the sky',
  },
  {
    src: 'https://source.unsplash.com/rsAeSMzOX9Y/768x512',
    alt: 'Mechanical keyboard with white, pastel green and red keycaps.',
  },
  {
    src: 'https://source.unsplash.com/Z6SXt1v5tP8/768x512',
    alt: 'Mechanical keyboard with white, pastel pink, yellow and red keycaps.',
  },
]

Here's the JSX:

<SlideshowLightbox
    images={images} 
    displayMetadata={true}
    open={isOpen}
    onClose={() => {setIsOpen(false)}}
    showThumbnails={false}
>
...      
</SlideshowLightbox>

Here's what the first photo looks like with the metadata:

Hopefully that helps, and let me know if you have any queries.

[joepangyw]

@silvia-odwyer any idea why it's not working for me?

let images = [
    {
      src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Paysage_de_Guin%C3%A9e_07.jpg',
      alt: 'Clouds in the sky',
    },
    {
      src: '../../images/IMG_9580.jpg',
      alt: 'photo',
    },
    {
      src: '../../images/IMG_9634.jpg',
      alt: 'photo',
    },
    {
      src: '../../images/IMG_9643.jpg',
      alt: 'photo',
    },
    {
      src: '../../images/IMG_9694.jpg',
      alt: 'photo',
    },
    {
      src: '../../images/IMG_9665.jpg',
      alt: 'photo',
    },
  ]

<SlideshowLightbox
    className='grid grid-cols-4 gap-20 mx-auto'
    images={images}
    displayMetadata={true}
    showThumbnails={true}
    theme="day"
    modalClose="clickOutside"
    startingSlideIndex={0}
    slideshowInterval={4000}
/>

[silvia-odwyer]

@joepangyw I'm just wondering if you're using the latest version of lightbox.js-react? I've tried the JSX and code you've provided above for the first image and it is working for me. Is the first image working for you, if you remove the other images?

let images = [
    {
      src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Paysage_de_Guin%C3%A9e_07.jpg',
      alt: 'Clouds in the sky',
    }
  ]

If this works, but then you add the other images, and the metadata isn't displayed, then it may be related to the other images specified. I would need a full example with the links to all images in the array so that I can reproduce the issue. Thanks!

[joepangyw]

@silvia-odwyer

Got it to work, thanks!