Add Text to Gallery Per Image

[Elatardev]

Hello,

thanks for the awesome library, I'm wondering if it is possible to add text in any way at the Gallery list to every image displayed. The desired result is just like https://www.carriere-alla.fr/produits/, but for the gallery component. I checked the source and see how you did that, but it is the gallery that is needed by me

Thanks for your time.

[browniebroke]

It's not currently supported, no. However, there is another issue to add the ability to provide your own styles (#540) which would probably enable this type of things. You could get the image text next to each image and have your Image wrapper component use it.

To adapt the source from the example you linked to, one could write something along the lines of (I think):

const GalleryLinkWrapper = styled.div`
  position: relative;
  &:hover {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s;
    img {
      filter: brightness(50%);
    }
  }
`

const GalleryLabel = styled.span`
  font-weight: 900;
  font-size: 1.2em;
  color: white;
  position: absolute;
  z-index: 5;
  bottom: 0.5rem;
  left: 0.5rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
`

const ImgWrapper = ({title, children}) => (
  <GalleryLinkWrapper>
    {children}
    <GalleryLabel>{node.title}</GalleryLabel>
  </GalleryLinkWrapper>
)

<Gallery images={images} imgWrapper={ImgWrapper}>

Note: that is not supported, just a proposed API