Jekyll Markdown, compiling images with paragraph tags

Question

This is just a simple problem but it's one that I can't find on Google to solve this. Basically what is happening is that I have a Jekyll website, and I'm using kramdown for the markdown compiling.

When I add an image to a markdown file like below:

![Image Alt Tag](path/to/image)

It will compile it with a <p> tag when I don't want it to as seen below.

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

This is how I would like the markdown file to compile with an image tag

<img src="path/to/image alt="Image Alt Tag" />

I am wondering where I'm going wrong or why Jekyll is compiling the images with paragraph tags.

Thanks in advance

---Edit: Tried another way but ended up with the same problem

I have tried this with only adding the html code which would be below:

<img src="path/to/image" alt="Image Alt Tag" />

and it would still compile with adding <p> tags as seen below.

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

I am wondering why the markdown file is still adding <p> tags to html code when it is not needed?

Retinue

some clues here #24456510 – Looby

Answer 1

Thanks to David Jacquel for putting me on the right path.

It seems that an image is an inline element and that if Markdown detects an image that is not inside a block element such as <figure></figure>, <div></div> or other similar block elements then it will apply a <p></p> tag to wrap around the image.

To see how Markdown compiles the document, I have found that Babelmark 2 is an useful resource and worth trying out to see if the markdown compiler that you are using is doing what you want it to do.

Here is an example of what I used Babelmark 2 to figure out after the pointing out by David Jacquel on this particular problem.

I hope this will help whoever has come across the same problem, and did not notice that it was an inline/block element issue.

Retinue

Did you ever figure out a way to include an image tag without the surrouding paragraph? – Longrange

Yes, by using block elements like <figure>, or a simple <div> would do to enclose the image. Otherwise Markdown will treat it as inline and include <p> tags then. – Retinue

Answer 2

This is a repost of my answer here, where I use a partial to cover all of a blog's image needs.

As other's have said, images are inline elements and Markdown parsers will force them to be wrapped in block level elements. The currently accepted answer is hacky: it looks messy in your markdown, is not robust/extensible, and is not easily modifiable. I use Middleman for my blog and created a partial for my images that does everything I could want an image to do. I assume/hope Jekyll has partials as well and that this answer, although varying from Jekyll in syntax, will still be relevant to you.

Note that I prefix my image links if they don't begin with "http://", "https:/" or "/". This is because I have a solid organizational structure for my blog's images, and makes it simpler when using this partial, I just need the image name and no other parts of its path.

Here is the partial:

partials/_image.erb

<%
#initialize local variables in case they were not included
caption ||= ""
alt ||= ""
classes ||= ""

#strip '.html' extension off article link to get name of folder
url = current_article.url
url_without_ext = url[0..url.length-6]

#determine if image has an exact link or belongs to "/images/blog/CURRENT_ARTICLE_NAME/"
prefix = src[0..6]
if prefix != "http://" and prefix != "https:/" and src[0] !="/" then
  #image belongs to "/images/blog/CURRENT_ARTICLE_NAME/" - add prefix to src
  src = "/images#{url_without_ext}/#{src}"
end
%>

<!-- Use Kramdown's 'nomarkdown' tag so that this figure is not wrapped in a 'p' tag in the blog pages that use this partial -->
{::nomarkdown}
<figure class="<%= classes %>">
  <!-- Show the image and link to the full resolution on click-->
  <a target="_blank" href="<%= src %>" >
    <img src="<%= src %>" alt="<%= alt %>">
  </a>

  <figcaption><%= caption %></figcaption>
</figure>
{:/}

And call this partial like so

No prefix will be added:

<%= partial "partials/image.erb", locals: {
    src: "/images/icons/tech/atom.svg",
    alt: "Atom",
    classes: "icon" } %>

Prefix will be added:

<%= partial "partials/image.erb", locals: {
    src: "my-lovely-dog.svg",
    alt: "Dog",
    caption: "Woof woof!",
    classes: "icon" } %>

I keep this partial up to date here (in case I add/edit any of it).

Maineetloire

Answer 3

Here is the solution I ended up using, based on this response to an issue on the Kramdown repo. (Kramdown is Jekyll's markdown parser):

In a directory _plugins create a file called e.g. kramdown-image-parsing.rb containing the following...

require 'kramdown/converter/html'

module StandaloneImages
  def convert_p(el, indent)
    return super unless el.children.size == 1 && (el.children.first.type == :img || (el.children.first.type == :html_element && el.children.first.value == "img"))
    convert(el.children.first, indent)
  end
end

Kramdown::Converter::Html.prepend StandaloneImages

Hey presto! It works.

Turgor

Answer 4

I obsevered the same behavior for images and other non-blocks elements.

Adding a css-class like handle-as-span would create an option to change the display property to inline via css.

{: .handle-as-span }
![Image Alt Tag](path/to/image)

The generated HTML

<p class="handle-as-span"><img src="path/to/image" alt="Image Alt Tag" /></p>

Here the CSS magic

p.handle-as-span {
  display: inline;
}

Fortdefrance