# Lost again: images this time

**URL:** <https://forum.getkirby.com/t/lost-again-images-this-time/24896>\
**Category:** Questions\
**Tags:** v3\
**Created:** [March 5, 2022, 5:38am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896 "2022-03-05T05:38:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndrewPrior](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andrewprior/32/11603_2.png) [@AndrewPrior](https://forum.getkirby.com/u/AndrewPrior)\
**Post date:** [March 5, 2022, 5:38am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/1 "2022-03-05T05:38:04Z")

</div>

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:

```auto
<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 [Templates | Kirby CMS](https://getkirby.com/docs/guide/templates/resize-images-on-the-fly#resizing-images)

This is no criticism of Kirby; I have found Bastian’s videos enormously helpful. But I am starting from a position of great ignorance.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 5, 2022, 7:27am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/2 "2022-03-05T07:27:08Z")

</div>

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

```auto
<?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:

```auto
(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](https://getkirby.com/docs/reference/plugins/extensions/kirbytags)

* * *

Then there are images in blocks/layouts fields. There you can fine tune the output with a custom block snippets: [Blocks | Kirby CMS](https://getkirby.com/docs/reference/panel/fields/blocks#block-snippets)

Hope this helps.

---

<div class="post-metadata">

**Author:** ![AndrewPrior](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andrewprior/32/11603_2.png) [@AndrewPrior](https://forum.getkirby.com/u/AndrewPrior)\
**Post date:** [March 5, 2022, 8:40am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/3 "2022-03-05T08:40:07Z")

</div>

Thank you so much. I shall have a play 🙂

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 5, 2022, 9:28am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/4 "2022-03-05T09:28:50Z")

</div>

> [@AndrewPrior](#):
>
> I am not finding how it is that you use the panel / configure the panel in order to use the srcsets.

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.

---

<div class="post-metadata">

**Author:** ![AndrewPrior](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andrewprior/32/11603_2.png) [@AndrewPrior](https://forum.getkirby.com/u/AndrewPrior)\
**Post date:** [March 6, 2022, 2:12am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/5 "2022-03-06T02:12:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 6, 2022, 8:11am UTC](https://forum.getkirby.com/t/lost-again-images-this-time/24896/6 "2022-03-06T08:11:22Z")

</div>

> [@AndrewPrior](#):
>
> $page-\>image(‘/onemansweb/hold/1.jpg’)

You have to pass the filename as argument:

```auto
$page->image('1.jpg')

```

* * *

To post code blocks here, put your code between three backticks on a separate line, like this:

![Bildschirmfoto 2022-03-06 um 09.13.08](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/d6e78f077fd592bf93b36ac70dda01bc54c95937.png)