Using plain Markdown syntax for (responsive) images

[nhoizey]

I have a silly dream to be able to use Jekyll Assets for images without needing a specific syntax in Markdown content.

Writers use tools that understand the default Markdown syntax for images (![alt text](/image/file.png)) and are able to build a live preview. I'm using Macdown for example. But these tools don't understand Jekyll Assets specific syntax, of course.

I would like to let writers use their tools and preview their articles with included images, but also deal with responsive images (see #157).

Default settings in my _config.yml would say that I want 3 versions of each image (say 320, 640 and 1024 pixels wide), and writing ![my hero image](/path/to/images/whatever.jpg) would make Jekyll Assets generate this:

<img
  src="whatever-320.jpg"
  srcset="whatever-320.jpg 320w, whatever-640.jpg 640w, whatever-1024.jpg 1024w"
  sizes="(min-width: 960px) 960px, 100vw"
  alt="my hero image" />

This is the "hero" example from #157 (comment)

I still have to imagine how writers would decide a specific image in the content has to use another set of dimensions, as for the "gallery" example in #157 (comment)

Please tell me if this dream is really silly, or if there's hope… ;-)

[larryhynes]

It's not exactly what you're describing, but have you looked at jekyll picture tag?

[nhoizey]

@larryhynes I'm currently using it on http://nicolas-hoizey.com and indeed, it's not what I'm describing, exactly what I want to avoid in fact… ;-)

[envygeeks]

It's a dream and it's not a dream if that makes sense. For 2.0.0 it is a dream. For 2.1 it might not be but it also depends on the markdown processor people use, some of them allow us to insert ourselves into their parsers and do special things without needing our own parsing (like Redcarpet, it has that concept) but others don't (which requires work and would just anger people on JRuby.)

[nhoizey]

I love this v2.1.0 milestone! ;-)

Kramdown is the default markdown processor in Jekyll 3, but I didn't find in the doc how it could deal with this…

[envygeeks]

Kramdown is the default for Jekyll3.0 only because we want to avoid compiling C gems so people can get started quickly and we can reduce the number of tickets asking us why their C compiles fail. However support all of them and there are thousands of legacy installs that still use Redcarpet probably.

[nhoizey]

ok

[envygeeks]

This is shifting to 2.2.0 because 2.0.* ended up being 2.1.0 because of a necessary API change.

[nhoizey]

Now waiting for the 2.2.0 then… ;-)

[envygeeks]

In theory, this will be possible with the 3.0 release, we now parse <img asset> into the Jekyll Assets system, and spit out the stuff (including proxies.) So once <img srcset> stuff is complete, this will be entirely possible, not in the way expected, but with <img asset='srcset srcset scrset'>

I'm closing this since the major piece is done, and another ticket tracks the other piece.