Picturefill Image Option for Art-Directed Image Sizes

In a previous post…

@gerardkd pointed me to a very simple solution for image resizing, handled by Kirby. Something very basic and perfect that I’d overlooked.

I still wanted a way to serve up art-directed image sizes for smaller devices. In other words, not just smaller versions (thumbs), but alternately cropped smaller versions.

For instance, with these images in a content folder:

image-lg.jpg and image-sm.jpg (or even more sizes, if you want, of course)

  1. Get the image URL
    The images must have the same file name, but with a unique suffix ( ‘-lg’ or ‘-sm’ ), so grabbing image()->url() will just get the FIRST one. This is sufficient, since they have the same root name.

  2. Start at the end of the full URL and remove 7 characters. This will remove either -lg.jpg or -sm.jpg.

Now we have the URL with just the root of the filename. Feed that into this picturefill module:

$image_name = $page->image()->url();
$image_root = substr($image_name, 0, -7);
echo '<picture class="fit">
        <source srcset="'.$image_root.'-lg.jpg" media="(min-width: 1200px)">
        <source srcset="'.$image_root.'-sm.jpg" media="(min-width: 800px)">
        <img srcset="'.$image_root.'-sm.jpg" alt="'.$page->$alttext()->html().'">