How can I build a gallery tag for Jekyll?

Question

I would like to use a gallery tag in Jekyll like this:

{% gallery columns="2" %}
    ../images/2013/12/image.png "This is one caption"
    ../images/2013/12/bli.png "Another caption"
    ../images/2014/01/bla.png
    ../images/2013/12/blup.png "The other one has no caption."
{% endgallery %}

which should give a gallery like this:

I've tried

module Jekyll
  class GalleryTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
      @tokens = tokens
    end

    def render(context)
        lines = @text.split("\n")
        lines.strip!
        rendered = '<ul class="gallery mw-gallery-traditional">'
        lines.each do |line|
            words = line.split(" ")
            words.strip!
            src, alt, *rest = words
            rendered += '<li class="gallerybox" style="width: 155px">'
            rendered += '<div style="width: 155px">'
            rendered += '<div class="thumb" style="width: 150px;">'
            rendered += '<div style="margin:21px auto;">'
            rendered += '<a href="'+src+'" class="image">'
            rendered += '<img src="'+src+'" alt="'+alt+'" width="120" height="108"/>'
            rendered += '</a>'
            rendered += '</div>'
            rendered += '</div>'
            rendered += '<div class="gallerytext">'+alt+'</div>'
            rendered += '</div>'
            rendered += '</li>'
        end
        rendered += "</div>"
        return rendered
    end
  end
end

Liquid::Template.register_tag('gallery', Jekyll::GalleryTag)

But it doesn't work:

Liquid Exception: Unknown tag 'endgallery' in _posts/2013-03-10-abc.md

How can I generate a gallery tag like this?

Answer 1

The current, most recent plugin with all sources is on GitHub. I will not update the following!

gallery_tag.rb

Create a file _plugins/gallery_tag.rb:

module Jekyll
  class GalleryTag < Liquid::Block
    def initialize(tag_name, markup, tokens)
        super
        @markup = markup
        @tokens = tokens
    end

    def parseAttributes()
        @markup
    end

    def render(context)
        rendered = '<ul class="gallery mw-gallery-traditional">'
        @nodelist.each do |node|
            lines = node.split("\n")
            lines.each do |line|
                if line.nil?
                    puts "Line was nil!"
                else
                    words = line.split(" ")
                    if words.count() >= 1
                        words.push("") # make sure this one has at least two elements
                        src, alt, *rest = words
                        rendered += '<li class="gallerybox" style="width: 155px">'
                        rendered += '<div style="width: 155px">'
                        rendered += '<div class="thumb" style="width: 150px;">'
                        rendered += '<div style="margin:21px auto;">'
                        rendered += '<a href="'+src+'" class="image">'
                        rendered += '<img src="'+src+'" alt="'+alt+'" width="120" height="108"/>'
                        rendered += '</a>'
                        rendered += '</div>'
                        rendered += '</div>'
                        rendered += '<div class="gallerytext">'+alt+'</div>'
                        rendered += '</div>'
                        rendered += '</li>'
                    end
                end
            end
        end
        rendered += "</div>"
        return rendered
    end
  end
end

Liquid::Template.register_tag('gallery', Jekyll::GalleryTag)

CSS

From de.wikipedia:

ul.gallery {
    margin: 2px;
    padding: 2px;
    display: block;
}

li.gallerybox {
    vertical-align: top;
    display: inline-block;
}

li.gallerybox div.thumb {
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin: 2px;
}

div.gallerytext {
    overflow: hidden;
    font-size: 94%;
    padding: 2px 4px;
    word-wrap:break-word;
}