3

I would like to use the Jekyll Responsive Image plugin to generate appropriate responsive images with srcset/sizes attributes for my posts' images.

But I would also like to be able to edit my posts in a software providing a live preview like MacDown, which only understands the standard Markdown syntax for images.

That's why I would like to know if there is a way —a plugin of some sort— to tell Jekyll to transform the standard Markdown syntax for images, which I would put in my Markdown files…

![alt text](path/to/image.jpg)

…into this syntax specific to the Jekyll Responsive Image plugin:

{% responsive_image path: path/to/image.jpg alt: "alt text" %}

And THEN, Jekyll could continue and use Kramdown to generate the HTML…

I also created an issue in the plugin's Github, but a more general answer would be nice too, and maybe useful for other needs.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24

3 Answers3

5

Yes, this is definitely possible. Since Jekyll 3, you can have multiple converters per file extension. This allows you to create a converter like:

class ResponsiveImageify < Jekyll::Converter
  priority :high

  def matches(ext)
    ext.downcase == ".md"
  end

  def convert(content)
    content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: \1  %}')
  end
end

That converter will gsub the content of any .md file.

Hope this helps!

parkr
  • 823
  • 6
  • 14
  • I tried to use this in a new plugin, but it seems the Liquid syntax I generate with my [`Cloudinary` converter](https://github.com/nhoizey/nicolas-hoizey.com/blob/8f49a34dd444b000520aeb7731d0a8ca17415615/_plugins/cloudinary.rb#L84-L107) is not parsed after. Should I explicitly call Kramdown? – Nicolas Hoizey Jun 29 '16 at 23:31
  • Related: http://stackoverflow.com/questions/38126629/how-is-the-priority-flag-in-jekyll-plugins-supposed-to-work – Nicolas Hoizey Jun 30 '16 at 17:06
2

Simplest solution is to use new Jekyll hooks

A very raw plugin can be :

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')
  # only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: \1  %}')
    post.content = newContent
  end
end

Store this in _plugins/img-tag-transform.rb

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
  • I like [parkr](http://stackoverflow.com/users/716249/parkr)'s response better, but this one gives me new ideas too, so thanks a lot! – Nicolas Hoizey Feb 25 '16 at 23:17
  • Thanks for this! FWIW, I amended the regex using named matched, also parsing out the `title` and having both `alt` and `title` being optional. So in my case, that one `gsub`-line looks like this: `new_content = post.content.gsub(/\!\[(?.+)?\]\((?\S+) ?"?(?.*?)"?\)/, '{% responsive_image path: \k<path> alt: "\k<alt>" title: "\k<title>" %}’)`. – Daniel Pietzsch Jan 07 '20 at 13:31
0

The examples posted here break the alt tag. The alt string needs to be quoted otherwise it gets truncated into one word.

e.g. content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: "\1" %}')

Also Nicolas Hoizey's post is the only one that works for me on the latest version of Jekyll (3.7), I can't seem to make the other examples output html. Markdown appears to have been rendered before this inserts the liquid tags.

hyde in the dark
  • 1