Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Theme for album catalogs - compact version

How to use this theme


This theme is installed on top of an existing album catalog and makes it possible to display it’s content in a browser. The catalog should contain a /album_catalog_index.json and /album_catalog_index.db file and a /solutions/ directory containing the zipped solutions and their media files.


You can add the website functionality to a catalog by running the following commands (Linux):

mkdir gatsby
cd gatsby
yarn init
yarn add gatsby react react-dom gatsby-theme-album-compact

Setup required files in the gatsby directory

You need to add a minimal version of your logo as PNG to /src/images/favicon.svg. This is used as the favicon in the browser. To change the icon on the website content header, copy your logo to /src/gatsby-theme-album/images/logo.png.

Next, create a markdown page in /pages/about.md and describe what this collection is about. Use this template:

layout: page
title: About
permalink: /about/

Add your about section here.

Then create a new file called /gatsby-config.js where you add this and adjust title and subtitle to your need:

module.exports = {
 siteMetadata: {
    title: 'MY ALBUM',
    subtitle: 'album catalog theme',
  plugins: [
      resolve: "gatsby-theme-album-compact",
      options: {},

That’s it, you can now run your gatsby site using

yarn gatsby develop

Optional adjustments

Adding more pages

Add new pages to /pages analogue to about.md and add them to the top menu by adjusting siteMetadata.menuLinks in gatsby-config.js.

© 2023 Gatsby, Inc.