Create an image gallery with Netlify CMS and Gatsby JS

Hi all, it is totally possible to create an image gallery with your custom stylings too!

Prerequisites:

Has NetlifyCMS and GatsbyJS setup
Knows how to style in Sass

Steps

In your /static/admin/config.yml file, you should have something like this:

  - name: gallery
    label: Gallery
    folder: gallery
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - { name: image, label: Image, widget: image }

Add a gallery.js file in /src/pages folder. Mine looks like this:

import React from "react"
import Link from "gatsby-link"
import Header from './header'
import './../css/style.css'
import '../fonts/fonts.css';
import { Container, Row, Col } from 'react-bootstrap';

export default ({ data }) => {
    return (
        <div>
            <Header/>
            <div className="content">
                <h1 className="main-title">
                    Gallery
                </h1>
                <Container>
                  <Row>
                  {data.allFile.edges.map(({ node }) => (
                    <Col sm={4} className="gallery-img">
                      <div key={node.childMarkdownRemark.id}>
                          <img src={node.childMarkdownRemark.frontmatter.image}></img>
                      </div>
                    </Col>
                  ))}
                  </Row>
                </Container>
            </div>
        </div>
    );
};

export const query = graphql`
    query galleryQuery {
      allFile(filter: {sourceInstanceName: {eq: "gallery"}}) {
        totalCount
        edges {
          node {
            childMarkdownRemark {
              id
              excerpt
              frontmatter {
                title
                image
              }
            }
          }
        }
      }
    }
`;

NOTE: allFile(filter: {sourceInstanceName: {eq: "gallery"}}) { this line is important, so that this gallery page will only get the gallery markdown files.

After you push your changes, in admin panel you should see a Gallery panel at the left when you click it it will show this:

Add your stylings, push your changes. Wait for the build, then check it in yoursite.netlify.com/gallery

Check mine out in https://faithmorante.netlify.com/gallery/

Cheers!

Comments