Picturefill for responsive images

Kirby 2 Solved ✅
1

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 a fan of picturefill, and would love to find a way to implement it in my kirby site, if there’s a logical way to fix this. I’d love to hear any thoughts on this. Thanks!

Here’s my code:

  <?php foreach ($page->images()->sortBy('sort', 'asc') as $image ): ?>

  <?php
  $projvar = $image->url(); // set the image path as a var
  $projparts = pathinfo($projvar); // create the pathinfo array
  $projdir = $projparts['dirname']; // the directory path
  $projfile = $projparts['filename']; // the image name
  $projext = $projparts['extension']; // the extension (.jpg, .png, etc.)
  // now remove the -lg or -sm part, so we have just the root file name
  $projfile_cut = substr($projfile, 0, -3);
  // create variables for both, so our picturefill code is cleaner
  $projimg_lg = $projdir . '/' . $projfile_cut . '-lg.' . $projext;
  $projimg_sm = $projdir . '/' . $projfile_cut . '-sm.' . $projext;
  ?>
  <picture class="fit">
    <source srcset="<?php echo $projimg_lg; ?>" media="(min-width: 1200px)">
    <source srcset="<?php echo $projimg_sm; ?>" media="(min-width: 600px)">
    <img srcset="<?php echo $projimg_sm; ?>" alt="<?php echo $page->title()->html() ?>">
  </picture>
  <?php endforeach ?>
2

Well, I can be wrong, but isn’t this something that can be achieved via the $image method?

For more info: https://gist.github.com/bastianallgeier/23edbb66253186fa63c8

It creates URL’s for different sizes of the same image. This way, you’ll only have to upload 1 (large) image and make different sizes via the image method on the fly.

Example for your code snippet:

<source srcset="<?php echo $image->resize(1200)->url() ?>">

Make sure that there’s a /thumbs/ folder, or else this won’t work :slight_smile:

Quick edit : I don’t know if Kirby’s image method also works with different PPI’s, or if that is something that’s currently is worked on.

3

Thank you, I overlooked that feature. I’ll try it. I’m sure that’s the best solution.

Edit: Perfect solution gerardkd, thanks again. Just didn’t know enough about how kirby handles image sizes to see that. But now my picturefill code is simple & clean. Done :wink:

4

Pixels per inch are completely irrelevant for images viewed on a screen, all a digital image consists of, is pixels. So an image has a pixel dimension made up of the height and width of the image in pixels.

5

True. I’m concerned primarily with page weight. And I’m starting with a reasonably sized “large” version, at only 1200px, at 72dpi.

Kirby’s solution here is fine, for my needs, RE: file size. I’m sure I could get a lighter image (for mobile size) into the picturefill element if I edited myself (in Fireworks or with Gulp, for instance), but Kirby giving me a smaller version, on the fly, that is 1/3 the file size, adequately addresses the page weight issue for me.

6

You’re totally right. You can serve the images just as x2 to high pixel density viewports (I was a little bit confused for a moment :slight_smile: ).

1 Like
7

Great, I’ll mark this resolved. Happy to have learned just a little more about kirby today :wink: