Add styles

[mateBe95]

Hi, how to add own styles per image border for example... ;)?

[browniebroke]

Depends what you want to do, I guess:

• The Img component from gatsby-image has a customisable class name, if you want to style that directly:

  gatsby-image-gallery/gatsby-image-gallery/src/index.js

  Line 71 in f41d50b

  className={imgClass}

• If you to style the wrapper around each image, this is not supported at the moment, the wrapper component is almost fixed, you can only customise the margin:

  gatsby-image-gallery/gatsby-image-gallery/src/index.js

  Line 68 in f41d50b

  <ImgWrapper margin={gutter}>

  gatsby-image-gallery/gatsby-image-gallery/src/img-wrapper.js

  Lines 3 to 5 in f41d50b

  	const ImgWrapper = styled.div`
  	margin: ${(props) => props.margin};
  	`

Possible solution

To enable the second option, we could add an option to the Gallery component to either pass any component to use as wrapper (a) or some extra CSS that we could inject in the current component (b).

Implementation a:

Passing down a custom component. Example:

const ImgWrapper = styled.div`
  margin: 1rem;
  border-color: black;
  border-radius: 5px;
`

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

Implementation b

Passing down custom CSS. Example:

<Gallery images={images} imgWrapperStyles={{
	margin: '1rem',
	borderColor: 'black',
	borderRadius: '5px',
}}>

[mateBe95]

Seems implementation a to work well

[saintjcob]

Depends what you want to do, I guess:

• The Img component from gatsby-image has a customisable class name, if you want to style that directly:
  

  gatsby-image-gallery/gatsby-image-gallery/src/index.js

  Line 71 in f41d50b

  className={imgClass}

• If you to style the wrapper around each image, this is not supported at the moment, the wrapper component is almost fixed, you can only customise the margin:
  

  gatsby-image-gallery/gatsby-image-gallery/src/index.js

  Line 68 in f41d50b

  <ImgWrapper margin={gutter}>

  gatsby-image-gallery/gatsby-image-gallery/src/img-wrapper.js

  Lines 3 to 5 in f41d50b

  	const ImgWrapper = styled.div`
  	margin: ${(props) => props.margin};
  	`

Possible solution

To enable the second option, we could add an option to the Gallery component to either pass any component to use as wrapper (a) or some extra CSS that we could inject in the current component (b).

Implementation a:

Passing down a custom component. Example:

const ImgWrapper = styled.div`
  margin: 1rem;
  border-color: black;
  border-radius: 5px;
`

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

Implementation b

Passing down custom CSS. Example:

<Gallery images={images} imgWrapperStyles={{
	margin: '1rem',
	borderColor: 'black',
	borderRadius: '5px',
}}>

Hi,
it would be great if we could somehow style the wrapper as well. I would like to change the max-width and flex-basis, cause on mobile it looks quite small. Any plans for making it possible soon?

[github-actions]

🎉 This issue has been resolved in version 6.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀