Hi,
is it possible to hook in to a text field before it get rendered? I want to include Fancybox 3.
And thatâs no problem. But when content creators put images into the text field the output markup is like this:
<img alt="" src="path/to/image">
But for Fancybox 3 the output markup should be:
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
Problem in short 
I want to hook in in some specific field in my blog and in this field all pictures should have the markup for Fancybox 3.
How can i do that? Or it is even possible?
thanks
1 Like
There are two ways to go about this:
- If you want this for all images included via the image tag, override the native image tag
- Alternatively, you can use a KirbyText:after hook to replace the rendered markup with your. custom markup.
1 Like
Thank you for your quick answer.
I tried the KirbyText:after hook and it works.
âhooksâ => [
'kirbytext:after' => function ($text) {
// your code goes here
echo "this is a test";
return $text;
}
],
But i think i need to rename my blog text filed from âtextâ in something like âarticle_textâ.
The hook now applies to all text fields on every site. Or i have to specify a template maybe?
Another thing that i still have to find out is how can i replace the img tag?
Can i use a string replace? Or will Kirbyâs placeholder function work?
I will try a few things and post my solution later. 
1 Like
If you want to limit it to certain pages only, you would have to use a condition. changing the name of the field doesnât help, because the hook applies to each field on. which you call the kirbytext() method.
1 Like
Okay, i really donât get it how i can build a condition into the config. I have found other examples, but that didnât work for me. As far as i know the $text object is not capable to check which template is used. I tried page.changeTemplate:before to check which template is used but that didnât work. Can you please give me a hint how can i check which template is used inside the hook?
Ah, sorry, better use a Kirbytags:afterhook then.
'kirbytags:after' => function ($text, $data, $options) {
// use `$data['parent']` to get the parent page object
}
1 Like
Okay this brings me one step closer to the goal. I have tried this, and my little text âthis is a testâ is now only visiable on the blog and article sites.
'hooks' => [
'kirbytags:after' => function ($text, $data, $options) {
// your code goes here
if ($data['parent']->parent() == 'blog') {
# code...
echo "this is a test";
return $text;
} else {
return $text;
}
},
Where can i find how the text editor outputs the img tags?
The output should look similar to this:
<img alt="" src="">
But where can i see how the PHP Code would look like?
The placeholder for the image source. I think that is now the only problem i have to solve.
I should be able to replace the image tag with str_replace. I tried that with text, and itâs working.
But i need to see the output from kirby before it getâs rendered. 
Iâm afraid I donât quite understand the question.
The final result of the image tag can look be different depending on which attributes are set⌠But canât you ignore anything inside the img tag and just wrap the complete thing in your a tags?
I try to explain it better. 
When i use the panel and create a new article i put images into the text field.
That looks like this:
(image: 01_grosse-bilder01.png)
(image: 01_grosse-bilder02.png)
(image: 01_grosse-bilder03.png)
(image: 01_grosse-bilder04.png)
The final output is this:
https://mysite.de/media/pages/blog/slug/61586985-1585327526/01_grosse-bilder01.png
Now i need to know how Kirby output this dynamic tag so that i can replace the whole thing.
I thought Kirby should output something like this:
<img alt="" src="<?php $site->image_01 ?>">
<img alt="" src="<?php $site->image_02 ?>">
I think i need this âdynamicâ part to replace this:
<img alt="" src="<?php $site->image_01 ?>">
with this:
<a data-fancybox="gallery" href="<?php $site->image_01 ?>"><img src="<?php $site->image_01 ?>"></a>
I think i could not better explain it. 
No, the rendered result is not <img alt="" src="<?php $site->image_02 ?>"> but <img alt="" src="https://mysite.de/media/pages/blog/slug/61586985-1585327526/01_grosse-bilder01.png">. So all you need is to get the complete rendered img tag and the value of the src attribute, and wrap that within your link.
I think I would prefer a custom image tag instead that renders the result differently depending on template though, rather than the hook. Would prevent having to do the regex voodoo.
I choosed to overwrite the image tag. And i can change the html markup. But i canât figure out why the placeholders not working. Did i have to input $tag->value as well?
<?php
Kirby::plugin('congomonster/fancytag', [
'tags' => [
'image' => [
'attr' => [
'class',
'srcset',
'alt',
'caption',
],
'html' => function($tag) {
// your code here
$html = '<figure><img class="'. $tag->class . '" alt="' . $tag->alt . '" src="' . $tag->srcset . '"></figure>';
return $html;
}
]
]
]);
I found an old thread for Kirby 2. This seems to work a little bit.
$url = $tag->attr('image');
That gives me the file name = 01_grosse-bilder01.png
But i need the whole link. I have no idea how i can get the information about the link, the caption, the class⌠As for now get the attributes $tag->attr seems my best option.
Have a look here how to access attributes: https://getkirby.com/docs/reference/plugins/extensions/kirbytags#accessing-attributes-and-kirby-objects
If you want to get the file from the filename
$file = $tag->parent()->file($tag->value);
It will help if you check out the source code of the original image tag. Keep in mind that src and srcset are two different attributes.
1 Like
Okay itâs working now! 
I did override the image tag as @texnixe mentioned. I created an index.php under /sites/plugin/fancytag.
This is now my code:
<?php
Kirby::plugin('congomonster/fancytag', [
'tags' => [
'image' => [
'attr' => [
'class',
'srcset',
'alt',
'caption',
],
'html' => function($tag) {
// your code here
$url = $tag->attr('image');
$alt = $tag->attr('alt');
$title = $tag->attr('title');
$link = $tag->attr('link');
$caption = $tag->attr('caption');
$file = $tag->file($url);
$html = '<figure><a data-fancybox="gallery" href="' . $file->url() . '"><img alt="' . $alt . '" src="' . $file->url() . '"></a></figure>';
return $html;
}
]
]
]);
Big Thanks to @texnixe
I will look this up too. Maybe i can make the code better.
Make sure to check if you have a file object before you call the filesâs url in the next step. Keep in mind that the file might be removed at one point in time so it will not exist anymore.