Does Column Plugin work with images?

Kirby 3 Solved ✅
1

Hi I’m using the Columns plugin provided in the Kirby Documentation here: https://getkirby.com/docs/cookbook/extensions/columns-in-kirbytext

I want to know if it’s possible to use the columns to separate images? I’ve tried placing some images into the kirby text field but it seems to be formatting the link wrong. The link comes up:

<img alt="" src="http://localhost:8888/starterkit-master/20_c217.jpg">

as opposed to:

<img alt="" src="http://localhost:8888/starterkit-master/media/pages/introduction/2590177253-1559230882/20_c217.jpg">

I’m using the following to call on the field:

<?= $section->text()->kirbytext() ?>
2

Works for me so far. And we are using it on the getkirby.com website with images all the time.

E.g. if I put this into album.txt in the animals page in the Starterkit:

Text:

Lorem ipsum dolor set mater

(columns…)

(image: abba.jpg)

++++

(image: dumbo.jpg)

(…columns)

I get this:

<div class="columns">
  <div class="column">
    <figure>
      <img alt="A colorful fish" src="http://localhost/st2/media/pages/photography/animals/2103495130-1559227142/abba.jpg">
    </figure>
  </div>
  <div class="column">
    <figure>
      <img alt="An african elephant walking towards the camera" src="http://localhost/st2/media/pages/photography/animals/1313678316-1559224791/dumbo.jpg">
    </figure>
  </div>
</div>
3

I put the following code into
site/plugins/columns/index.php

<?php
Kirby::plugin('kirby/columns', [
  'hooks' => [
    'kirbytags:before' => function ($text) {

      $text = preg_replace_callback('!\(columns(…|\.{3})\)(.*?)\((…|\.{3})columns\)!is', function($matches) use($text) {

        $columns        = preg_split('!(\n|\r\n)\+{4}\s+(\n|\r\n)!', $matches[2]);
        $html           = [];
        $classItem      = option('kirby.columns.item', 'column');
        $classContainer = option('kirby.columns.container', 'columns');

        foreach($columns as $column) {
            $field  = new Field(page(), '', trim($column));
            $html[] = '<div class="' . $classItem . '">' . kirbytext($field) . '</div>';
        }

        return '<div class="' . $classContainer . '">' . implode($html) . '</div>';

      }, $text);

      return $text;
    }

  ]
]);

Along with this in
assets/css/index.css

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: -1rem;
  margin-right: -1rem;
}

.column {
  flex: 0 1 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: 100%;
}

@media (min-width: 790px) {
  .column {
    flex: 1;
  }
}

Am I missing something?

4

What is $section? Looks like it doesn’t get the page reference right.

5

It’s part of a foreach loop since I’m having all my pages just show up on the homepage.

<div class="bdwrap">
<?php foreach ($pages->listed() as $section): ?>
<div class="section">
<h1><?=$section->title() ?></h1>
<hr>
<?= $section->text()->kirbytext() ?>
</div>

<?php endforeach ?>
</div>
6

Let me give this a try…:walking_woman:

Ok, right, it only works on the page itself, not when called from another page.

7

Is there any way to make it work when being called from the other page?

8

I’m on it…

9

Yep, there an bug in the plugin, this will work:

<?php
Kirby::plugin('kirby/columns', [
  'hooks' => [
    'kirbytags:before' => function ($text, array $data = []) {

      $text = preg_replace_callback('!\(columns(…|\.{3})\)(.*?)\((…|\.{3})columns\)!is', function($matches) use($text, $data) {

        $columns        = preg_split('!(\n|\r\n)\+{4}\s+(\n|\r\n)!', $matches[2]);
        $html           = [];
        $classItem      = $this->option('kirby.columns.item', 'column');
        $classContainer = $this->option('kirby.columns.container', 'columns');

        foreach($columns as $column) {
            $html[] = '<div class="' . $classItem . '">' . $this->kirbytext($column, $data) . '</div>';
        }
        
        return '<div class="' . $classContainer . '">' . implode($html) . '</div>';

      }, $text);

      return $text;
    }

  ]
]);

I’ve updated the recipe.

1 Like
10

Thank you! This works perfectly :slight_smile:

11

Please update plug-in.
The error still exists and your code helped me to fix the error.
I mean that one: https://getkirby.com/docs/cookbook/extensions/columns-in-kirbytext

I had an issue with that part:
$columns = preg_split(’!(\n|\r\n)+{4}\s+(\n|\r\n)!’, $matches[2]);
and those two slashes (\

Thanks!

1 Like
12

Dear Texnixe,

It looks like the buggy code is back in the recipe.
The one above works, the one on https://getkirby.com/docs/cookbook/extensions/columns-in-kirbytext
does not.

13

Ok, the backslashes need to be escaped to appear correctly on the site in both occurrences. Should be fixed now.

1 Like