As you can probably tell I use the Jekyll static site processing engine as the basis for this site. I switched to Jekyll only a few months ago when, after ignoring my site for some time, I wanted to add some content and discovered that my Drupal database had been broken into and all content deleted. This came on the back of years of continued Wordpress patching (or lack of patching followed by defacing of my site), and finally I’d had enough and felt a yearning for the good old days when sites were simple and didn’t need dynamic content or databases.
After some Googling I found Jekyll, which fit the bill perfectly and dead simple to create great-looking pages to boot.
But then came the day I wanted to add a photo gallery.
It turned out that was dead simple too, but was an interesting process. And from the research I did I think I approached it slightly differently (and I think - of course) with slightly better results than other sites I found describing how to do the same thing.
So without further ado:
Step 1. Define your data
Create a YAML data file describing your galleries in your jekyll _data directory.
Step 2. Add a galleries link to your navigation
Add an entry to
_data/navigation.yml directing to your galleries page (we’ll create it next).
Step 3. Create your galleries page
Create a new page wherever your galleries link was pointing - For me that was
/gallery/index.md. This page creates thumbnail links to each gallery, using a gallery image (randomised each time the site is re-generated).
Don’t worry about the CSS, we’ll deal with that later.
Step 4. Define a gallery layout
You’ll need a (mostly-blank) markdown page for each gallery, but first we’re going to define the layout template used to display a gallery.
_layouts/gallery.html using something like:
Step 5. Create your gallery pages
This step is trivial but, because Jekyll generates static pages, needs to be done. Create a new markdown page in your gallery’s
imagefolder for each gallery. My
gallery/gilli-diving.md, for example, is:
Step 6. Make it pretty
A few SASS niceties largely finish things off. I created a new file
_sass/extra.scss, importing it into `assets/css/main.scss’ with
Step 7. Add Lightbox support
I also added Lightbox support when I was initially building this, and then became extremely confused about why I had two Lightbox-like photo slideshows layered atop one another. It looks like Jekyll already comes bundled with Lightbox, making this unnecessary.
So there you have it. Done, and it looks like this.