Using an image caption in Markdown Jekyll
Clash Royale CLAN TAG#URR8PPP
Using an image caption in Markdown Jekyll
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](http://link.com/image.jpg)
![name of the image](http://link.com/image.jpg)
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?
9 Answers
9
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
:
image.html
_includes
<table class="image">
<caption align="bottom"> include.description </caption>
<tr><td><img src=" include.url " alt=" include.description "/></td></tr>
</table>
(and obviously I am not a designer. You should probably use CSS instead of a table to make your image align properly)
And then display the image from your markdown with:
% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %
site_root
src=" site.url_root ...
Ah, right, that is a variable added in Octopress. I edited it out, so the sample code just uses a relative URL to the image.
– IQAndreas
Oct 15 '13 at 1:31
Jekyll now includes a
site.url
variable.– Roy Tinker
Nov 14 '14 at 0:22
site.url
A better markup would be:
<figure class="image"><img src=" include.url " alt=" include.description "><figcaption> include.description </figcaption></figure>
– edmundo
Aug 6 '15 at 1:24
<figure class="image"><img src=" include.url " alt=" include.description "><figcaption> include.description </figcaption></figure>
I need more information… it's possible to put more than one image without the need to repeat the
include image.html
? I'm trying with something like % for image in page.images %
but no success. Can you help me?– edmundo
Aug 6 '15 at 1:29
include image.html
% for image in page.images %
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.
caption
figcaption
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:
!(path_to_image)
*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:
em
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.
em
That's really cool! Thank you.
– bitmask
Jun 29 '15 at 20:59
Awesome! No need to memorize some stupid jekyll syntax :)
– Corstian Boerman
Jul 31 '15 at 12:32
I'm a big fan of this
– Alex Williams
Sep 10 '15 at 4:26
Nice answer! For anyone interested, the
+
sign is one of several combinators.– Grant Winney
Mar 22 '17 at 17:01
+
If you want to center the text, this may help:
img + em display: block; text-align: center;
– Grant Winney
Mar 22 '17 at 17:07
img + em display: block; text-align: center;
You can use table for this. It works fine.
| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) |
|:--:|
| *Space* |
Result:
This is a nice workaround for me. ;)
– Joshua Owoyemi
Oct 26 '17 at 3:29
don't use tables for semantic markup!
– mb21
Mar 10 at 15:05
If you're only adding the occasional caption and you want to use the more semantic <figure>
and <figcaption>
consider just adding that html into your markdown document:
<figure>
<figcaption>
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...
It's a lot simpler than messing with plugins and Markdown encourages embedding HTML, so it will display just fine.
It's too bad that this answer hasn't gotten any attention--I really think it's the simplest and most semantically correct. I'm particularly distressed by all the answers suggesting formatting using tables, which just wreaks of 1990s mayhem. ;-)
– sudo make install
Jul 19 '17 at 22:12
I agree. However it seems not to be supported by Bitbucket yet. A pitty.
– Boriel
Nov 2 '17 at 11:07
I like the clever and simple answer provided by @Andrew but I have to go with this one given that is explicit, makes use of the appropriate HTML tags, and doesn't require too much typing.
– Seanba
Sep 11 at 16:26
You can try to use pandoc
as your converter. Here's a jekyll plugin to implement this. Pandoc will be able to add a figure caption the same as your alt
attribute automatically.
pandoc
alt
But you have to push the compiled site because github doesn't allow plugins in Github pages for security.
Thanks. So markdown alone is not capable of creating captions?
– orschiro
Oct 13 '13 at 8:54
I believe it depends on the converter you use, however, markdown standard doesn't support adding captions.
– Chongxu Ren
Oct 13 '13 at 9:00
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:
![My image](/images/my-image.png)
:.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!
Andrew's @andrew-wei answer works great. You can also chain a few together, depending on what you are trying to do. This, for example, gets you an image with alt, title and caption with a line break and bold and italics in different parts of the caption:
img + br + strong margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px;
img + br + strong + em margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;
With the following <img>
markdown:
<img>
![description](https://img.jpg "description")
***Image:*** *description*
Here's the simplest (but not prettiest) solution: make a table around the whole thing. There are obviously scaling issues, and this is why I give my example with the HTML so that you can modify the image size easily. This worked for me.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
There are two semantically correct solutions to this question:
1. Using a plugin
I've tried a couple of plugins doing this and my favourite is jekyll-figure
.
jekyll-figure
jekyll-figure
One way to install jekyll-figure
is to add gem "jekyll-figure"
to your Gemfile in your plugins group.
jekyll-figure
gem "jekyll-figure"
Then run bundle install
from your terminal window.
bundle install
jekyll-figure
Simply wrap your markdown in % figure %
and % endfigure %
tags.
% figure %
% endfigure %
You caption goes in the opening % figure %
tag, and you can even style it with markdown!
% figure %
Example:
% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %
![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
% endfigure %
Now that your images and captions are semantically correct, you can apply CSS as you wish to:
figure
figure img
figcaption
2. Creating a custom include
You'll need to create an image.html
file in your _includes
folder, and include it using Liquid in Markdown.
image.html
_includes
Create the image.html
document in your _includes folder :
image.html
<!-- _includes/image.html -->
<figure>
% if include.url %
<a href=" include.url ">
% endif %
<img
% if include.srcabs %
src=" include.srcabs "
% else %
src=" site.baseurl /assets/images/ include.src "
% endif %
alt=" include.alt ">
% if include.url %
</a>
% endif %
% if include.caption %
<figcaption> include.caption </figcaption>
% endif %
</figure>
An image in /assets/images
with a caption:
/assets/images
This is [Jekyll](https://jekyllrb.com)'s logo :
% include image.html
src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%
An (external) image using an absolute URL: (change src=""
to srcabs=""
)
src=""
srcabs=""
This is [Jekyll](https://jekyllrb.com)'s logo :
% include image.html
srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%
A clickable image: (add url=""
argument)
url=""
This is [Jekyll](https://jekyllrb.com)'s logo :
% include image.html
src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
url="https://jekyllrb.com" <!-- destination url -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%
An image without a caption:
This is [Jekyll](https://jekyllrb.com)'s logo :
% include image.html
src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
alt="Jekyll's logo" <!-- alt text -->
%
Now that your images and captions are semantically correct, you can apply CSS as you wish to:
figure
figure img
figcaption
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
That is a great idea! However,
site_root
is not accepted as a valid variable. When rendered it ends up assrc=" site.url_root ...
.– orschiro
Oct 14 '13 at 19:48