Using Image Header in Markdown Jekyll

Question

I host Jekyll's blog on Github and write my posts with Markdown. When I add images, I do it as follows:

![name of the image](http://link.com/image.jpg)

Then the image in the text is displayed.

However, how can I tell Markdown to add the caption shown below or above the image?

Answer 1

If you don’t want to use any plugins (which means that you can send them directly to GitHub without first creating a site), you can create a new file called 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." %} 

Answer 2

I know this is an old question, but I thought I would continue to share my method of adding captions to images. You won’t be able to use caption or figcaption , but this will be a simple alternative without using any plugins.

In your markdown, you can wrap your heading with a highlight label and place it directly below the image without inserting a new line as follows:

 ![](path_to_image) *image_caption* 

This will create 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 should not have an empty line between the image and the caption, because instead it generates:

 <p> <img src="path_to_image" alt> </p> <p> <em>image_caption</em> </p> 

You can also use any tag you want except em . Just make sure there is a tag, otherwise you will not be able to style it.

Answer 3

You can use a table for this. It works great.

 | ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | |:--:| | *Space* | 

Result:

Answer 4

The correct HTML <figcaption> for <figcaption> images is <figure> with <figcaption> .

There is no markdown equivalent for this, so if you add only a random title, I would advise you to simply add this HTML to the 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 specification recommends that you embed HTML in such cases, so it will render very well. It is also much easier than messing with plugins.

If you are trying to use other Markdown-y functions (for example, tables, asterisks, etc.) to create signatures, then you simply understand how Markdown was intended to be used.

Answer 5

You can use pandoc as your converter. Here's the jekyll plugin for implementing this. Pandoc will be able to automatically add the caption of the shape, just like your alt attribute.

But you need to click the compiled site because github does not allow plugins on Github pages for security.

Answer 6

A little riff on top's voice response, which I find more explicit, is to use jekyll syntax to add a class to something, and then style it that way.

So, in the message you will 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; 

It turns out well!

Answer 7

Andrew @ andrew-wei answer works great. You can also combine multiple chains, depending on what you are trying to do. This, for example, gives you an image with alt, heading and heading with line break and bold and italics in different parts of the heading:

 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> :

 ![description](https://img.jpg "description") ***Image:*** *description* 

Answer 8

There are two semantically correct solutions to this issue:

1. Using the plugin
2. Create custom inclusion

1. Using the plugin

I tried a couple of plugins doing this and my favorite is jekyll-figure .

1.1. Install jekyll-figure

One way to install jekyll-figure is to add the gem "jekyll-figure" to your Gemfile in the plugin group.

Then run bundle install from your terminal window.

1.2. Use jekyll-figure

Just wrap your {% endfigure %} tags {% figure %} and {% endfigure %} .

The title goes in the opening tag {% figure %} , and you can even style it with markdown!

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 %} 

1.3. Style is

Now that your images and captions are semantically correct, you can apply CSS the way you want:

• figure (for image and caption)
• figure img (image only)
• figcaption (for signature only)

2. Creating a custom inclusion

You need to create an image.html file in the _includes folder, and enable it using the liquid in Markdown.

2.1. Create _includes / image.html

Create an image.html document in the _includes folder:

 <!-- _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> 

2.2. In Markdown, add an image using Liquid

Image in /assets/images with caption:

 This is [Jekyll](https://jekyllrb.com) logo : {% include image.html src="jekyll-logo.png" <!-- image filename (placed in /assets/images) --> alt="Jekyll logo" <!-- alt text --> caption="This is Jekyll logo, featuring Dr. Jekyll serum!" <!-- Caption --> %} 

(External) image using an absolute URL: (change src="" to srcabs="" )

 This is [Jekyll](https://jekyllrb.com) logo : {% include image.html srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file --> alt="Jekyll logo" <!-- alt text --> caption="This is Jekyll logo, featuring Dr. Jekyll serum!" <!-- Caption --> %} 

Clickable Image: (add url="" argument)

 This is [Jekyll](https://jekyllrb.com) 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 logo" <!-- alt text --> caption="This is Jekyll logo, featuring Dr. Jekyll serum!" <!-- Caption --> %} 

Image without signature:

 This is [Jekyll](https://jekyllrb.com) logo : {% include image.html src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file --> alt="Jekyll logo" <!-- alt text --> %} 

2.3. Style is

Now that your images and captions are semantically correct, you can apply CSS the way you want:

• figure (for image and caption)
• figure img (image only)
• figcaption (for signature only)

Answer 9

Here is the simplest (but not the most pleasant) solution: make a table around everything. There are obviously scaling issues, which is why I am giving my HTML example so that you can easily resize the image. It worked for me.

 | <img src="" alt="" style="width: 400px;"/> | | My Caption |