Do not wrap img in paragraph

[lu-zero]

Wrapping images in paragraphs is normally less than ideal and short of falling down to html is not possible to use it in kramdown.

[gettalong]

This is a good idea but it will have to wait for the 2.0.0 release so that existing documents created for 1.x are not affected.

[pathawks]

👍

[Vaguery]

👍

Actually the HTML standards specify that the img tag is neither a block nor an inline element, but one of a very few "replaced inline elements". That is, it should act as if it were (as one site I've now lost track of says), "a single big character when it comes to wrapping and layout".

Whoever decided up the chain somewhere to automatically wrap them in either <div> or <p> made a mistake, at least as far as the standards are concerned.

If I want an img wrapped in paragraph markup, I'm comfortable putting newlines around it. If I don't want it in paragraph or div markup, then I have to write pure HTML in my markdown document to get it to work correctly.

[mehdisadeghi]

I have a problem which is related to this topic. I use Jekyll with kramdown and I want to center my blog post images. I see that kramdown generates p tag and according to this topic I see you are going either to remove it or change it. I need to somehow define styles for this p or div tag to be able to set for example textalign:center for this paragraph to make the image to be displayed in center.

Could you please share your thoughts on this matter to see if I can finally find a solution to image centering with Kramdown? I look for any means of customization in kramdown, to assing an id or class to the generated tags.

[lu-zero]

use the {: .center} IAL and add the css required.

On Fri, Dec 19, 2014 at 12:30 PM, Mehdi Sadeghi notifications@github.com
wrote:

I have a problem which is related to this topic. I use Jekyll with
kramdown and I want to center my blog post images. I see that kramdown
generates p tag and according to this topic I see you are going either to
remove it or change it. I need to somehow define styles for this p or
div tag to be able to set for example textalign:center for this paragraph
to make the image to be displayed in center.

Could you please share your thoughts on this matter to see if I can
finally find a solution to image centering with Kramdown?

—
Reply to this email directly or view it on GitHub
#98 (comment).

[mehdisadeghi]

@lu-zero Thanks a lot! I think it is usefull to mention somewhere that users can use this trick to center their images in blog posts. I have opened an issue for Jekyll and I'll mention this technique there for future googlers.

[Fastidious]

This is a good idea but it will have to wait for the 2.0.0 release so that existing documents created for 1.x are not affected.

Was this ever done? If so, how to eliminate the <p>s around the <img>?

[gettalong]

Status is "open", so no. And milestone is set to 2.0.0, so again, no, since the current version is 1.9.0.

[gettalong]

Closed because feature request issues are now tracked through a dedicated project - see https://github.com/gettalong/kramdown/projects/1

[AlexWayfer]

Closed because feature request issues are now tracked through a dedicated project - see https://github.com/gettalong/kramdown/projects/1

They can be tracked and opened at the same time.

[gettalong]

Standalone images using the <figure> tag will be possible with the next release.

[bouk]

For those that want to have standalone images in jekyll, just put this in _plugins/kramdown-image.rb:

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

And any ![]() or <img that's on its own line anywhere in your markdown won't be wrapped in a paragraph.