How to wrap image in figure?

Kirby 3 Solved ✅
1

I’d like to render an image wrapped into a element (just like “(image: pic1.jpg caption: MY CAPTION)” would do).

This far I got:
$files = page()->files()->filterBy(‘extension’, ‘jpg’);
$file = $files->find(‘pic1.jpg’);
$figure = \Kirby\Cms\Html::figure($file->html(), ‘CAPTION’);

Yet, “<img…” is now converted “<img…” etc. (i.e. like run through htmlentities() ).
So, how to do it correctly?

Thanks
Dieter

2

You can do it this way in a template or snippet, no need for the filter and find. It is good practice to check the image exists first:

<?php if($image = $page->image('pic1.jpg')): ?>
<figure>
  <img src="<?= $image->url() ?>" alt="">
  <figcaption>Your Caption</figcaption>
</figure>
<?php endif ?>

If you use a snippet, you will be able to reuse the code over and over, by making the file name and caption snippet variables that you can pass through.

3

I see, thanks.
You see, I’m still trying to get the hang of Kirby. That is, to understand what’s in and out of Kirby’s bounds.

So, is it fair to say that, conceptually speaking, Kirby ends, where composing and rendering of HTML starts?

Well, I guess it’s not quite like that. There seem to be quite a few areas where Kirby indeed does render HTML, i.e. what Helpers functions provide and everything around the backend Panel.

But apart of that, are there areas where I’d start re-inventing the wheel? (Leaving plugins aside for the moment, that is.)
How about forms, for instance? Are there things I could make use of when it comes to composing forms?

Or could I re-use elements of the Panel?

I know, that’s a bit too open a question. But maybe there is a rule of thumb?
As I said, I’m trying the grasp the concept.

Thanks
Dieter

4

Not that easy to answer, I think it’s one of the advantages while at the same time disadvantages of Kirby that it’s somwhere in-between what you describe. Ideally, you have a look at the Cookbook articles, they help understanding this a bit better.

For forms, have a look at Email contact form | Kirby CMS for what Kirby offers. Then have a look at the Uniform plugin and see the difference. Uniform gives you much more convenience functions but has its own disadvantages, too. You can see, Kirby has a variety of choices you can make.

Speaking about images, you have the choice to render all HTML yourself or let Kirby output their standard HTML by not using the image’s url() method. Third option is to use one of the image plugins that do other stuff then as well: Plugins | Kirby CMS

For a bit more advanced topics, have a look at how to build and use Kirby blocks which shows you an example of Kirby providing default HTML output but you can also go completely independent of that.

5

You might also like my forms plugin which simplifies coding the form its self which can often be tedious it uses snippets so if you wanted to change the html generated by it, you can just overide the snippet