Can jekyll create lower resolution previews of images?

Help
1

When embedding an image like this:

![alt text](image.jpg)

Is it possible to have jekyll create a downscaled version that is as wide as the text column and have it link to the full resolution image?

2

jekyll won’t do this on its own, it’s possible there is a plugin that could do that but I’ve not heard of one.

3

You’ll need a plugin (or set of plugins).

Off the top of my head you could use the jekyll-picture-tag plugin to generate downscaled versions. It’s primary purpose is creating smaller sizes for use with responsive image markup, but it should do what you want.

It expects you to use a {% picture %} tag so it knows what images to use, but you could use another plugin that rewrites images written in Markdown to the format jekyll-picture-tag needs.

4

Thank you, mmistakes, this helped a lot.

I managed to get it to work with some changes to the second plugin you linked:

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

  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/\!\[([^\]]*)\]\(([^)]+)\)/, '<a href="\2">{% picture \2 alt="\1" %}</a>')
	post.content = newContent
  end
end

I fixed the regex so that it works if there are multiple images in one line and I added a link to the high resolution image.

I also modified the image path so that it works with the postfiles plugin:

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

  if payload['site']['markdown_ext'].include? docExt
    match = post.path.match(/.*\/(_.+\/)[^\/]*.md/)
	dir = match == nil ? "" : match.captures[0]
    newContent = post.content.gsub(/\!\[([^\]]*)\]\(([^)]+)\)/, '<a href="\2">{% picture ' + dir + '\2 alt="\1" %}</a>')
	post.content = newContent
  end
end

Do you know if it’s possible to make the jekyll-picture-tag plugin set the witdh and height values of the img element to the original image resolution? With these missing, the browser stretches low resolution images.