Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby Theme Photography Portfolio

This is a gatsby theme with big image grid and a minimalistic interface, the whole UI stays out of the way unless opened by hamburger menu. Perfect for keeping the focus on the images.

Every image has its own fullscreen page and all images of a category can be flipped through quickly. Thanks to gatsby-plugin-sharp and gatsby-plugin-image the load times are are also very short.

If you want to categorize your images just put them in different folders.

Check out a live demo.

💎 Features

  • Swipe gesture support
  • Short loading times
  • Social media share images
  • Quick to navigate
  • Minimalistic unobtrusive UI
  • Background based on main color

🚀 Installation

For a new site

  1. Create a Gatsby site.

    To quickly create a new Gatsby page with the gatsb-theme-photography-portfolio you can use my starter.

    npx gatsby new gatsby-photography-portfolio https://github.com/AlexanderProd/gatsby-starter-photography-portfolio

For an existing site

If you already have a site you’d like to add the blog theme to, you can manually configure it.

  1. Install the photography portfolio theme

    npm install gatsby-theme-photography-portfolio
  2. Add the configuration to your gatsby-config.js file

    // gatsby-config.js
    module.exports = {
      plugins: [
          resolve: `gatsby-theme-photography-portfolio`,
          options: {
            // basePath defaults to `/`
            basePath: `/portfolio`,
  3. Add images

    Add images to your site by adding them to images directory in the root of your site. You can create categories by putting the images in subfolders.


Theme options

Key Default value Description
imagesPath images The directory where the images are stored.


Checkout my other open-source project JAMStackBox to continuously deploy your Gatsby site on your own server.

© 2023 Gatsby, Inc.