Question

Is it possible to nest custom Liquid tags written in ruby if one class has multiple optional tokens passed in as parameters? This question is rather hard for me to describe without providing the relevant example. Please excuse me if this question appears to be too specific a use case.

Given the following ruby code, sourced from Octopress (a jekyll fork), which creates a custom Liquid tag to parse tags.

# Title: Simple Image tag for Jekyll
# Authors: Brandon Mathis http://brandonmathis.com
#          Felix Schäfer, Frederic Hemberger
# Description: Easily output images with optional class names, width, height, title and alt attributes
#
# Syntax {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | "title text" ["alt text"]] %}
#
# Examples:
# {% img /images/ninja.png Ninja Attack! %}
# {% img left half http://site.com/images/ninja.png Ninja Attack! %}
# {% img left half http://site.com/images/ninja.png 150 150 "Ninja Attack!" "Ninja in attack posture" %}
#
# Output:
# <img src="/images/ninja.png">
# <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">
#

module Jekyll

class ImageTag < Liquid::Tag
  @img = nil

  def initialize(tag_name, markup, tokens)
    attributes = ['class', 'src', 'width', 'height', 'title']

    if markup =~ /(?<class>\S.*\s+)?(?<src>(?:https?:\/\/|\/|\S+\/)\S+)(?:\s+(?<width>\d+))?(?:\s+(?<height>\d+))?(?<title>\s+.+)?/i
      @img = attributes.reduce({}) { |img, attr| img[attr] = $~[attr].strip if $~[attr]; img }
      if /(?:"|')(?<title>[^"']+)?(?:"|')\s+(?:"|')(?<alt>[^"']+)?(?:"|')/ =~ @img['title']
        @img['title']  = title
        @img['alt']    = alt
      else
        @img['alt']    = @img['title'].gsub!(/"/, '&#34;') if @img['title']
      end
      @img['class'].gsub!(/"/, '') if @img['class']
    end
    super
  end

  def render(context)
    if @img
      "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
    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)

What is the best way to create another custom tag for exhibiting the same functionality for the [<img>] element, but nested within a [<figure>] element and perhaps displaying the image alt description or an additional token as a [<figcaption>] element which could potentially include its own link? Or possibly even a series of class names for the element that say whether or not it should be centered or not.

In other words, I might want the output to be something like:

<figure class=center>
  <img src="/contra.jpg" alt="One of the greatest nintendo games of all time">
  <figcaption>Up Up Down Down Left Right Left Right B A B A <a href="http://www.youtube.com/contramoves/">Watch on Youtube</a></figcaption>
</figure>

Am I wrong to assume that it is possible to nest custom Liquid tags? I’m sure I could rewrite the existing code a second time and modify it slightly to handle the additional attribute for [<figcaption>], but this seems rather redundant and against DRY principles. And as it currently stands, I’m rather confused as to how I might account for a possible, additional token given that the existing class takes optional tokens itself.

Answer 1

What I needed to do was to create a Liquid Block, not a Liquid Tag. This solution allows one to nest other Liquid tags and even other Liquid blocks in theory, within the figure which is exactly what one would expect for a [<figure>] tag.

Since Markdown does not currently support HTML5, this Liquid based solution is a nice compromise.

 # Example:
 #
 # {% fig This is my caption! http://site.com/link.html Link Caption %}
 #   {% img center http://site.com/images/mylinks.png A collection of my favorite links %}
 # {% endfig %}
 #
 # Output:
 #
 # <figure class='center'>
 #    <img class="center" src="http://site.com/images/mylinks.png" title="A collection of my favorite links" >
 #    <figcaption>This is my caption!<a href='http://site.com/link.html'>Link Caption </a></figcaption>
 #</figure>
 #
 #

 module Jekyll

   class FigureTag < Liquid::Block
     include TemplateWrapper
     CaptionUrl = /(\S[\S\s]*)\s+(https?:\/\/\S+)\s+(.+)/i
     Caption = /(\S[\S\s]*)/
     def initialize(tag_name, markup, tokens)
       @title = nil
       @caption = nil
       if markup =~ CaptionUrl
         @caption = "\n\t\t<figcaption>#{$1}<a href='#{$2}'>#{$3}</a></figcaption>\n\t"
       elsif markup =~ Caption
         @caption = "\n\t\t<figcaption>#{$1}</figcaption>\n\t"
       end
       super
     end

     def render(context)
       output = super
       fig = super.join
       source = "\t<figure class='center'>\n\t\t"
       markdown = RDiscount.new(fig.lstrip).to_html[/<p>(.+)<\/p>/i]
       source += $1
       source += @caption if @caption
       source += "</figure>"
       source = safe_wrap(source)
       source
     end
   end
 end

 Liquid::Template.register_tag('fig', Jekyll::FigureTag)