0
votes

I currently want to replace my Wordpress-Blog by a Jekyll-Blog. To do so, I have to find an alternative to WordPress caption tags:

[caption id="attachment_76716" align="aligncenter" width="500"]<a href="http://martin-thoma.com/wp-content/uploads/2013/11/WER-calculation.png"><img src="http://martin-thoma.com/wp-content/uploads/2013/11/WER-calculation.png" alt="WER calculation" width="500" height="494" class="size-full wp-image-76716" /></a> WER calculation[/caption]

I thought it would be nice, if I could use them like that in my posts:

{% caption align="aligncenter" width="500" alt="WER calculation" text="WER calculation" url="../images/2013/11/WER-calculation.png" %}

While it should get rendered to:

<div style="width: 510px" class="wp-caption aligncenter">
    <a href="../images/2013/11/WER-calculation.png">
        <img src="../images/2013/11/WER-calculation.png" alt="WER calculation" width="500" height="494" class="size-full">
    </a>
    <p class="wp-caption-text">WER calculation</p>
</div>

So I've written some python code that does the replacement (once) and I wanted to write a Ruby / Liquid / Jekyll plugin that does the rendering. But I don't know how to read

align="aligncenter" width="500" alt="WER calculation" text="WER calculation" url="../images/2013/11/WER-calculation.png"

into a ruby dictionary (they seem to be called "Hash"?).

Here is my plugin:

# Title: Caption tag
# Author: Martin Thoma, http://martin-thoma.com

module Jekyll
  class CaptionTag < Liquid::Tag

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

    def render(context)
        @hash = Hash.new
        @array = @text.split(" ")
        @array.each do |element|
            key, value = element.split("=")
            @hash[key] = value
        end
        #"#{@text} #{@tokens}"
        "<div style=\"width: #{@hash['width']}px\" class=\"#{@hash['alignment']}\">" +
        "<a href=\"../images/#{@hash['url']}\">" +
            "<img src=\"../images/#{@hash['url']}\" alt=\"#{@hash['text']}\" width=\"#{@hash['width']}\" height=\"#{@hash['height']}\" class=\"#{@hash['class']}\">" +
        "</a>" +
        "<p class=\"wp-caption-text\">#{@hash['text']}</p>" +
        "</div>"
    end
  end
end

Liquid::Template.register_tag('caption', Jekyll::CaptionTag)

In Python, I would use the CSV module and set delimiter to space and quotechar to ". But I'm new to Ruby.

I've just seen that Ruby also has a CSV-module. But it doesn't work, as the quoting isn't correct. So I need some html-parsing.

A Python solution

def parse(text):
    splitpoints = []

    # parse
    isOpen = False
    for i, char in enumerate(text):
        if char == '"':
            isOpen = not isOpen
        if char == " " and not isOpen:
            splitpoints.append(i)

    # build data structure
    dictionary = {}
    last = 0
    for i in splitpoints:
        key, value = text[last:i].split('=')
        last = i+1
        dictionary[key] = value[1:-1] # remove delimiter
    return dictionary

print(parse('align="aligncenter" width="500" alt="WER calculation" text="WER calculation" url="../images/2013/11/WER-calculation.png"'))
1
You can use Ruby's CSV class the same way. Or you can always write a proper parser. - nameless
I've added a solution that would do the expected in Python. But I'm new to Ruby, so could you please tell me how I do it in Ruby? - Martin Thoma

1 Answers

0
votes

If you set row separator to space, column separator to '=' and quote char to '"', you can easily parse your string into Hash with Ruby's CSV class:

require 'csv'

def parse_attrs(input)
  options = { col_sep: '=', row_sep: ' ', quote_char: '"' }
  csv = CSV.new input, options

  csv.each_with_object({}) do |row, attrs|
    attr, value = row
    value ||= true
    attrs[attr] = value
  end
end

Example:

irb(main):031:0> input = 'align="aligncenter" width="500" alt="WER calculation" text="WER calculation" url="../images/2013/11/WER-calculation.png" required'
=> "align=\"aligncenter\" width=\"500\" alt=\"WER calculation\" text=\"WER calculation\" url=\"../images/2013/11/WER-calculation.png\""
irb(main):032:0> parse_attrs input
=> {"align"=>"aligncenter", "width"=>"500", "alt"=>"WER calculation", "text"=>"WER calculation", "url"=>"../images/2013/11/WER-calculation.png"}