Retina image syntax

Kirby 2 Solved ✅
1

Hi all -

I normally use the srcset mentions or retina images, but I was hoping for help when using it with kirby’s php path tags. I’ve tried the below, but no dice which isn’t a surprise as it doesn’t look right. Any ideas?

<img src="<?php echo url('assets/images/logo.png') ?>" srcset="<?php echo url('assets/images/logo.png') ?> 1x, <?php echo url('assets/images/logo@2.png') ?> 2x">

1 Like
2

Have you tried this plugin? -> https://github.com/jancbeck/kirby-responsive-images

Maybe it helps.

Svnt

3

Thanks - but is there a way to do it without the plugin?

4

I don’t see why your code above shouldn’t work. What result do you get?

5

For “static” images in a template… sure. For (image: ) kirbytags from the text you have to modify the image kirbytag.

<picture>
  <source media="(min-width: 56.25em)" srcset="large.jpg 1x, large@2x.jpg 2x">
  <source media="(min-width: 37.5em)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
  <source srcset="small.jpg 1x, small@2x.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

replace the *.jpg filenames by a thumbnail of the corresponding size:

<?= thumb($page->image('myimage.jpg'), array('width' => 300)) ?>

6

Hi is this for use in the editor? Im trying to use it in the template, and normally use the method I posted in the first question; is there a way to fix my syntax issues and still use both the srcset and template path methods within the image tag?

7

this is for use in a template… for a image that comes from a image field e.g. “hero/header image”. It’s not for the (image:) tags in the text.
if you use the thumbnail method the template path should be fine.

8

Thanks all - I tried doing it in atom and it worked, so I’m not sure what’s going on but perhaps some encoding problem? Either way sorted, so thanks. I prefer the srcset tag on the image element; much cleaner than wrapping everything.