Kirby CMS : Figure Tag http://getkirby.com/forum/code-snippets/topic:70

readme.mdown

Figure Tag Extension for Kirbytext

Installation

Copy the code from figure.php and add it to site/plugins/figure.php (you have to create that file first of course :))

Usage

You can now add figures to your content like this:

(figure: myimage.jpg caption: This is a nice figure)

…or with more options…

(figure: myimage.jpg caption: This is a nice figure width: 300 height: 200)

This extends the default Kirby image tag, so you can use all the additional attributes for that. Please read more about it in the docs: http://getkirby.com/docs/formatting-text

Result

This produces the following output

<figure>
  <img src="http://yourdomain.com/content/example/myimage.jpg" width="300" alt="This is a nice figure" />
  <figcaption>This is a nice figure</figcaption>
</figure>

figure.php

<?php 

class kirbytextExtended extends kirbytext {
  
  function __construct($text=false, $markdown=true, $smartypants=true {
    
    parent::__construct($text, $markdown, $smartypants);
    
    // define custom tags
    $this->addTags('figure');
    
    // define custom attributes
    $this->addAttributes('caption');    
                    
  }  

  // define a function for each new tag you specify  
  function figure($params) {

    // we need to change this to make the image function work.    
    $params['image'] = $params['figure'];

    // try to fetch the caption from the alt text if not specified
    if(empty($params['caption'])) $params['caption'] = @$params['alt'];

    // try to fetch the alt text from the caption if not specified
    if(empty($params['alt'])) $params['alt'] = @$params['caption'];

    // start the html output        
    $html  = '<figure>';            
    $html .= $this->image($params);
        
    // only add a caption if one is available
    if(!empty($params['caption'])) {
      $html .= '<figcaption>' . $params['caption'] . '</figcaption>';            
    }
    
    $html .= '</figure>';            
  
    return $html;    

  }
    
}

Could it be used to insert multiple images in the figure?

Maybe in combination with CSS display: flex?