I am hosting a Jekyll Blog on Github and write my posts with Markdown. When I am adding images, I do it the following way:
![name of the image]()
This then shows the image in the text.
However, how can I tell Markdown to add a caption which is presented below or above the image?
13 Answers
I know this is an old question but I thought I'd still share my method of adding image captions. You won't be able to use the caption or figcaption tags, but this would be a simple alternative without using any plugins.
In your markdown, you can wrap your caption with the emphasis tag and put it directly underneath the image without inserting a new line like so:
*image_caption*
This would generate the following HTML:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Then in your CSS you can style it using the following selector without interfering with other em tags on the page:
img + em { }
Note that you must not have a blank line between the image and the caption because that would instead generate:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
You can also use whatever tag you want other than em. Just make sure there is a tag, otherwise you won't be able to style it.
You can use table for this. It works fine.
| ![space-1.jpg]() |
|:--:|
| *Space* |
Result:
If you don't want to use any plugins (which means you can push it to GitHub directly without generating the site first), you can create a new file named image.html in _includes:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
And then display the image from your markdown with:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
The correct HTML to use for images with captions, is <figure> with <figcaption>.
There's no Markdown equivalent for this, so if you're only adding the occasional caption, I'd encourage you to just add that html into your Markdown document:
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<figure>
<img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
<figcaption>This is my caption text.</figcaption>
</figure>
Vestibulum eu vulputate magna...
The Markdown spec encourages you to embed HTML in cases like this, so it will display just fine. It's also a lot simpler than messing with plugins.
If you're trying to use other Markdown-y features (like tables, asterisks, etc) to produce captions, then you're just hacking around how Markdown was intended to be used.
A slight riff on the top voted answer that I found to be a little more explicit is to use the jekyll syntax for adding a class to something and then style it that way.
So in the post you would have:
{:.image-caption}
*The caption for my image*
And then in your CSS file you can do something like this:
.image-caption {
text-align: center;
font-size: .8rem;
color: light-grey;
Comes out looking good!
There are two semantically correct solutions to this question:
- Using a plugin
- Creating a custom include
1. Using a plugin
I've tried a couple of plugins doing this and my favourite is jekyll-figure.
1.1. Install jekyll-figure
One way to install jekyll-figure is to add gem "jekyll-figure" to your Gemfile in your plugins group.
Then run bundle install from your terminal window.
