Leesome?

Inspired by this Stack Overflow question–which I think is a totally legitimate question and should not have been closed, here is how I did something similar.

The problem

I needed a way to easily embed vimeo videos in posts. I wanted to use the vimeo video id to reference the video, and I wanted the top of my markdown files to look like this:

1
2
3
4
5
6
7

layout: post
title: "What a cool video "
date: 2012-09-02 21:35
comments: false
vimeo: 11122132
sharing: false
categories:

The video id (in the vimeo param)is used in vimeo’s generic embed code. Now came time to dig through the Octopress directory structure. It’s pretty complex, and tree is quite helpful for visualizing this. In the source directory, you have layouts and includes. layouts is mostly for page layouts made up of different components in the includes folder.

Once inside includes, I found it easiest to simply modify article.html. Best practices probably dictate going back and tweaking something with the layout, but I don’t know enough about Octopress and Ruby and was having tremendous difficulties with variable scoping (and also escaping Ruby control structures in a codeblock).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

snip
    \{\% if post.vimeo \%\}\
    <div class="entry-video">
      <iframe 
        src="http://player.vimeo.com/video/?byline=0&portrait=0&color=ffffff" 
        width="800" 
        height="600" 
        frameborder="0" 
        webkitAllowFullScreen 
        mozallowfullscreen 
        allowFullScreen>
      </iframe>
    </div>
    \{\%\ endif \%\}\
---snip---

And that’s a quick and easy hacky way to customize articles. I’m sure there’s a better way to do this, but this method is working for my needs right now.