Inserting Images In Markdown Jekyll Posts

18 Nov 2016 . category: tech . Comments
#jekyll #images #syntax #makrdown #yaml

Inserting images in markdown Jekyll posts

It’s often useful to add images in the body of a markdown document. While the featured image of a post or page can be specified in the YAML frontmatter, you can also call images directly within the markdown document.

This article outlines how to achieve this within Jekyll.

KRAMDOWN IMAGE SYNTAX

Insert the following into your .md document:

![image-title-here](/path/to/image.jpg){:class="img-responsive"}

The methodology for adding a class to the image took a bit of hunting.

Extra attributes (like the image class attribute) are added via span and block inline-attribute-list (IAL). As well as adding a class, you could specify image width and height.

Because the image is an inline (span level) element, the IAL needs to be on the same line. If you add it on the following line, it will wrap the image in a <p> tag and apply the class to that element.

Reference: Link

---