Introduction
Octopress does a good job of generating a blog that scales nicely for large
computer screens and smaller devices (such as my iPad). However, it’s
possible to thwart Octopress’s best intentions, as I inadvertently managed to
do.
I occasionally post cartoons
to my blog, and the images tend to be large enough that they flow outside the
boundaries of the blog’s text area, which looks like crap. My first attempt
at solving the problem was to use CSS to set a minimum size for the text
region. That solution, however, ruins the blog layout for smaller devices,
such as a tablet.
There’s a straightforward solution to this problem, though.
The general idea is to display a smaller version of the image in the text
area; when a reader clicks on that image (or taps it, on the iPad), the
full size image appears in a modal popup. Many sites use this approach,
of course, including Facebook and Google+. Its popularity is part of its
appeal.
This solution can be implemented in a simple plugin, making it easy to drop
into individual blog articles.