Gallery Tag for Octopress

While working on my post about finishing Robotrek, I found that I had taken a lot more screenshots than would fit nicely with the amount of copy I intended to write.

I hope to be done the just finished … article soon-ish …

Since I didn’t really want to discard any, I figured I’d just throw the execss screenshots into a carousel or gallery.

I found an excellent example, but it didn’t quite produce the results I was looking for.

I ended up forking the gist in order to implement a Gallery tag for Jekyll/Octopress that could work with the Galleria jQuery plugin.

Now I can build a gallery from my extra screenshots by simply adding

1
2
3
4
5
6
7
8
9
10
11
12
13
{% galleria %}
/images/robotrek/Robotrek_(USA).000.png
/images/robotrek/Robotrek_(USA).001.png
/images/robotrek/Robotrek_(USA).002.png
/images/robotrek/Robotrek_(USA).003.png
/images/robotrek/Robotrek_(USA).004.png
/images/robotrek/Robotrek_(USA).005.png
/images/robotrek/Robotrek_(USA).006.png
/images/robotrek/Robotrek_(USA).007.png
/images/robotrek/Robotrek_(USA).008.png
/images/robotrek/Robotrek_(USA).009.png
/images/robotrek/Robotrek_(USA).010.png
{% endgalleria %}

to my post, which will produce the following gallery:

I’ve included the gist below. If you want to download and install this yourself, just download the gist to /path/to/octopress/plugins.

# Title: Galleria Tag for Jekyll

Authors: Alex Bevilacqua

Description: incorporate the Galleria gallery jquery plugin

#

Adaption of "Photos tag for Jekyll" by Devin Weaver, and the derived

"Gallery Tag for Jekyll" by Kevin Brown.

#

Installation:

#

{% galleria_includes %}

#

This macro should be added to your source/_includes/custom/head.html

in order to load the libraries needed by Galleria

#

Example:

#

{% galleria %}

photo1.jpg

/path/to/photos/photo2.jpg:title

{% endgalleria %}

# module Jekyll

PLUGIN_GALLERIA_VERSION = "1.4.2" PLUGIN_JQUERY_VERSION = "2.1.1"

class PhotosUtil def initialize(context) @context = context end

def path_for(filename)
  filename = filename.strip
  prefix = (@context.environments.first['site']['photos_prefix'] unless filename =~ /^(?:\/|http)/i) || ""
  "#{prefix}#{filename}"
end

end

class GalleriaScriptIncludePatch < Liquid::Tag def render(context) return <<-eof <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/#{PLUGIN_JQUERY_VERSION}/jquery.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/galleria/#{PLUGIN_GALLERIA_VERSION}/galleria.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/galleria/#{PLUGIN_GALLERIA_VERSION}/themes/classic/galleria.classic.min.js" type="text/javascript"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/galleria/#{PLUGIN_GALLERIA_VERSION}/themes/classic/galleria.classic.min.css" media="screen, projection" rel="stylesheet" type="text/css" /> <style> / This rule is read by Galleria to define the gallery height: / #galleria{height:320px} </style> eof end end

class GalleriaTag < Liquid::Block def initialize(tag_name, markup, tokens) # No initializing needed super end

def render(context)
  # Convert the entire content array into one large string
  lines = super
  # split the text by newlines
  lines = lines.split(&quot;\n&quot;)

  p = PhotosUtil.new(context)
  gallery = &quot;&lt;div id=\&quot;galleria\&quot;&gt;&quot;

  lines.each_with_index do |line, i|
    next if line.empty?
    filename, title = line.split(&quot;:&quot;)
    title = (title.nil?) ? &quot;&quot; : title.strip
    gallery &lt;&lt; &quot;&lt;img src=\&quot;#{p.path_for(filename)}\&quot; data-title=\&quot;#{title}\&quot; /&gt;&quot;
  end
  gallery &lt;&lt; &quot;&lt;/div&gt;&quot;
  gallery &lt;&lt; &quot;&lt;script&gt;&quot;
  gallery &lt;&lt; &quot;  Galleria.configure(&#39;transition&#39;, &#39;fade&#39;);&quot;
  gallery &lt;&lt; &quot;  Galleria.run(&#39;#galleria&#39;);&quot;
  gallery &lt;&lt; &quot;&lt;/script&gt;&quot;
  gallery
end

end

end

Liquid::Template.register_tag('galleria', Jekyll::GalleriaTag) Liquid::Template.register_tag('galleria_includes', Jekyll::GalleriaScriptIncludePatch)

Comments