For those who rely on them, RSS feeds are the internet. If you’re a proud member of the RSS Addict community, you’re constantly looking for ways to improve the appearance of your posts in feed readers.

RSS readers apply a default stylesheet to the XML files they download, and it can be a challenge making things appear correctly across different platforms and applications. Scaling and styling image captions can be especially problematic.

Here’s an example of a non-optimized caption in Reeder:

See how the caption is indistinguishable from the body text? What we’d like is something closer to this:

As you can see, Reeder has rendered the caption in a smaller and lighter colored font. We can achieve that effect using <figure> and <figcaption>.

<figure> and <figcaption> are broadly supported HTML 5 elements that are useful for complementary items that enrich a body of text. We’re using them here for images, but as elements they’re applicable for anything you might need to feature in a scientific paper or other explanatory document.

A simple implementation looks like this:

<figure>
  <img src=“my-image.jpg” alt="My Image Caption"/>
  <figcaption>My Image Caption</figcaption>
</figure>

As HTML goes, that’s pretty elegant, but it takes a lot more typing than a standard Markdown image tag, which looks like this:

![My Image Caption](my-image.jpg "My Image Caption")

Let’s get creatively lazy. If your blog’s templating engine supports includes, you can make the whole process easier and cleaner. Includes are kind of like internal TextExpander snippets. Type something short and you get something longer when you’re done.

The following examples will work in Jekyll, but should be easy enough to port to any blog engine that supports similar include functionality.

Create a file called image.html in the _includes folder. Add the following code and save the file:

<figure class="image-figure">
  <img src=“{{ site.url }}/path/to/img/{{ include.file }}” alt="{{ include.caption }}"/>
  <figcaption>{{ include.caption }}</figcaption>
</figure>

Now you can insert an image by typing this in the body of your text:

{% include image.html file="my-image.jpg" caption="My Image Caption" %}

If you don’t want to commit to captions on all your images, you can add some conditionals:

<figure class="image-figure">
  <img src=“{{ site.url }}/path/to/img/{{ include.file }}” alt="{{ include.caption }}"/>
  {% if include.caption %}
    <figcaption>{{ include.caption }}</figcaption>
  {% endif $}
</figure>

Sometimes you may want to style some images differently from the rest using HTML classes. That way, with CSS you can make certain images smaller, larger, or align them on the right or left side of the text. It can also be helpful to add Markdown links to your captions so others can learn more about the images and their sources. Here’s how all that is done:

<figure class="image-figure {{ include.class }}">
  <img src=“{{ site.url }}/path/to/img/{{ include.file }}” alt="{{ include.caption | markdownify | strip_html }}"/>
  {% if include.caption %}
    <figcaption>
      {{ include.caption | markdownify }}
    </figcaption>
  {% endif $}
</figure>

You may notice a few additional tags after image.caption. markdownify translates Markdown to HTML. For the alt= attribute you can strip that HTML using liquid’s strip.html function to leave pure text without links.

Adding classes requires adding one more attribute to your include line as well:

{% include image.html file="my-image.jpg" caption="My Image Caption" class="my-class" %}

Fancybox is a beautiful shadowbox script. If you’re reading this at http://themindfulbit.com you can try it out by clicking on the images earlier in this post. Using Fancybox requires you to wrap the image in an <a> tag and apply a fancybox class. Doing that leaves you with this:

<figure class="image-figure {{ include.class }}">
  <a class="fancybox" href="{{ site.url }}/path/to/img/{{ include.file }}" >
    <img src=“{{ site.url }}/path/to/img/{{ include.file }}” alt="{{ include.caption | markdownify | strip_html }}"/>
  </a>
  {% if include.caption %}
    <figcaption>
      {{ include.caption | markdownify }}
    </figcaption>
  {% endif $}
</figure>

Note though, that since all that mess is tucked away inside the include, all you have to invoke in your Markdown file is that same single line:

{% include image.html file="my-image.jpg" caption="My Image Caption" class="my-class" %}

And while that may not be as simple as pure Markdown, it’s a heck of a lot more capable.