Markdown grid for images

Kirby 2 Solved ✅
1

Hello everyone. I’m making my first kirby blog, and wanted to include an image grid that could be put anywhere in the post, to that effect:

so that it can take several images of similar ratio (6:4 here) and assign them widths ; 66% for large, 50% for medium and 33% for small – so that several combinations are possible

by far, I’m getting this by writing something like this into the .txt (that is the code for the grid pictured above)

`

(image: 1.jpg)
(image: gadget.jpg) (image: header.jpg)
` `
(image: future.jpg)
(image: camera3.jpg)
`

That may not look like a whole lot of tags, but the blog will be edited by others, so that will be too much, it also just looks quite clunky.

I would like to be able to achieve the same effect with markdown, so that It takes
something along the lines of
(gallery-row: img1.jpg imgclass:large | img2.jpg img3.jpg imgclass:large)
and outputs a row of grid

I tried other things, like the kirby-collage but it wasn’t quite right. I will be grateful for any suggestions on how to make it happen

2

You can find a tutorial on creating your own Kirbytags in the documentation.

A syntax that could work is something like this:

(gallery-row: img1.jpg:large, img2.jpg:small)

You can then split the value in your tag by comma and process the images. Untested example code:

<?php

kirbytext::$tags['gallery-row'] = array(
  'html' => function($tag) {
    $images = explode(',', $tag->attr('gallery-row'));
    
    $html = '<div class="row gallery-row">';
    foreach($images as $image) {
      // Remove space after the comma
      $image = trim($image);
      
      // Split by colon
      list($name, $size) = explode(':', $image);
      
      $html .= '<div class="gallery-image-' . $size . '">' . $tag->page()->image($name)->html() . '</div>';
    }
    
    return $html . '</div>';
  }
);
2 Likes
3

For sth like your original idea it could look like this:

In your text file:

(gallery-row: img1.jpg:large | img2.jpg, img3.jpg:small)

And your Kirbytag:

<?php kirbytext::$tags['gallery-row'] = array(
  'html' => function($tag) {
    $containers = explode('|', $tag->attr('gallery-row'));
    
    $html = '<div class="row gallery-row">';
    foreach($containers as $container) {
      // Remove space after the comma
      $container = trim($container);
      list($images, $size) = explode(':', $container);
      //get the image array
      $images = explode(',', $images);

      $html .= '<div class="gallery-image-' . $size . '">';
      foreach($images as $image) {
        // Remove space after the comma
        $image = trim($image);
        $html .= '<div><img src="' . $tag->page()->image($image)->url() . '"></div>';
      }
      $html .= '</div>';
    }
    
    return $html . '</div>';
  }
);
1 Like
4

Thank you two ever so much, it works!
You totally made my day :smile:

5

why can I get

Fatal error: Call to a member function url() on a non-object in /opt/lampp/htdocs/test/site/tags/gallery-row.php on line 17

when using your code here?

6

The image probably does not exist, so the url() method will throw an error.

Maybe you could replace this bit:

foreach($images as $image) {
        // Remove space after the comma
        $image = trim($image);
        $html .= '<div><img src="' . $tag->page()->image($image)->url() . '"></div>';
      }

with this:

foreach($images as $image) {
        // Remove space after the comma
        $image = trim($image);
        $img = $tag->page()->image($image);
        $html .= '<div><img src="' . $img? $img->url() : '' . '"></div>';
      }