Progressive Images

Archive
1

To extend a conversation from Gitter and to collect more opinions and advice, I’m opening a discussion here about how to best handle images that appear as part of a blog post in terms of serving high resolution images (@2x) to retina screens and normal resolution images to regular screens - the infamous progressive image.

@rhukster posted this article reference to Gitter and it’s one that I’ve read http://alistapart.com/article/responsive-images-in-practice. See this one, too: http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/.

He’s right to point out that there are a ton of complexities inherent in this whole concept and that universally agreed-to approaches have been missing on the web. However, with the introduction of srcset and picture as real HTML concepts, maybe we’re at the point of having a “standard” and something that Grav could provide.

The problem comes in that you can’t easily specify the HTML markup desired in the context of writing up a blog post with Markdown. Yes, Markdown allows raw HTML, so in theory you could do wh ,atever you wanted, but I don’t think many want to write all the necessary HTML markup in their Markdown blog post.

Right now, if you write Markdown like this:

![Grav Icon](/user/data/images/blog/apps/grav-symbol.jpg)

you get HTML like this:

<img alt="Grav Icon" src="/user/data/images/blog/apps/grav-symbol.jpg">

I wonder if Grav’s Media Actions could be expanded to allow Markdown like this:

![Grav Icon](/user/data/images/blog/apps/grav-symbol.jpg?src=grav-symbol-medi um.jpg, grav-symbol-large.jpg&srcset=1000,2000)

to emit HTML like this:

<img src="grav-symbol.jpg"
    srcset="src=grav-symbol-medium.jpg 1000w, grav-symbol-large.jpg 2000w"
    alt="Grav Icon">

And nevermind that there’s a grav-symbol.svg file available! :slight_smile:

2

One option that would not require the modification of the core markdown parser, is to provide this capability as a Twig function.

It’s a pretty simple process to write a custom Twig function and add it to the Twig object via a plugin (see SmartyPants plugin for example of a custom Filter). That way you could simply enable Twig processing on a page and reference this filter which would in essence act like a macro to output all the required HTML to provide the support.

Via this method, you would have complete access to Grav’s media manipulation capabilities and could ensure the page content remained minimal and clean.