Hi! I'm Johannes Dachsel, a web designer and developer based near Heidelberg, Germany. This is my personal website. Get in touch

Johannes Dachsel

Using the <picture> element in Processwire

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 <picture> element.

Module configuration page

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 <picture> element.

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.