Custom thumbnails on slides

[iFrogHop2Worlds]

Hi I am trying to change the thumbnails for slides and hoping someone can point me in the right direction. I want to use a text value or just an alternative image. Looked around and have tried a few things but I am stumped. I was thinking it would be convenient if you could set the smallest image in your src set to be used as a thumbnail by default or the closest image in the set to a thumbnails defined dimensions.

But back to the question; What would be the cleanest method to achieve this? Would you create a new module, use custom slides, or override values with a hook or something?

[igordanchenko]

The cleanest method to render custom thumbnail would be to use render.thumbnail render function.

<Lightbox
  render={{
    thumbnail: ({ slide, rect, render, imageFit }) => ...
  }}
  // ...
/>

https://yet-another-react-lightbox.com/plugins/thumbnails

Does this answer your question?

[igordanchenko]

The slide, rect, render, Imagefit are being passed in from lightBoxState?

• slide - slide object from the slides array
• rect - thumbnail rect (width x height)
• render - lightbox render prop
• imageFit - thumbnails plugin imageFit setting

[iFrogHop2Worlds]

Thank you that lays out very a clear path. Appreciate the fast responses. Loving the package too will be using this for many projects to come ^^

[iFrogHop2Worlds]

I was just trying this out now pretty sure I get how it's working but when I update the image it also updates it on the main window as well.
here is what I got now. I only want to change the thumbnails image value but the two seem to be bound.
using currentSlide here but got the same result using slide.

[igordanchenko]

That's not how it's supposed to work... Sorry. Your custom thumbnail render function is supposed to return your thumbnail markup, i.e. an image or whatever you want to render as a thumbnail. You shouldn't be modifying your slide objects inside the render function.

The most straightforward approach is to pass custom thumbnail image url as a separate slide prop.

import { Lightbox, ImageSlide, isImageSlide } from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";

import "yet-another-react-lightbox/styles.scss";
import "yet-another-react-lightbox/plugins/thumbnails.css";

declare module "yet-another-react-lightbox" {
  interface SlideImage {
    thumbnail?: string;
  }
}

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={[
          {
            src: "https://source.unsplash.com/ts1zXzsD7xc/1080x1620",
            thumbnail: "https://source.unsplash.com/F_r83HEzsXI/1080x1426",
          },
          {
            src: "https://source.unsplash.com/ts1zXzsD7xc/1080x1620",
          },
        ]}
        render={{
          thumbnail: ({ slide, rect, render, imageFit }) =>
            isImageSlide(slide) && slide.thumbnail ? (
              <ImageSlide slide={{ src: slide.thumbnail }} rect={rect} render={render} imageFit={imageFit} />
            ) : undefined,
        }}
        plugins={[Thumbnails]}
      />

      <button type="button" className="button" onClick={() => setOpen(true)}>
        Open Lightbox
      </button>
    </>
  );
}

[igordanchenko]

This worked beautifully. I am a little confused though when we say thumbnail: ({ slide, rect, render, imageFit }) => that reference to thumbnail needs to be thumbnail right but it is different then ImageSlide? Or I guess I mean to ask is ImageSlide the actual thumbnail component but whats the relation to the initial reference if any? If that makes any sense haha. Either way it's working perfect cheers m8

thumbnail: ({ slide, rect, render, imageFit }) => should return thumbnail markup (or undefined if you want to bail out and defer to the default rendering function). Typically you'd return <img> element (or whatever you want to display as a thumbnail).

ImageSlide is just an internal component that calculates image dimensions given current rect and imageFit settings, and renders an <img> element.