Controlling file link in text block

Kirby 4 Question❓
1

hi, i’m using photoswipe to show images in a lightbox. therefore i would like to custumize the way, kirby renders the file links in a text block. if i link a file in a text block, the output in the content file is
<a href=\"/@/file/qdixblr1Rdy4lRse\">link</a>
but i would like it to be sth like:
<div class="lightbox"><a href="<?= $image->url() ?>" data-pswp-width="<?= $image->width() ?>" data-pswp-height="<?= $image->height() ?>">link</a>
where can i customize that? i already created a new file called text.php in the snippets>blocks folder but i’m not quite sure what to put in…

also i would like to know where i can edit the link dialog. i don’t need the “In neuem Fenster öffnen” checkbox.

thank you very much

Bildschirmfoto 2024-10-30 um 16.12.26
Bildschirmfoto 2024-10-30 um 16.12.262874×1232 197 KB

2

Hm, you would have to modify the HTML, but putting a div in the middle of a paragraph would result in invalid html

3

can be a span too

4

how would i modify the html?
thanks

5

Basically with a preg_replace_all() for a given pattern.

6

thanks @texnixe!
with some help of a friend i finally managed to convert the links to photoswipe links. i’ll post the code here, maybe someone will have the same issue some day.

<?php

/** @var \Kirby\Cms\Block $block */ ?>
<?php
// CONVERT FILE LINKS TO LIGHTBOX LINKS
// find file links and convert them to links with lightbox
// example: <a href="/@/file/abc123">Text</a> becomes:
// <span class="lightbox"><a href="/path/to/image.jpg" data-pswp-width="800" data-pswp-height="600">Text</a></span>

// regex to find file links
$regexToBeReplaced = '/<a href="\/@\/file\/([^"]+)"[^>]*>([^<]+)<\/a>/';

// get text content from block
$text = $block->text();

// replace file links with lightbox links
$text = preg_replace_callback(
    $regexToBeReplaced,
    // function to convert file links to lightbox links
    function ($matches) {
        // get the file by id
        $image = site()->index()->files()->findBy('uuid', 'file://' . $matches[1]) ?? null;

        // if the file is found, convert the link to a lightbox link
        if ($image) {
            $imageUrl = $image->url();
            $imageWidth = $image->width();
            $imageHeight = $image->height();
            $imageSrcset = $image->srcset([ 
                '400w'  => ['width' => 400, 'format' => 'webp'],
                '800w'  => ['width' => 800, 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'format' => 'webp']
                ]);
            $linkText = $matches[2];
            $description = $image->description();
            $copyright = $image->copyright();

            return sprintf(
                '<span class="lightbox"><a href="%s" data-pswp-width="%s" data-pswp-height="%s" data-pswp-srcset="%s">%s<span class="pswp-caption-content">%s<span class="lb-copyright">%s</span></span></a></span>',
                $imageUrl,
                $imageWidth,
                $imageHeight,
                $imageSrcset,
                $linkText,
                $description,
                $copyright
            );
        }

        // return original link if file not found
        return $matches[0];
    },
    $text
);

echo $text;

// if you want to see the html as string (for debugging)
// $htmlAsString = htmlspecialchars($text);
// echo $htmlAsString;

// REF. for preg_replace_callback: https://www.php.net/manual/en/function.preg-replace-callback.php

?>