nmasse-itix/photo-stream

Hugo theme for your photo albums, based on maxvoltar's photo-stream

Photo Stream

A theme to showcase your photo albums, powered by Hugo.

A live demo is available at hugo-photo-stream.netlify.app.

Features

This theme is basically a port of maxvoltar's photo-stream theme. Thanks to him for this nice creation!

This theme features:

• Lazy loading of photos (a photo is downloaded when it appears in the viewport)
• Albums containing photos
• Photos thumbnail are resized to fit 800x800
• The large version is resized to fit 2048x2048
• The background is filled with a tint matching the photo
• Keyboard shortcuts for previous / next / back to list

Installation

From the root of your Hugo site, type the following:

git submodule add https://github.com/nmasse-itix/photo-stream.git themes/photo-stream
git submodule init
git submodule update

Now you can get updates of this theme in the future by updating the submodule:

git submodule update --remote themes/photo-stream

Configuration

After installation, take a look at the exampleSite folder inside themes/photo-stream.

To get started, copy the config.toml file inside exampleSite to the root of your Hugo site:

cp themes/photo-stream/exampleSite/config.toml .

Now edit this file and add your own information. Note that some fields can be omitted.

How to create an album

The theme provides an archetype named album. Create a new album with the hugo new command.

hugo new my-album/index.md -k album

How to add photos

To add photos to an album, simply copy your JPEG files in the album directory, under content, NOT static!

cp path/to/DCIM_*.jpeg content/my-album/

How to customize an album

A minimal index.md looks like this:

---
date: "2016-01-01"
title: Animals
- src: '**.jpeg'
---

This index file defines an album with a date, a title and instructs to add all JPEG files to the album.

But a usual index.md would include more customization:

---
date: "2016-01-01"
title: Animals
sort_by: "Exif.Date"
resources:
- src: 'camel.jpeg'
  params:
    cover: true
- src: '**.jpeg'
- src: '**.jpg'
---

This index also specifies:

• To sort photos by date (specified in the EXIF metadata).
• To also include files with .jpg extension.
• To set camel.jpeg as the cover photo for the album.

Global configuration

The Date format for the album can be set in your config.toml.

[params]
album_date_format = "01/2006"

Check the Go documentation for possible formats: time.Format.

Demo Website

A live demo is available at hugo-photo-stream.netlify.app but you can have a look by yourself at the example site.

cd themes/photo-stream/exampleSite
./fetch-photos.sh
hugo serve

On netlify, you need to customize the build command and publish directory:

• Build command: cd exampleSite && ./fetch-photos.sh && hugo
• Publish directory: exampleSite/public

And add an environment variable to install a recent version of Hugo.

• HUGO_VERSION=0.68.3

photo-stream's Issues

Sort by file name with trailing number

Hi!

I am using this theme to present just one album as a home page. The content folder contains over 600 images with the file name ending in the desired sort order (ex. starting with name-0.jpg continuing beyond name-600.jpg, etc.) and one index.md file. With default sort of "Name" in the index.md file within the content folder, the first four images displayed are...

• name-0.jpg
• name-1.jpg
• name-10.jpg
• name-100.jpg
• etc

The desired sort order would be...

• name-0.jpg
• name-1.jpg
• name-2.jpg
• name-3.jpg
• etc

I'm in over my head. Any advice/starting point? From there, my next goal will be to sort them in a descending order.

Much appreciated,
Clay

How to use other picture formats

How to use other picture formats such as png gif？