I am learning on several fronts here and am again quite lost.
Firstly, where this amateur is coming from:
In my CMS (CMS Made Simple) I drop in an image using wsiwyg editor to create code similar to this:
<img style="margin: 8px auto;" src="images/bikes/0-rides/angaston-eudunda/20211227StKitts2.jpg" alt="St Kitts, SA" width="40%" />
I use a standardised image size of 500px wide on my website which means the image adjusts relevant to the width of the viewport, and is not too data heavy.
I could simply paste this code into the text, but it’s hardly elegant.
In Kirby I can drag an image into the text, which is excellent. But I see no way to alter the size of the image within the program itself, much less make it vary depending on the size of the viewport. (I have my viewport set in the template:
)
I have met srcsets. And I think I am seeing that Kirby creates the different image sizes on the fly. Is this correct?
I am not finding how it is that you use the panel / configure the panel in order to use the srcsets.
Can anyone point me to the right place here, please. I am aware of the article at Resizing & cropping images | Kirby CMS
This is no criticism of Kirby; I have found Bastian’s videos enormously helpful. But I am starting from a position of great ignorance.
It all depends on where you use your images in fields and in your templates.
If you integrate an image in your template, as in
<?php if ($image = $page->image('someimage.jpg')) : ?>
<img src="<?= $image->url() ?> alt="<?= $image->alt() ?>">
<?php endif; ?>
The same works for images in image fields.
You can of course add any styles and other attributes.
In a textarea field, you can use the image kirbytag:
(image: someimage.jpg)
This tag accepts different attributes like
- caption
- class
- height
- imgclass
- link
- linkclass
- rel
- target
- title
- width
So you can use those to get the img tag with all attributes you need (apart from the inline styles, but those should go into a stylesheet, anyway).
If that is not enough, you can overwrite this Kirbytag with your custom Kirbytag: KirbyTags | Kirby CMS
Then there are images in blocks/layouts fields. There you can fine tune the output with a custom block snippets: Blocks | Kirby CMS
Hope this helps.
Thank you so much. I shall have a play 
As regards the srcset attribute, this is not supported by default in blocks/KirbyTags, because proper use of srcset always depends on the context of an image. For example, an image that is always full-screen needs to be treated differently from an image that is full-screen on mobile but only takes up a third of the screen width on desktop.
Sonja, thank you for pointing me in the right direction. The Kirby code is magnificent!
I am puzzled by the php code. I discovered, when I came back to my computer, that the code you pointed out to me, was what I had already found, and could not get to work. So, to be clear,
if I put standard html in my template with the src as “onemansweb/hold/1.jpg’”
the picture is displayed. So I know I have the path to the image correct. But if I use the code you pointed out to me:
<?php if($image = $page->image('/onemansweb/hold/1.jpg')): ?>
img src=“<?= $image->url() ?>” alt=“” title=“Dancer at Whyalla” (Left the <> brackets off here, or it won’t show up in the fourm)
<?php endif ?>
nothing shows up.
Am I doing something monumentally stupid or does this suggest I have a problem somewhere in my system?
Many thanks.
Andrew
You have to pass the filename as argument:
$page->image('1.jpg')
To post code blocks here, put your code between three backticks on a separate line, like this:
