Octopress Plugin for Rendering MtG Cards
  • The year: 1994
  • The setting: Jr. College
  • The game: Magic the Gathering

In the geekdom days of my youth many a tests and homework assignments were cast to the wayside in honor of Magic the Gathering. I can remember going to the game shop on Monday afternoons with my Sears paycheck in hand ready to buy as many booster packs as I could, hoping for that one card that would allow me to dominate my competition.

At some point I realized that I couldn’t keep doing this and ended up selling all my cards for what I’m sure was a totally undervalued price to some kid destined to follow in my footsteps. The years went by and 19 years later I’m finding myself sucked right back in. This time, however, it is more about spending time with my oldest son. He’s 12 and our family has become quite an avid fan of all things Tabletop.

I’ve started blogging about our games and as I was pondering MtG articles I want to write in the future I realized I needed a good way of linking the cards I wanted to display in the post. Specifically, if I wanted to show a certain deck build or cards on my wish list. Wizard’s official MtG forums have a nice way of doing this with their forum code tags. I liked this approach so I decided to see if I could duplicate that for Octopress.

Disclaimer: I make no claims to be any kind of ruby developer. I threw this code together based on examples of other plugins included in Octopress as well as what I could find via Google. If you want to tear it apart, that’s fine. I can take it. Just be nice.

First, an example of what the end result is. Hover over the following links:

The technique is quite simple so creating a tag for Octopress was fairly straight forward after I learned the basic structure. Using the tag looks like this:

1
{% mtgcard Lyev Skyknight %}

To allow this to work, I created the following file In the plugins folder:

mtg_card.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module Jekyll

  class MtgCard < Liquid::Tag
    def initialize(tag_name, markup, tokens)
      args = markup.strip.split(/\s+/, 1)
      @card_name = args[0]
      @card_name_parts = args[0].split(/\s+/)
      @card_name_combine = "+"
      @card_name_parts.each_with_index do |name, idx|
        @card_name_combine += "[" + name + "]"
        if idx != @card_name_parts.length-1
          @card_name_combine += "+"
        end
      end
    end

    def render(context)
      output = "<a href='http://gatherer.wizards.com/Pages/Search/Default.aspx?name=#{@card_name_combine}' class='linkedCardName' target='_blank'>#{@card_name}"
      output += "<span class='linkCardHoverImage' style='display: none;'>"
      output += "<img src='http://gatherer.wizards.com/Handlers/Image.ashx?name=#{@card_name}&type=card'>"
      output += "</span></a>"
    end
  end
end

Liquid::Template.register_tag('mtgcard', Jekyll::MtgCard)

I added the following css

sass/custom/_styles.css
1
2
.linkedCardName { position: relative; }
.linkCardHoverImage { position: absolute; left: 150px; top: -155px; z-index: 200}

For the hover effect I added the following javascript:

source/includes/custom/head.html
1
2
3
4
5
6
7
8
9
10
11
12
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $(".linkedCardName").hover(function(){
          $(this).find('span').show();
      },
      function(){
          $(this).find('span').hide();
      }
  );
});
</script>

And that’s it! I have some ideas for taking this a step further but I’ll save that for another article if I can get around to it. I haven’t made the above code publicly available to just download but there is so little required, just copy it if you want to use it. Do whatever you want with it. The only thing I’d ask is a link back to my blog if you happen to use it and write about it.