Thanks to Robert Anderson’sImage Caption tag, Octopress
blogs have had the option to add captions to images for some time. There were
some limitations I wanted to improve upon so I began hacking away,
and created a block version that allows Markdown formatting in the caption text.
In addition, I enhanced the treatment of alt tags and relative widths.
First, a quick demo of the original imgcap tag, the example from Robert
Anderson’s blog. Using syntax pretty much identical to the standard Octopress
img tag:
This leads to captioned images like the one to the left. It supports left,
right, and center image classes, and absolute sizing, making it fairly versatile.
One minor issue I had was the lack of separately specifiable alt text.
As a partially visually-impaired user, I’m sensitive to the needs readers who
rely on screen readers, and title text serves a different purpose from
alt text1.
So my first iteration was to study the built-in Octopress img tag and
incorporate its implementation of the alt tag into the imgcap tag. An example
use of the extended tag:
New Captions on the Block
OK, great, now imgcap has the alt text function of img, so I was happy.
But it still reuses the title (mouse-over) text for the caption. Since Liquid
tags can’t be split on multiple lines, longer captions lead to extraordinarily
long lines in the markdown sauce, and the caption text can’t be formatted.
So my next iteration involved studying Octopress’ built-in blocks (mostly the
block-quote and pull-quote blocks), and implementing imgcap as imgcaption.
Using the new block tag, a captioned image can be inserted as follows:
Now links, formatted text, and even raw HTML can be added to the image captions,
giving about as much versatility as I needed.
Size matters not. It’s All Relative
Unfortunately, in the original version large captions weren’t properly wrapped
to fit the image size; the shadow box expanded to fit the caption. Also, one
related limitation. The dimensions could only be expressed in absolute terms.
The solution to both requires slightly different HTML output, depending on
absolute or relative sizes are wanted for the image. For relative sizes, the
width needs to be defined for the outer shadow box span, with the inner
elements having a width of 100% to fill the shadow box, resulting in HTML
something like this:
Meanwhile, for absolute sizes, the inner elements need to be sized, and the
caption span needs to be adjusted for the margin sizes. This results in HTML
output like the following:
The Final Code
Title text adds flavor or contextual meta-information to an image which not contained within the image itself, while alt text provides the important contextual information within the image which is not contained in the surrounding text. ↩
Often times when writing Jekyll templates, we need to do some conditional
matching on certain blocks of text, returning one value in one instance, and
a different value in another instance. Many times only a small portion needs to
be changed, such as the name of a class, or inserting a default value when a
variable is nil.
Speak to anybody working in DevOps today, and Docker will be one of
the hot topics of interest. At its core, Docker is a modular, layered approach
to vitalization that runs on top of a host system’s kernel while keeping guest
processes and filesystems separated.
Now that I’m starting to blog more frequently1, I’ve found myself wanting to
link to common websites in my writing often. But looking up exact URLs and page
titles (because I’m a perfectionist and I want the link title to match the page
title) breaks me out of my writing pace. Having a common library of
Markdownreference-style links would speed up my writing,
reduce errors, and make me more likely to link where appropriate.
Though I haven’t kept the post-a-day rate I thought I could at the beginning of the month. ↩
So I whipped up this quick modification to Michael Rose’ HPSTR Theme
theme to add subtitles to pages and posts. Today I’m going through a brief
example of Jekyll’s Liquid syntax, and also touching on SCSS.
Vim comes built-in with a spell-checker as powerful as graphical text editors
like Sublime and Atom, but it isn’t enabled by default because it generally
isn’t handy when writing source code. It can be handy though when writing
documentation, blog posts, or other in markdown (or your favorite documentation
syntax).