0

I have the components below. For the images I would like to use gatsby-image and art-directing multiple images. The example at gatsby-image work with single images but how can I apply this to my components with multiple images?

Child Component:

const Cards = ({ className, items }) => {
  return (
    <section className={className}>
      <div className="grid">
        {items.map(item => {
          return (
            <div className="card">
              <img src={item.image} alt="" />
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
          )
        })}
      </div>
    </section>
  )
}

export default Cards

Page Component:

const IndexPage = () => (
  <Layout>
    <Cards items={cards} />
  </Layout>
)

const cards = [
  {
    title: 'Card One',
    desc: 'Description',
    image: require('../images/image.jpg'),
  },
  {
    title: 'Card Two',
    desc: 'Description',
    image: require('../images/image2.jpg'),
  },
  {
    title: 'Card Three',
    desc: 'Description',
    image: require('../images/image3.jpg'),
  },
]

export default IndexPage

Example from the gatsby-image documentation:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => {
  // Set up the array of image data and `media` keys.
  // You can have as many entries as you'd like.
  const sources = [
    data.mobileImage.childImageSharp.fluid,
    {
      ...data.desktopImage.childImageSharp.fluid,
      media: `(min-width: 768px)`,
    },
  ]

  return (
    <div>
      <h1>Hello art-directed gatsby-image</h1>
      <Img fluid={sources} />
    </div>
  )
}

export const query = graphql`
  query {
    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    desktopImage: file(
      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 2000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`
noxsta
  • 111
  • 1
  • 4
  • Hey @noxsta, If your images each has a unique dom node, you'll need a unique Gatsby Image component (for your case, one gatsby image for each of the card.) Art-directing is when you want to display different images at different screen sizes in the same dom node. If you're getting stuck at querying the images, look through the official docs or join gatsby.dev/discord for community help. – Derek Nguyen Nov 04 '19 at 17:21

1 Answers1

0

You need to use gatsby-transformer-remark and write markdown.

Here is the official tutorial. Also the gatsby-starter-blog uses gatsby-transformer-remark so it is worth to take a look.

Winston
  • 1,308
  • 5
  • 16
  • 34