Custom link class and empty <p>-tags with textarea

Kirby 4 Solved ✔️
1

Hi everyone,

I hope this message finds you well. I’ve been working on customizing text fields within Kirby’s panel and encountered a couple of issues that I haven’t been able to resolve fully despite some research. I’d greatly appreciate any guidance or insights you might offer.

  1. Is it possible to add a custom link class? I have found some hints but not a detailed guide on how to add a custom class.
    What I found so far is mentioning of adding a class but not a detailed guide and writing a custom plugin that would add a link class. I was wondering if it might be possible to just add it in the blueprint of a template?

  2. Each textarea is adding empty <p>-tags before and after the text rendered from the backend. I was wondering about the purpose of this. I made sure that there are no linebreaks or whitespace im my textarea, still the output is the same. Just out of cleanliness, could this be solved?

Here is my code:

contact.yml:

         text:
            type: textarea
            buttons:
              - link

text.html

  <div class="text__text">
    <p>
      <?= $page->text()->kirbytext() ?>
    </p>
  </div>

code output:

<div class="text__text">
    <p></p>
    <p>Some text here <a href="mailto:info@example.com">send us an 
    email here</a>. some more text here.</p>
  <p></p>
  </div>

I know that I could style the links without classes but I thought maybe I’m just missing the part of the docs here. Also I am not bound to the use of textarea and could switch to writer, if that would solve the issue :slight_smile:
Thanks for looking and have a great day!

2

Since kirbytext() converts your markdown to HTML, you cannot put this inside a p tags. So remove the wrapping p tags and you will be good.

As regards adding classes, you can either create custom textarea marks, add the links via HTML tags or use a custom kirbytag.

3

I went with creating a custom kirbytag in a plugin and it works for finding internal or external links. Other link-types (email, phone or file) I fail to catch.

This is my code (site/plugins/link-with-class/index.php):

<?php

Kirby::plugin('bothworlds/link-with-class', [
    'tags' => [
        'link' => [
            'attr' => ['text', 'target'],
            'html' => function ($tag) {
                // Get the URL from the tag
                $url = $tag->attr('link');
                // Initialize class as 'link' by default
                $class = 'link';
                // Check and set the class based on the URL type
                if (strpos($url, 'http') !== false) {
                    $class = 'link--external';
                } elseif (strpos($url, 'tel:') !== false) {
                    $class = 'link--phone';
                } elseif (strpos($url, 'page://') !== false) {
                    $class = 'link--internal link';
                } elseif (strpos($url, 'mailto:') !== false) {
                    $class = 'link--mail';
                }
                // Return the HTML for the link
                return '<a href="' . $url . '" class="' . $class . '">' . $tag->attr('text') . '</a>';
            }
        ],
        'file' => [
            'attr' => ['text', 'attribute'],
            'html' => function($tag) {
                $url = $tag->attr('link');
                $class = 'link link--download';
                $attribute = 'download';
                return '<a href="' . $url . '" class="' . $class . '" ' . $attribute . '>' . $tag->attr('text') . '</a>';
            }
        ]
    ]
]);

The method where I try to add a download-class and attribute to all links containing a file fails.

This is the first time I’m working with something like this, I assume that the link-types phone/email/file are not included in the 'link'-tags…

I was also browsing the kirby-folder to find the place where the textarea-field is created and stumbled upon the kirby/config/fields/link.php. This seems like a place where I could start manipulating the links aswell but I am not sure how to overwrite those configurations.

Again, my goal is to set a custom link-class based on the link type, but I would also be happy if there are any other plugins or methods where I can manipulate the textarea-field more in depth.
I’m kinda missing a link-wizard where I can restrict certain link-types (like anchor and custom) all together.
Also restricting H1-Headlines would be amazing, but I’ve read somewhere else already that it’s not possible.

I would be very happy if somebody has a hint where I could maybe find a solution for this: either overwriting the textarea-field, a plugin with a custom-textarea or anything else is kindly appreciated :pray: