Gatsby: How do you customize the array map to render a limited number of images? Gatsby v2

[MirelesCloud]

Summary

I'm still new to gatsby/react but was able to make the image gallery below work. However, I'm trying to figure out how to render only certain images from the src/images folder. Some of the images are used for other content (i.e. header image etc.) I thought by creating src/images/subfolder and moving the images I didn't want to be part of the gallery to the subfolder would solve this, but that hasn't worked. Alternatively, I've been attempting to create some sort of for-loop to limit the number of images being rendered, but haven't had any luck with that yet.

Relevant information

import React from 'react'
import { graphql } from 'gatsby'

const IndexPage = ({data}) => (
  <div>
    <div className="main-container mb-5">
      <Gallery images={data.allImageSharp.edges}/>
    </div>
  </div>
)

export default IndexPage

export const pageQuery = graphql`
  query imageQuery {
    allImageSharp {
      edges {
        node {
          fluid(maxWidth: 600) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

---

 import React from 'react'
 import Img from 'gatsby-image'

class Gallery extends React.Component {    
  render() {
    const { images } = this.props
    return (
      <div className="container-fluid bg-light standard-border">
        <div className="row">
          {images.map((img, idx) => (
            <div className="col-lg-3 col-md-4 col-xs-6" key={img.node.fluid.src}>
             <div  className="d-block mb-4 h-100 gallery">
                <Img fluid={img.node.fluid}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Gallery

Environment (if relevant)

Gatsby v2

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/opt/node@10/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 61.0.1
Safari: 12.0
npmPackages:
gatsby: ^2.0.0 => 2.0.0
gatsby-image: ^2.0.9 => 2.0.9
gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
gatsby-plugin-manifest: ^2.0.4 => 2.0.4
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.0.6 => 2.0.6
gatsby-plugin-typography: ^2.2.0 => 2.2.0
gatsby-source-filesystem: ^2.0.1 => 2.0.1
gatsby-transformer-remark: ^2.1.3 => 2.1.3
gatsby-transformer-sharp: ^2.1.2 => 2.1.2
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[eivindflobak]

Hi

You can do several queries at once and name them. For each query you specify a filter with absolutePath where you use regex to choose the correct folder.

I've edited your index.js:

import React from 'react'
import { graphql } from 'gatsby'
import Gallery from '../components/gallery'

const IndexPage = ({data}) => (


  <div>
      <Gallery images={data.cutecats.edges}/>
  </div>

)

export default IndexPage

export const pageQuery = graphql`
  query imageQuery {
    cutecats: allFile(
      filter: { absolutePath: {regex : "\/cutecats/"} }
    ) {
      edges {
        node {
          childImageSharp {
            fluid(maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
      funnydogs: allFile(
      filter: { absolutePath: {regex : "\/funnydogs/"} }
    ) {
      edges {
        node {
          childImageSharp {
            fluid(maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`    

Now you can access these images by using data.cutecats.edges on the line in IndexPage where you pass the GraphQL results to your Gallery component.

In the Gallery component I have done the following:

 import React from 'react'
 import Img from 'gatsby-image'

class Gallery extends React.Component {    
  render() {
    const { images } = this.props
    return (
      <div>
          {images.map((img, idx) => (

                <Img fluid={img.node.childImageSharp.fluid}/>

          ))}
      </div>
    );
  }
}

export default Gallery

This will result in an array of nodes only from the folder "cutecats".

This is how I've structured the folders and configured it in gatsby-config:

module.exports = {
  plugins: [
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,

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

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



  ],
};

From one beginner to another.. good luck with React and GatsbyJS! 👍

[MirelesCloud]

@eivindflobak thank you for this. It worked like a charm. I did get a warning for not having a "key" prop, but the project still built. I'll figure out how to get rid of that. Again, thanks for your help.