CODEWITHSUNDEEP
reactjsgraphqlgraphql-jsgatsby
jkjmr6
jkjmr6

Reputation: 642

Get all images from specific directory via GraphQL and Gatsby JS

I have three folders with images that will be loaded in multiple carousel components. Here is the folder structure, I would get all the images that in the collection folders.

src/
   images/
     collection1/
     collection2/
     collection3/
     randomImage.jpg
     randomImage.svg
   components/
   pages/

I currently have this query:

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    heroFeaturedImage: imageSharp(id: { regex: "/war-room.jpg/" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            sizes(maxWidth: 1250, quality: 90) {
              src
              srcSet
              originalName
            }
          }
        }
      }
    }
  }
`;

Here is my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Get all images in directory test',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `collection1`,
        path: `${__dirname}/src/images/collection1`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Roboto\:300,400,500,600`, `Montserrat\:300,400,600,800`],
      },
    },
  ],
};

The issue with it is that returns ALL of the images in the project without a great way of organizing the specific images I want.

enter image description here

So how can I only get all of the images out of a specific directory (e.g. collection1)?

Upvotes: 2

Views: 3622

Answers (1)

serraosays
serraosays

Reputation: 7849

Couple things jump out at me, although I'm not sure if this solves it:

1) Kinda weird in gatsby-config.js you're calling gatsby-source-filesystem twice on what amounts to the same set of images. I think you could lose that call to the collection1 set, it's redundant as best I understand.

2) The allImageSharp query looks to be doing what it should, returning everything. Have you tried a query like:

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    collectionOneImages: imageSharp(id: { regex: "^\/collection1\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionTwoImages: imageSharp(id: { regex: "^\/collection2\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionThreeImages: imageSharp(id: { regex: "^\/collection3\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`;

I'm not the best with regex, but those regex queries essentially mean, "give me any file after the collection#".

Upvotes: 1

Related Questions