charleswuorinen.com

[onjegolders]

Just use the wonderful CropImage module. Say, you have a 300x300 image in your template. Define one 300x300 called "thumb" and one 600x600 crop called "thumb2x". Now you can use the picture polyfill like this:

<picture>

	<img srcset="<?= $page->myimage->eq(0)->getThumb('thumb') ?>, <?= $page->eq(0)->myimage->getThumb('thumb2x') ?>, 2x" alt="<?= $page->myimage->eq(0)->description ?>">
</picture>

Adding additional breakpoints with <source> is also possible (from the picturefill docs):

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
	<source srcset="examples/images/small.jpg, examples/images/medium.jpg 2x">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

So you can also do some art direction where you output not only different sizes but also different formats (for example 2:1 on mobile, 1:1 on desktop etc)

This works great, though still trying to find a way that combines background images (for their ability to cover/contain) and PHP foreach loops (to make it a slider). I think for now combining a data attribute and JS is the only way to go.

If only you could use @media queries inline.