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 ): ?>
$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;
<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() ?>">
<?php endforeach ?>
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
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.
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
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.
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.
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 ).
Great, I’ll mark this resolved. Happy to have learned just a little more about kirby today