0

I am new to gatsby.js and working on some gatsby starter. Right I have this folder structure src/content/jobs/job1 where it has index.md and a featured picture with it. The way I import this picture is through this query

jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}

so that I can get all of the posts of every job folder under the /jobs/ path. And inside src/content/jobs/job1/index.md, it has this entry pic: './pic.jpg'. This is very limiting, since if I wanted to include more pictures for this post, I need to create a pic2: './pic2.jpg' entry inside the index.md and modify the query at the same time to be

```
jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
pic2 {  <----- new query for the newly added picture
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}
```

I been searching online looking for the solutions, and I came across this post: https://spectrum.chat/gatsby-js/general/gatsby-image-loop-through-and-display-them-dynamically-on-component-page~0d56c1bf-183b-494c-b61b-6957a2406192

However it doesn't address my problem since it targets a pre-defined folder as in

{
   resolve: `gatsby-source-filesystem`,
   options: {
     name: `logos`,
     path: `${__dirname}/images/logos`,
   },
}

but in my case I havesrc/content/jobs/job1,src/content/jobs/job2,src/content/jobs/job3 or even maybe src/content/jobs/job4\ which I can add it later. this solution only works for one specific folder.

1 Answer 1

2

Here is a class that gets you all images from a folder of images:

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import GatsbyImage from "gatsby-image";

/**
 * Uses GatsbyImage and GraphQL to return all images.
 * @see https://www.orangejellyfish.com/blog/a-comprehensive-guide-to-images-in-gatsby/
 */
const ImageSupplier = () => {

  // Don't forget to set the size of your image in
  // fluid(maxWidth: 300, quality: 100) {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(filter: {
        extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
        sourceInstanceName: {eq: "imageFolder"}}) 
      {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 300, quality: 100) {
              originalName
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }`);

  return ( allFile.edges );
};

export default ImageSupplier;

You must define a source instance in your gatsby-config.js:

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/src/components/image-folder`,
    name: "imageFolder",
  },
},

allFile.edges contains all the images in the folder. Use a map function to get all the images. This way you do not have to import manually.

You can test whether your query works in GraphiQL in the browser: http://localhost:8000/___graphql

query {
  allFile(filter: {
    extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
    sourceInstanceName: {eq: "imageFolder"}}) 
  {
    edges {
      node {
        childImageSharp {
          fluid(maxWidth: 280, quality: 100) {
          originalName
          }
        }
      }
    }
  }
}

This should show you all the images. If there are none you configured something incorrectly.

7
  • Hi. Thank you for your reply. However this didn't seem to be working. I suppose I need a folder called image-folder under src/components/ to hold the image files for this to be working. So I did that but the ImageSupplier returns an empty array.
    – Joji
    Aug 16, 2019 at 5:14
  • Did you put image files in there? Use GraphiQL in the browser to make sure the query works. Aug 16, 2019 at 5:31
  • yes I have a few images under src/components/image-folder. also, I assume this function only reads all the image from one pre-defined folder, what if I need to read from different folders?
    – Joji
    Aug 16, 2019 at 5:39
  • @Joji I added how you test for the images in the browser at the end of my answer. If you want to get images from multiple folders you have to specify each one in your gatsby-config.js. In your query you have to specify the sourceInstanceName of each of your folders. Don't forget to accept and upvote the answer when it worked. =) Aug 16, 2019 at 17:32
  • Hi your solution works and I have upvoted it. But sadly it is not suitable for my situation. I have edited my question to explain why.
    – Joji
    Aug 20, 2019 at 1:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.