A jekyll plugin that allows you to define image galleries.
- Images accessible as static files
- Galleries accessible through site payload
- Images can have resized thumbs
- Galleries named after post accessible through post payload
- jekyll >= 2.0
- ImageMagick for resizing images
- RMagick
- Copy galleryGenerator.rb into your
_plugins
folder within your Jekyll project. - Create folder
_galleries
within your Jekyll project.
- Create a folder with a reference name for your gallery (e.g.
sample_gallery
) under the_galleries
folder. - Add images to the gallery under
_galleries/sample_gallery/
- Re-generate your site using
jekyll
Basic Usage
Each gallery is accessible through the site payload. So in the case of the gallery sample_gallery
to display the images in the gallery, use the following liquid template code.
{% for gallery_image in site.galleries['sample_gallery'] %}
<img src = "{{ gallery_image.path }}" />
{% endfor %}
Add gallery_thumbs
to your config file _config.yml
with an array of thumb sizes represented as two integers separated by anything other than integers.
gallery_thumbs:
- 150x150
- 200 by 200
- 100 50
- 50basicallyanything20
Make sure to re-generate your site using jekyll
Basic Usage
Each gallery image has an additional attribute thumbs
which is a hash of thumbnails generated for each image where the key is the thumb size as configured in your config file.
Continuing with the above example, you would display a thumb with size 150x150 with the following liquid template code.
{% for gallery_image in site.galleries['sample_gallery'] %}
<img src = "{{ gallery_image.thumbs['150x150'].path }}" />
{% endfor %}
If you name a gallery after a post (e.g. a post file 2014-06-01-Sample post.md
and gallery named 2014-06-01-Sample post
) then when in liquid where a post is post
then the gallery is accessible through post.gallery
in the same way the gallery is accessible through site.galleries['2014-06-01-Sample post']
For example here's an example of a liquid template referencing a post's gallery.
{% for gallery_image in post.gallery %}
<div class="col-lg-3">
<a class="fancybox" rel="{{ post.title }} {{ post.date | date: "%B %Y" }}" href="{{ gallery_image.path }}">
<img src="{{ gallery_image.thumbs['150x150'].path }}">
</a>
</div>
{% endfor %}
The more time I spend coding, the more I value the amazing efforts of others. I now first look to see if someone has done what I'm trying to do better before diving into my own implementation. In the end I didn't find other plugins satisfying the above requirements, but I was thoroughly inspired by two plugins.
- JekyllGalleryTag inspired my use of static files for my images and use of ImageMagick to resize images into thumbs.
- jekyll-postfiles helped me wrap my head around processing posts and associating things with them.
Copyright (c) 2014 David Helmer
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.