Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do not wrap img in paragraph #98

Closed
lu-zero opened this issue Dec 17, 2013 · 12 comments
Closed

Do not wrap img in paragraph #98

lu-zero opened this issue Dec 17, 2013 · 12 comments
Assignees
Milestone

Comments

@lu-zero
Copy link
Contributor

@lu-zero lu-zero commented Dec 17, 2013

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

@ghost ghost assigned gettalong Dec 18, 2013
@gettalong
Copy link
Owner

@gettalong gettalong commented Dec 18, 2013

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
Copy link

@pathawks pathawks commented Aug 20, 2014

👍

@Vaguery
Copy link

@Vaguery Vaguery commented Dec 5, 2014

👍

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
Copy link

@mehdisadeghi mehdisadeghi commented Dec 19, 2014

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
Copy link
Contributor Author

@lu-zero lu-zero commented Dec 19, 2014

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
Copy link

@mehdisadeghi mehdisadeghi commented Dec 21, 2014

@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
Copy link

@Fastidious Fastidious commented Oct 5, 2015

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
Copy link
Owner

@gettalong gettalong commented Oct 5, 2015

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
Copy link
Owner

@gettalong gettalong commented Nov 5, 2016

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

@AlexWayfer
Copy link

@AlexWayfer AlexWayfer commented Nov 21, 2018

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
Copy link
Owner

@gettalong gettalong commented Jan 20, 2019

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

@gettalong gettalong removed this from Only in Next Major Version in Feature Requests Jan 20, 2019
@bouk
Copy link

@bouk bouk commented May 23, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants