Another picture gallery on Jekyll

Some days ago I have decided to add an extra section or category to this site. A I like photography (I am not a good photographer). And I do not want to maintain multiple sites for each interest I have. And because Jekyll is flexible enough to make with it almost anything you want, I have just added a new section. Photography, where you will find some pictures galleries of places and things I like to photograph.

I may not update the section too frequently, but I will try to post some of my best pictures. If you want, you can also subscribe to its own atom feed.

How the section works

As some of you know, this is not a dynamic site, it is static, and generated on my Laptop, and then uploaded to the server as a bunch of html, css, js, jpg and xml files. The new section is just another folder in the structure, with an index page in it.

The index page is like this:

---
layout: blog
title: Picture Gallery
category: pictures
description: "Amateur pictures taken in Bolivia"
---
{ % for post in site.posts %}      
  	{ % if post.categories contains 'pictures' %}
	    <div class="post">
		<ul>
			<li><a href="{{ post.url }}">{{ post.title | truncate:200 }} </a><small>{{ post.date }}</small>
				{ % if post.summary %}
					<p class="entry">{{ post.summary }}</p></li>
				{ % endif %}

		</ul>
  	      </div>

  { % endif %}
{ % endfor %}

(Remove the extra space between the opening curly bracket the the percentage sign for this to work)

That code will list all posts inside the _post folder which is inside the /pictures/ folder. So, you will only see the pictures posts.

Inside this same folder (pictures), I also have one folder per gallery with the pictures inside and another index page, that index page looks like this:

---
gallery: jpg
title: La Paz road to Yungas - Bolivia
description: "Photos -La Cumbre- going to Yungas in Bolivia"
layout: pages-overloaded
---
{ % for gallery_items in page.gallery_items %}
    <div class="gallery-image-wrapper">
        <a href="http://static2.garron.me/{{ gallery_items }}" rel="lightbox[1]"><img src="http://static2.garron.me/{{ gallery_items }}" /></a>
    </div>
{ % endfor %}

The gallery tag in the yaml front matter tells the gallery plugin to look in that given folder (where that index page is) and look for jpg files and create a matrix with all images and its urls. Which you can use as you can see in the example above. The plugin come from here and looks like this:

module Jekyll
  class Gallery < Generator
    safe true
 
    def generate site
      site.pages.each do |page|
        gallery(site, page) if page.data['gallery']
      end
    end
 
    def gallery site, page
      base = page.instance_variable_get :@dir
      search = File.join '**', "*.#{page.data['gallery']}"
      images = Dir.chdir(base[1..-1] || '.') do
        Dir.glob(search).sort.map {|image| File.join base, image}
      end
      page.data = page.data.deep_merge 'gallery_items' => images
    end
  end
end

There are other plugins more easy to use, but I like the flexibility this one gives me, I wanted to have a page presenting each gallery (the posts on picutures category) which then links to the gallery folder. In that folder there is an index file all pictures of the gallery, and jquery takes care of all the magic when you click on a picture of the gallery.

So, there is a new section in this site, hope yo like it.