Asset Gallery to GatsbyImage (Gatsby v3+)

🆘 Support
,
1

I have an asset gallery in my DatoCMS (only images) and would like to display them via GatsbyImage (from the new gatsby-plugin-image). However, as there are several images and not always the same amount of them in my blog posts, I need to write a loop (I guess?) but don’t know how to.

My post component:

export default function ProjectContent(props) {
	return (
		<div className="projectContent">
			<div className="projectContent__assets">
				<GatsbyImage image={props.imageGallery} />
			</div>
		</div>
	)
}

and the project template component:

export default function Project({ data }) {
	return (
		<>
	  		<ProjectContent 
	  			imageGallery={data.datoCmsProject.photos.gatsbyImageData}
	  		/>
		</>
	)
}

export const query = graphql`
query($slug: String!)
  {
	datoCmsProject(slug: { eq: $slug }) {
	  photos {
		  gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
	  }
	}
}`

At the moment, no image is shown. I’ve managed to get GatsbyImage + DatoCMS to work already with single images, but not with the asset gallery.

Thanks for any and all help!

2

Answered via Stackoverflow by Ferran Buireua:

I think are trying to do:

export default function Project({ data }) {

return (
    <>
        <ProjectContent 
            imageGallery={data.datoCmsProject.photos}
        />
    </>
 )
}

export const query = graphql`
query($slug: String!)
  {
    datoCmsProject(slug: { eq: $slug }) {
      photos {
          gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
      }
    }
}`

Note that you are sending the full array of photos ( data.datoCmsProject.photos ) to the child component.

And in the child component:

export default function ProjectContent(props) {
    return (
        <div className="projectContent">
            <div className="projectContent__assets">
                {props.imageGallery.map(photo=>{
                   return <GatsbyImage image={photo.gatsbyImageData} />
               })}
            </div>
        </div>
    )
}

It’s quite self-explanatory but in your case, photos (sent as imageGallery to the child component) is an array of images. Once you get it there ( props.imageGallery ) you only need to loop through them, as you said, and print them using the new <GatsbyImage> component. Each instance of the photo (the iterable variable) has the gatsbyImageData required.

2 Likes