Caption Contest
A brief guide to adding image captions to Jekyll blog posts.
To add an image to a Markdown post, you write something like this:
The text is added as the alt-text for the image. This is okay, but I want to add text that is readily visible to my images.
I previously was doing this very hackily using JavaScript, to strip the alt-text out and add it below the image. This unnecessarily wastes cpu cycles and adds complexity to the page. Plus it won’t work if the user has JavaScript disabled!
I’ve now moved on to a solution like this:
*Text Here*
This inserts a <em> tag directly after the <img> tag, but within the same <p> tag. (Be careful not to insert a newline between the image and the em, as that will put them in different <p> tags). I then style this with css, like this:
img + em {
display: block;
text-align: center;
}
This is a really nice script-free solution to a problem I had.
The following code produces the image at the bottom
*This image has a caption!*
This image has a caption!
P.S. I'm late to the party, but I recently got a twitter account that you can follow here.