Building a Photo Gallery for a Gatsby Site

Introduction

Are you looking to add an interesting feature to your self-hosted tech blog? Adding a photo gallery can be a great way to showcase your photography skills or simply add visual interest to your site. When I decided to add a photo gallery to my Gatsby-based blog hosted on DigitalOcean, I thought it would be a fun and rewarding project. However, I encountered some challenges along the way that required me to find solutions. In this blog post, I’ll share my journey of finding a React-based lightbox package, storing high-resolution photos, and getting the images at build-time for Gatsby. By sharing my experience of building a Gatsby image gallery, I hope to provide helpful insights and tips for your own photo gallery project.

Finding a React-Based Lightbox Package

// ... imports

const GalleryIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const imageNodes = data.allFile.nodes.map(node => node.childImageSharp)
  const slides = imageNodes.map(node => {
    return { src: node.original.src }
  })
  const images = []
  images.push([])

  var imageRowIndex = 0

  for (var i = 0; i < imageNodes.length; i++) {
    if ((i + 1) % 3 === 0) {
      images.push([])
      imageRowIndex++
    }

    images[imageRowIndex].push(imageNodes[i])
  }

  const [index, setIndex] = useState(-1)

  return (
    <Layout location={location} title={siteTitle}>
      <Lightbox
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        slides={slides}
      />
      <div className="container">
        <div>
          <h1 className="title is-1 has-text-centered">Photo Gallery</h1>
          <p className="has-text-centered">
            {/* In the final version, there's a paragraph here. I've removed it for brevity. */}
          </p>
        </div>
        <hr />
        <div className="tile is-ancestor">
          <div className="tile is-vertical">
            {images.map((imageRow, index) => {
              return (
                <div className="tile is-parent" key={index}>
                  {imageRow.map((image, index) => {
                    return (
                      <div className="is-4 is-child p-2" key={index}>
                        <div
                          className="is-clickable"
                          onClick={event => setIndex(index)}
                          onKeyDown={event => setIndex(index)}
                          role="presentation"
                        >
                          <GatsbyImage alt="" image={getImage(image)} />
                        </div>
                      </div>
                    )
                  })}
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </Layout>
  )
}

{
  site {
    siteMetadata {
      title
    }
  }
  allFile(
    filter: {
      sourceInstanceName: { eq: "images" }
      relativeDirectory: { eq: "gallery" }
    }
    sort: { fields: name, order: ASC }
  ) {
    nodes {
      childImageSharp {
        gatsbyImageData(
          quality: 100
          webpOptions: { quality: 100 }
          jpgOptions: { progressive: true, quality: 100 }
          placeholder: BLURRED
        )
        original {
          src
        }
      }
    }
  }
}

Storing High-Resolution Photos for the Gatsby Image Gallery

What I ended up deciding on was using object storage for the high-resolution images. There are different object storage solutions out there (most famously Amazon S3), but I decided to use DigitalOcean’s Spaces because I already host the site there using App Platform.

Getting Images at Build-Time

While it would be possible to set up a custom solution to this problem, there are multiple plugins available for Gatsby which already offer a solution. Thankfully, Gatsby aggregates those plugins and displays them, with a search function, at the Gatsby Plugin Library. Searching for s3 shows multiple results, but I started at the top and worked my way down:

When it came to actually deciding on a plugin, I used the same criteria used to pick a lightbox package. The first plugin, gatsby-plugin-s3, doesn’t actually do what I was looking for. It’s a plugin used for deploying a Gatsby site to S3. The second option, gatsby-source-s3-image, seemed promising. However, it hasn’t been maintained for a long time and has no license. Next up was gatsby-source-s3-asset. Unfortunately, this project also hasn’t been maintained in years and is also missing a license. Even if the plugins worked, the missing licenses are problematic because as I understand it repos without licenses default to copyright protection (I’m not a lawyer, please don’t take this as legal advice).

After seeing those plugins not meet my requirements, I was somewhat concerned about actually being able to find a plugin. Fortunately, I looked at gatsby-source-s3 and found it to fit my needs perfectly.

NOTE: DigitalOcean has an article which covers using AWS SDKs with Spaces. I won’t be going into detail on that here.

The Final Product

Here’s what the code for gallery page looks like now:

// ... imports

const GalleryIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const imageNodes = data.allS3Object.nodes.map(
    node => node.localFile.childImageSharp
  )
  const slides = data.allS3Object.nodes.map(node => {
    const bodyMake = node.fields.exif.technical.bodyMake
    const bodyModel = node.fields.exif.technical.bodyModel
    const lensMake = node.fields.exif.technical.lensMake
    const lensModel = node.fields.exif.technical.lensModel

    return {
      src: node.localFile.childImageSharp.original.src,
      title: node.fields.exif.title,
      description: `Shot with a ${bodyMake} ${bodyModel} body and ${lensMake} ${lensModel} lens`,
    }
  })
  const images = []
  images.push([])

  var imageRowIndex = 0

  for (var i = 0; i < imageNodes.length; i++) {
    if ((i + 1) % 3 === 0) {
      images.push([])
      imageRowIndex++
    }

    imageNodes[i].nodeIndex = i

    images[imageRowIndex].push(imageNodes[i])
  }

  const [index, setIndex] = useState(-1)

  return (
    <Layout location={location} title={siteTitle}>
      <Lightbox
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        slides={slides}
        plugins={[Captions, Zoom]}
      />
      <div className="container">
        <div>
          <h1 className="title is-1 has-text-centered">Photo Gallery</h1>
          <p className="has-text-centered">
            {/* Paragraph removed for brevity. */}
          </p>
        </div>
        <hr />
        <div className="tile is-ancestor">
          <div className="tile is-vertical">
            {images.map((imageRow, index) => {
              return (
                <div className="tile is-parent" key={index}>
                  {imageRow.map((image, index) => {
                    return (
                      <div className="is-4 is-child p-2" key={index}>
                        <div
                          className="is-clickable"
                          onClick={event => setIndex(image.nodeIndex)}
                          onKeyDown={event => setIndex(image.nodeIndex)}
                          role="presentation"
                        >
                          <GatsbyImage
                            alt={slides[image.nodeIndex].title}
                            image={getImage(image)}
                          />
                        </div>
                      </div>
                    )
                  })}
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </Layout>
  )
}

Now, one might be wondering what the EXIF data parts I added are. After looking into plugins to work with images and object storage, I got an understanding of how to add nodes to the graph API. Unfortunately, I wasn’t really able to find a plugin which worked for me to get the EXIF data. I found this comment showing how to add EXIF data which was super helpful. Later down the thread, the commenter links to a plugin they published which solves the EXIF data problem. The plugin is called gatsby-plugin-sharp-exif. However, this plugin didn’t quite work for me because of conflicting Gatsby versions. I’m locked into version 4 because I’m currently hosting on App Platform, and the plugin only seems to work with Gatsby version 2 or version 5. What I ended up doing was writing my own custom node creator which piggybacks off of gatsby-source-s3 rather than gatsby-plugin-sharp because the image sharp data is available from the S3 object nodes. I decided to use a different structure to the one gatsby-plugin-sharp-exif uses which is better suited to populating the data I need on the page.

The approach I’m using now is to use the EXIF data for the images to populate the title and description for each image’s respective slide in the lightbox (and also populate the alt text for accessibility). I also fixed the bug I mentioned earlier by adding the nodeIndex property to image objects used to render the thumbnails on the page.

The updated GraphQL query for the page is as follows:

{
  site {
    siteMetadata {
      title
    }
  }
  allS3Object(sort: { fields: localFile___name, order: DESC }) {
    nodes {
      localFile {
        childImageSharp {
          gatsbyImageData(
            quality: 100
            jpgOptions: { progressive: true, quality: 100 }
            webpOptions: { quality: 100 }
            placeholder: BLURRED
          )
          original {
            src
          }
        }
      }
      fields {
        exif {
          title
          technical {
            bodyMake
            bodyModel
            lensMake
            lensModel
          }
        }
      }
    }
  }
}

Conclusion

Creating a Gatsby image gallery was a fun and rewarding project, but it was not without its challenges. Finding the right React-based lightbox package and object storage solution proved to be the most difficult hurdles, but with a little research and some trial and error, I was able to overcome them and create a Gatsby gallery I am proud of.

In the end, I learned that evaluating and selecting the right tools and solutions for a project is key to its success. By considering criteria such as ease of use, customizability, performance, compatibility, community support, and license, I was able to make informed decisions and ultimately achieve my desired outcome.

I hope that my experience can be helpful to others who may be embarking on a similar project. With the right tools and a bit of perseverance, creating a photo gallery can be a fun and rewarding addition to any website. By embarking on little projects like this, many doors open up. One may even find an opportunity to contribute to an open source project along the way.

If you’re interested in seeing the final results of this project live, you can visit my photo gallery at https://logarithmicspirals.com/gallery.