Effortless Image Albums for Jekyll
Jekyll Gallery Generator is a plugin for the Jekyll static site generator to streamline creating image albums and a gallery site. Gather images for an album into a directory and the gallery generator will create an album page for each directory.
So far Jekyll Gallery Generator requires Ruby, Jekyll, minimagick, jekyll-image-tag, and ImageMagick.
In an upcoming release it will likely require miniexiftool as well.
Once you have the dependencies installed Just put gallery_generator.rb
in the
_plugins
directory and album_index.html
image_page.html
in _layouts
(or
write your own templates). Put album.css
in your css
directory and import
it into your main CSS file (or, again, write your own CSS).
You'll need to include the following YAML snippet in your _config.yml
for
jekyll-image-tag to work, but don't actually need any further changes to
_config.yml
:
image:
output: generated
presets:
album_thumb:
width: 200
attr:
class: album-image
medium:
width: 1200
attr:
class: image
Finally, put directories full of images in a directory called "albums"
and
build your site!
There are three parts to using the gallery generator:
Your _config.py should specify album_dir: some_directory
. If it does not,
album_dir
defaults to "albums"
.
If your album_dir
is "albums"
then this structure:
.
|-albums
| |-Some Event
| | |-IMG_123.jpg
| | |-IMG_124.jpg
| |-Family
| |-album_info.yml
| |-Mom_and_Dad_Anniversary.jpg
| |-Morgan.jpg
| |-Terry_and_Leslie.jpg
will build a gallery with two albums: "Some Event" and "Family".
http://mysite.com/Some Event/index.html
will show two images: IMG_123.jpg
and IMG_124.jpg
. Similarly, http://mysite.com/Family/index.html
will show
three images: Morgan.jpg
, Terri_and_Leslie.jpg
, and
Mom_and_Dad_Anniversary.jpg
. The Family album has metadata about the album
that it reads from album_info.yml.
The data in album_info.yml is structured as a hash -- just like _config.yml -- and affects the behavior of your album. Possible metadata keys are:
page.description
in the album_index.html template.description: Lorem ipsum dolor hipster nonsense
sort: filename desc
hidden: false
Your album template must be named album_index.html
and should loop over
page.images
to actually place all the images on the page. page.images
is an
array of hashes; each has has two keys: rel_link
and source
. For example:
---
layout: default
page_type: album
---
<h2>{{ page.title }}</h2>
{% for image in page.images %}
<a href="https://github.com/kylemarsh/jekyll-gallery-generator/blob/master/{{ image.rel_link }}">{% image album_thumb {{ image.src }} %}</a>
{% endfor %}
Your image page template must be named image_page.html
. The page
variable
contains the following data:
If you want to list all available albums, make sure that your album template
includes page_type: albums
and then put this in your site's homepage (or
wherever you want the album list):
<ul>
{% for page in site.pages %}
{% if page.page_type == 'album' %}
{% if page.hidden %}{% continue %}{% endif %}
<li><a href="https://github.com/kylemarsh/jekyll-gallery-generator/blob/master/{{ page.url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
</ul>