Home Documentation - Jekyll Chirpy and ImageGallery
Post
Cancel

Documentation - Jekyll Chirpy and ImageGallery

Jekyll with Chirpy theme Image Gallery process

Found an image gallery plugin I'm going to attempt to add into my Jekyll setup that uses the Chirpy theme. I have NO CLUE how to do this but hopefully with some help from iLude later, I'll be able to document that process below.

Hopefully others who have taken on the #100DaysofHomelab challenge and used TechnoTim's Meet Jekyll video to do their own blog will find this helpfull

More to Come…

Update

With the help of iLude, jacobs, projectdp and Thunderfoot from TechnoTim's i've managed to integrate ggreer's jekyll-gallery-generator into my jekyll-chirpy setup. To be honest, I was scarred but it was a rather painless process. Below are the steps we did to complete this.

Step 1

Install the jekyll-gallery-generator gem by adding the below to your Gemfile and running bundle.

1
2
# ggreer Image-Gallery-Generator 
gem 'jekyll-gallery-generator'

Install dependencies on Ubuntu

1
sudo apt-get install libmagickwand-dev

Install the Gem Package

1
bundle install

Create the Directory Structure within your site. This is in the root folder, photos
you will be able to access this directly via the following: http://websiteurl/folder
My example is below:

1
2
3
mkdir photos
mkdir photos/ImageDirectory1
mkdir photos/ImageDirectory2

Build/Run local instance of Jekyll

1
bundle exec jekyll s

This plugin reads several config options from _config.yml. The following options are supported (default settings are shown):
This information comes directly from ggreer’s jekyll-gallery-generator github.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
gallery:
  dir: photos               # Path to the gallery
  symlink: false            # false: copy images into _site. true: create symbolic links (saves disk space)
  title: "Photos"           # Title for gallery index page
  title_prefix: "Photos: "  # Title prefix for gallery pages. Gallery title = title_prefix + gallery_name
  sort_field: "date_time"   # How to sort galleries on the index page.
                            # Possible values are: title, date_time, best_image
  thumbnail_size:
    x: 400                  # max width of thumbnails (in pixels)
    y: 400                  # max height of thumbnails (in pixels)
  # The following options are for individual galleries.
  galleries:
    gallery_1: # Subfilder that is set via the above dir: photos option
      best_image: IMG_1068.JPG  # The image to show on the gallery index page. Defaults to the last image.
    gallery_2:
      best_image: IMG_0690.JPG
      name: "日本の旅"       # Defaults to directory name, replacing _ with spaces & capitalizing words.
    awesome_stuff:
      best_image: snaileo_gonzales.jpg
      sort_reverse: true    # Reverse sort images in gallery.
    secret_stuff:
      hidden: true          # Don't show this gallery on the index page. People must guess the URL.
    with_info:
      info:
        desc: "Gallery Description" # Info fields can be used in custom templates.
This post is licensed under CC BY 4.0 by the author.