Panel markdown relative images

Kirby 2 Solutions 🎉
1

I wanted to have both the Kirby (image:) tag work with relative urls but also the native ![Alt](image.jpg). It did not work out of the box so I built it.

When it’s useful

I’m trying a new approach to content writing. Instead of writing in the Panel where I get logged out a lot, I’ve started to write in Vscode. It has a great markdown preview and it’s possible to set a custom css for it.

It has support for native markdown code, but not for Kirby text tags, so the Kirby (image: will not work for example, but the relative ![Alt][image.jpg] does.

So no matter where the content came from, a markdown document or the Panel, it should work.

Content example

Without this solution only the first one will work. With this solution both works.

Kirby image tag:

(image: bear-2439923_1920.jpg)

Markdown image code:

![Test](bear-2439923_1920.jpg)

Solution

Config

Place in config.php:

c::set('thumbs.presets', [
    'content' => ['width' => 480, 'height' => 320, 'quality' => 30],
]);

I think the images should be resized so I implemented that as well. Put the code below inside a plugin:

field::$methods['kirbytext'] = field::$methods['kt'] = function($field) {
    $field->value = relativeMarkdownLinks($field, $field->page->root(), $field->page->contentUrl());
    $field->value = kirbytext($field->value);
    return $field;
};

function relativeMarkdownLinks($field, $path, $url) {
    return preg_replace_callback('/\[(.*?)\]\((.*?)\)/', function($matches) use ($field, $path, $url) {
        $extension = pathinfo($matches[2], PATHINFO_EXTENSION);
        if(!in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) return $matches[0];

        $image = $field->page()->file($matches[2]);
        $thumb = thumb($image, 'content');

        $output = '[' . $matches[1] . '](' . $thumb->url() . ')';

        return $output;
    }, $field->value);
}

/*
Regex from:
https://stackoverflow.com/questions/24985530/parsing-a-markdown-style-link-safely
*/

Updated: Thanks @texnixe for a better solution for the thumb arg. Forgot to include a small function in the last version, but this version should work out of the box.

2

oh good one! Ive used Write app before for writing content, but think I stopped because of little things like this. The neat thing about Write app is that it actually has built in FTP. I have never used it but maybe this paves the way for not having to fire the site up on local server just to edit some stuff.

Might give it a ago later!

1 Like
3

I thought you could use “regular” markdown in Kirby as well, as kirbytext is an extension on the regular markdown?

4

Yes but it generates a full absolute URL, rather then relative to the markdown file, which means they wont show up in a desktop app thats capable of rendering a markdown preview. This means you can draft an article locally outside of needing a local server.

1 Like
5

The code is now improved thanks to @texnixe. I also now use a thumbnail preset (config) to control the dimensions. That way you don’t need to hack the function. Shorter and better.

6

A post was merged into an existing topic: Generate thumbnail in content text?

7

I see.

The idea behind my solution is to support relative urls with the native markdown image function.

Normally the content below does not work:

![Test](bear-2439923_1920.jpg)

Then upon that I added thumb support because I think images even inside content should be downsized.

8

I posted this in the wrong thread…