How to modify the way Kirby handles images in posts?

Kirby 2 Solved ✅
1

Hi there,

I’d like to add a picture to a page. I could upload it on my server and type in the code by myself, but I assumed Kirby could handle that as well, especially if I’d like to post something with my smartphone.

Having modified the respective blueprint, I’ve added the possibility to add a caption to my image, which is supposed to be shown if I hover on it. In addition, screenreaders for the visually impaired should read out the caption as well.

Now, if I upload an image, I expect Kirby to generate this HTML code:

<p><img src="path/to/myamazingimage.jpg" alt="My caption" title="My caption" /></p>

Kirby, however, generates this:

<figure><img src="path/to/myamazingimage.jpg" alt="myamazingimage"></figure>

How do I get Kirby to handle images “my way”? I’ve read across the docs, but I’m rather confused.

Many thanks in advance!

2

You can set the kirbytext-image-figure option in your config.php to false.

http://getkirby.com/docs/cheatsheet/options/kirbytext-image-figure

If this doesn’t give you the desired result, you can always create your own image tag to overwrite the original one.

3

The figure option isn’t the problem here. It’s about the missing p, alt and title tags when I pull a file to the text field.

Let me put it this way: How can I get Kirby to generate this kind of Kirbytext:

![My caption](myamazingimage.jpg "My caption")

instead of this:

(image: myamazingimage.jpg)

?

Please bear with me if things that seem to be a given to you go over my head.

4

Let me clarify what we are talking about first:

![My caption](myamazingimage.jpg "My caption")

This is Markdown syntax.

(image: myamazingimage.jpg)

This is Kirbytext syntax

So these are two different things.

When you pull an image file into the textarea field, Kirby adds an image Kirbytag. You cannot change this to markdown. If the image object has a title (i.e. in a meta file), the title is automatically added as alt attribute. So all you need to do is change the name of your field from “caption” to “title” You can also add your alt attribute manually:

(image: myimage alt: This is an amazing image)

This still won’t help you, because the p-tags are still missing. Well, I think many people here are really glad not to have the p-tags anymore, in fact, I used to use a function to remove the p-tags in Kirby 1. Is there a reason why you want p-tags around your images?

But there is a solution: Overwrite the image tag with your own syntax.

  1. Create a new file called image.php
  2. Save this file to /site/tags.
  3. Copy line 60 to 158 from /kirby/extensions/tags.php and paste into your new file.
  4. Make your changes, i.e. remove the figure stuff and replace with p tags.

Hope this helps.

Edit: Coming to think of it, a Kirbytext post filter might be an alternative. http://getkirby.com/docs/advanced/kirbytext#kirbytext-filters

Edit 2: If you are going to change the image-tag anyway, you can of course change that bit with title for alt-attribute as well and get Kirby to take use the caption field instead.

5

First of all, thank you very much for your help and explanations, I really appreciate it!

You’re right, I reconsidered whether it’s a good idea to wrap images around the p tag. Without it, the image would be shown in full-screen, which isn’t helpful on responsive websites. I did manage that, though, so the p tag is no longer necessary.

And changing the caption field to “title” was a great leap forward. So, basically, this is solved! Thank you!