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('firstname.lastname@example.org') ?> 2x">
Have you tried this plugin? -> https://github.com/jancbeck/kirby-responsive-images
Maybe it helps.
Thanks - but is there a way to do it without the plugin?
I don’t see why your code above shouldn’t work. What result do you get?
For “static” images in a template… sure. For (image: ) kirbytags from the text you have to modify the image kirbytag.
<source media="(min-width: 56.25em)" srcset="large.jpg 1x, email@example.com 2x">
<source media="(min-width: 37.5em)" srcset="medium.jpg 1x, firstname.lastname@example.org 2x">
<source srcset="small.jpg 1x, email@example.com 2x">
<img src="fallback.jpg" alt="">
replace the *.jpg filenames by a thumbnail of the corresponding size:
<?= thumb($page->image('myimage.jpg'), array('width' => 300)) ?>
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?
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.
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.