I’m really excited about the opportunities to declare responsive images directly in your markup. To make this a little easier for me I wrote a module for Processwire.
Recently, I’ve been looking for an easy way to use the
<picture> element with Processwire. By easy I mean this: the user uploads an image at a reasonable size and Processwire does the rest. (I just noticed you could interchange “easy” with “lazy”)
So I wrote a Textformatter module that allows you to do just that. Via the module configuration page you can specify multiple sizes and media queries which the module will then use as
<source> elements when rendering the page. You can also provide a fallback image size for browsers that do not yet understand the
The module uses Processwire’s image sizing capabilities and resizes the original image to the configured sizes, when the page is rendered. It then replaces all the
<img> elements with the appropriate
You can get the module from Github. It’s still a bit hacky and I have some more features in mind that I want to add. But it does it’s job quite nicely so far.