@arshad/gatsby-theme-photo-core v1.1.6

Installation

Step 1: In the root of your Gatsby site, run the following command:

yarn add @arshad/gatsby-theme-photo-core

Step 2: Enable it in gatsby-config.js

// gatsby-config.js
...
  plugins: [
    `@arshad/gatsby-theme-photo-core`
  ]
...

Theme options

Example usage

// gatsby-config.js
...
  plugins: [
    {
      resolve: `@arshad/gatsby-theme-photo-core`,
      options: {
        basePath: `/photos`,
        photosPerPage: 10,
      }
    }
  ]
...

Data models

Photo

type Photo implements Node @dontInfer {
  id: ID!
  title: String!
  date: Date! @dateformat
  image: File @fileByRelativePath
  excerpt(pruneLength: Int = 150): String
  slug: String!
  body: String!
}

Example

Place your photos inside content/photos as follows:

site
  ├── content
  │   └── photos
  │       └── photo-1
  │           ├── photo.jpg
  │           └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

# site/content/photos/photo-1/index.mdx

---

title: Proident enim aliqua
date: 2019-10-11
excerpt: Consequat consectetur mollit commodo nisi reprehent velit aliqua quis nisi laborum.
image: ./photo.jpg

---

Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in.

Customization

Create the following components in your site to shadow and customize the core components:

src
└── @arshad
    └── gatsby-theme-photo-core
        └── components
            ├── photo-teaser.js
            ├── photo.js
            └── photos.js

To learn more about component shadowing, check out the official theme docs.

Support

Create an issue on the main repo @arshad/gatsby-themes.