Gatsby Theme for album catalogs

How to use this theme

Prerequisites

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.

Installation

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

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

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',
    menuLinks:[
      {
         name:'About',
         link:'/about'
      },
      {
         name:'Catalog',
         link:'/catalog'
      },
    ]
  },
  plugins: [
    {
      resolve: "gatsby-theme-album",
      options: {},
    },
  ],
}

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

yarn gatsby develop

Optional adjustments

Change the content of the start page

Add a new file here: /src/gatsby-theme-album/components/home.js. This is the default content:

import React from "react"
import {Link} from "gatsby"

const Home = () => (
  <div>Welcome! Please visit the <Link to="/catalog">catalog</Link> to get an overview of our solutions deployed via album.</div>
)
export default Home

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.