Skip to content

Instantly share code, notes, and snippets.

@jadb
Created January 28, 2013 01:47
Show Gist options
  • Save jadb/4652161 to your computer and use it in GitHub Desktop.
Save jadb/4652161 to your computer and use it in GitHub Desktop.
Add `<figure>` and `<figcaption>` support to Octopress' Image Tag plugin. Use at your own risk as it hasn't been thoroughly tested yet. The CSS can be customized, I included the very basic one I used with the necessary tricks.
// http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
figure {
display: table;
width: 1px;
}
figure.center { margin: 0 auto 1.5em; }
figure.left { float: left; margin-right: 1.5em; }
figure.right { float: right; margin-left: 1.5em; }
// as per the comments on the previous link, when img's max-width is set to 100%, it breaks
// so, when on large screen, instead of using 100%, use the $max-width
@media screen and (min-width: 960px) {
figure {
img { max-width: $max-width; }
}
}
// Align figcaption.
figure > figcaption { text-align: center; }
diff --git a/plugins/image_tag.rb b/plugins/image_tag.rb
index 4567000..e6ea83b 100644
--- a/plugins/image_tag.rb
+++ b/plugins/image_tag.rb
@@ -15,6 +15,18 @@
# <img class="left half" src="http://site.com/images/ninja.png" title="Ninja Attack!" alt="Ninja Attack!">
# <img class="left half" src="http://site.com/images/ninja.png" width="150" height="150" title="Ninja Attack!" alt="Ninja in attack posture">
#
+# Syntax {% imgcap [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | "title text" ["alt text"]] %}
+#
+# Examples:
+# {% imgcap /images/ninja.png Ninja Attack! %}
+# {% imgcap left half http://site.com/images/ninja.png Ninja Attack! %}
+# {% imgcap left half http://site.com/images/ninja.png 150 150 "Ninja Attack!" "Ninja in attack posture" %}
+#
+# Output:
+# <figure><img src="/images/ninja.png"><figcaption></figcaption</figure>
+# <figure class="left half"><img src="http://site.com/images/ninja.png" title="Ninja Attack!" alt="Ninja Attack!"><figcaption>Ninja Attack!</figcaption></figure>
+# <figure class="left half"><img src="http://site.com/images/ninja.png" width="150" height="150" title="Ninja Attack!" alt="Ninja in attack posture"><figcaption>Ninja Attack!</figcaption></figure>
+#
module Jekyll
@@ -45,6 +57,26 @@ module Jekyll
end
end
end
+
+ class CaptionImageTag < ImageTag
+ @class = ''
+ def initialize(tag_name, markup, tokens)
+ super
+ end
+
+ def render(context)
+ if @img
+ if @img['class']
+ @class = @img['class']
+ @img.delete('class')
+ end
+ "<figure class='#{@class}'><img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}><figcaption>#{@img['title']}</figcaption></figure>"
+ else
+ "Error processing input, expected syntax: {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | \"title text\" [\"alt text\"]] %}"
+ end
+ end
+ end
end
Liquid::Template.register_tag('img', Jekyll::ImageTag)
+Liquid::Template.register_tag('imgcap', Jekyll::CaptionImageTag)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment