githubmarkdownjekyll

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)

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?

Solution

  • 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." %}