Automating responsive images in Markdown

[YJPL]

This is not an issue per se, just a suggestion/solution that I use in combination, and that plays nicely along with the Jekyll Picture Tag plugin.

See: img_tag_tansform.rb, a small plugin to keep image markup in Markdown.

Pros:

• it’s nice because you don’t need custom markup for your images—one of the points of Jekyll is indeed to keep your content in simple text files, using mostly Markdown is convenient.

• it separates form from content. Say you want to change theme or remove the plugin, everything will still work, you won’t have to re-write all your images markup again.

• you can use both markdown and JPT liquid include for images

Cons:

• not sure how robust this solution is for large sites with thousands of images. How much it would add to the build? etc.
• it doesn’t solve figcaption since there is no such a thing in Markdown

---

Using Jekyll hooks to automate responsive images in markdown seems like a good idea because you then don’t need Jekyll includes or custom liquid in your posts and pages. It follows the Jekyll logic where most of your post is just written in markdown.

For the Jekyll Picture Tag plugin itself, it could be an advantage because it would automatically work for sites calling images this way, you wouldn’t have to re-write all your images markup to get responsive images.

[rbuchberger]

That little plugin is great, I love the idea of not having to deal with the awkward liquid tag syntax. I'll have to do some learning, but this is a great idea. Thanks for the suggestion!

[ImaCrea]

Great idea here @YJPL :) I was fighting with Jekyll CMS because of that but this could solve it all. I'll try that eventually.

[kylekirkby]

@YJPL nice work on the plugin! If anyone is hot on Ruby, it would be good to be able to:

1. Ignore external images as JPT cannot download and process these.
2. Add classes to the picture tag. Good for allowing users to add an inline or centered image:

{:.centered}
![alt text](/assets/images/your-image.png)

Currently getting users to add an image include string like:

{% include image.html class="centered" alt="Your alt text" path="/assets/images/your-image.png" %}

with the image.html include looking like:

{% if include.alt %}
    {% capture image_alt %}{{include.alt}}{% endcapture %}
{% else %}
    {% capture image_alt %}{{page.title}} content image{% endcapture %}
{% endif %}
{% if include.class %}
    {% capture image_class %}{{include.class}}{% endcapture %}
{% else %}
    {% capture image_class %}{% endcapture %}
{% endif %}
{% if include.url %}
<a href="{{include.url}}" target="_blank">
{% endif %}
{% picture blog_image {{include.path}} class="{{image_class}}"  --alt {{image_alt}} --class {{image_class}} %}
{% if include.url %}
</a>
{% endif %}

[JavierSegoviaCordoba]

Any change it is added to the next version?

[rbuchberger]

@JavierSegoviaCordoba So I'm really busy these days (new job and kid on the way) and I don't have much time to spend hacking on JPT. I'd love a little help adding features like this, otherwise it'll have to wait till I can get to it.

[tadamcz]

FYI, I've written my own plugin for this, adapting work by others:

# Jekyll plugin to replace Markdown image syntax with {% picture %} tag for crafting responsive images
# Place in /_plugins/
# Requires the Jekyll picture tag plugin: https://github.com/rbuchberger/jekyll_picture_tag
# Adapted from https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  file_ext = post.extname.tr('.', '')

  # This regex will match all of the following correctly:
  #
  # ![](image.png)
  # ![Alt text](image.png)
  # ![Alt text!'"@#$%^&*](image.png)
  # [![Alt Text](image.png)](https://example.com)
  # > [![Alt Text](image.png)](https://example.com)
  image_markdown = /!\[([^()]*)\]\(([^()]+)\)/

  # Only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? file_ext

    post.content = post.content.gsub(image_markdown) do
      match = Regexp.last_match
      alt_text = match[1]
      src = match[2]

      # If alt text is empty, try to infer it from the file name
      # Results may not always be desirable
      if alt_text == "" and src
        alt_text = File.basename(src, File.extname(src))
        alt_text = alt_text.gsub(/[_\-]/, " ").gsub("/", "")
      end

      "{% picture default #{src} alt=\"#{alt_text}\" %}"
    end
  end
end

And thanks so much @rbuchberger, JPT is awesome!

[tadamcz]

I hacked some more on the above and released it as a gem: https://github.com/tadamcz/jekyll-markdown-responsive-image

[kylekirkby]

@tadamcz ,

thanks for this! I’ll have to give it a try 👌

I had a case recently where I needed to add images to some markdown stored in front matter. Will this work with front matter markdown that’s been passed into markdownify?

[tadamcz]

@kylekirkby

Add classes to the picture tag. Good for allowing users to add an inline or centered image:

You'd have to parse those special Kramdown tags and I'm not good enough at regex to do that... You can at least do this which might be a slight improvement:

<div class="centered">

![hello](/world.jpg)
</div>

Ignore external images as JPT cannot download and process these.

Good point. I've added this.

I had a case recently where I needed to add images to some markdown stored in front matter. Will this work with front matter markdown that’s been passed into markdownify?

Probably not. But I'd have to see the exact setup you have.

[kylekirkby]

Take this page as an example:

https://raw.githubusercontent.com/Linaro/website/master/_pages/about.md

The front matter would be passed to the Jekyll theme and would be processed by this include:

https://github.com/linaro-marketing/linaro-jekyll-theme/blob/master/_includes/flow/text.html