Using an image caption in Markdown Jekyll

Question

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/ima

Answer 1

There are two semantically correct solutions to this question:

1. Using a plugin
2. 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.

1.2. Use jekyll-figure

Simply wrap your markdown in {% figure %} and {% endfigure %} tags.

You caption goes in the opening {% figure %} tag, 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 it

Now that your images and captions are semantically correct, you can apply CSS as you wish to:

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

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.

2.1. Create _includes/image.html

Create the image.html document in your _includes folder :

    {% if include.url %}
    
    {% endif %}
    
    {% if include.url %}
    
    {% endif %}
    {% if include.caption %}
        
{{ include.caption }}
    {% endif %}

2.2. In Markdown, include an image using Liquid

An image in /assets/images with a caption:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" 
    alt="Jekyll's logo" 
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" 
%}

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

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" 
    alt="Jekyll's logo" 
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" 
%}

A clickable image: (add url="" argument)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" 
    url="https://jekyllrb.com" 
    alt="Jekyll's logo" 
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" 
%}

An image without a caption:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" 
    alt="Jekyll's logo" 
%}

2.3. Style it

Now that your images and captions are semantically correct, you can apply CSS as you wish to:

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