Kirbytextinline() lists

1

Hello!

I’m trying to replicate this kind of interaction onto kirby, https://dennishogan1.cargo.site/. (Client wants to be able to edit the content themselves using a panel interface, etc.)

I’ve been using kirbytextinline() to achieve the content extensions for the “read more” “read less” interaction, which is important for me in that it gives the appearance of the content simply growing/extending from the minimized version, but I noticed that the markdown for list items - disappears.

Screen Shot 2021-09-25 at 10.02.19 AM
Screen Shot 2021-09-25 at 10.02.19 AM1468×1000 74.8 KB

Screen Shot 2021-09-25 at 10.02.40 AM
Screen Shot 2021-09-25 at 10.02.40 AM1490×1320 225 KB

It seemed like the kirbyrawtext plugin was the solution to that, but it seems like it’s been discontinued? I was wondering if there was any easy solution to get the list formatting without having the extended text all come in new < p > tags.

2

How does the expanding part actually work? Could you share the code / kirbytext you are using? I have a solution that might work but need to see that first to see if its a fit.

3

Here’s the template:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?></title>
    <?= css('assets/css/index.css') ?>
    <?= js(['assets/js/jquery.js','assets/js/site.js',]) ?>
    </head>
<body>
    <div class="container">
        <main class="main">
            <?php foreach($site->children()->listed() as $item): ?>
                    <p>
                        <?php if ($item->excerpt()->isNotEmpty()): ?>
                            <?= $item->excerpt()->kirbytextinline() ?>
                        <?php endif ?>
                        <?php if ($item->text()->isNotEmpty()): ?>
                            <span class="readmore" id="<?= $page->title() ?>"><a href="#">(more)</a></span>
                                <span class="extension" id="<?= $page->title() ?>">
                                    <?= $item->text()->kirbytextinline() ?>
                                </span>
                            <span class="readless" id="<?= $page->title() ?>"><a href="#">(less)</a></span>
                        <?php endif ?>
                    </p>
                <?php endforeach ?>
            </main>
    </div>
</body>
</html>

Here’s the jquery for expanding/contracting:

$(document).ready(function() {
    console.log( "ready!" );

    $(".extension").hide();
    $(".readless").hide();

    $(".readmore").click(function(){
        $(this).next(".extension").show();
        $(this).parent().find(".readless").show();
        $(this).hide();
    });

    $(".readless").click(function(){
        $(this).prev(".extension").hide();
        $(this).parent().find(".readmore").show();
        $(this).hide();
    });

});
4

You can find a ktraw() field method for Kirby 3 here: k3-fieldmethods/index.php at master · texnixe/k3-fieldmethods · GitHub. These method removes all p tags from the field value.

1 Like
5

Thank you so much! :slight_smile: