Picturefill Image Option for Art-Directed Image Sizes

[elmnt]

In a previous post…

Picturefill for responsive images

I’m using a foreach loop to get/display all images in a folder (standard). I have two sizes for each. For example: my-image-sm.jpg and my-image-lg.jpg. I’m using the standard picturefill code block. I’m also using pathinfo to break apart the image paths/names. The picturefill script chooses the correct size image, but the foreach loop (obviously) doesn’t choose one or the other, then move on. It shows the correct image twice. I know there are other discussions about resp. image solutions. I’m…

@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:

<?php
$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().'">
      </picture>';
?>