A Kirbytext extension for creating HTML5 figure tags with a thumbnail image, alignment class (e.g. left, right or center for an article), caption and an anchor which links the thumbnail to the full-size version of the image.

readme.md

Figure Extension for Kirbytext

This extension lets you add figures to your content files.

Installation

1. Put kirbytext.extended.php in your site/plugins folder
2. Make sure to install the thumb plugin as well

Note: To make sure the thumbs plugin will work, you must create a thumbs folder in your main folder of your site (next to Kirby's index.php) and make sure that it is writable by PHP.

Usage

Add figures to your content files like this:

(figure: photo.jpg)

(figure: photo.jpg caption: What a great photo! align: left)

(figure: photo.jpg align: left)

kirbytext.extended.php

<?php 

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

		// define custom attributes
		$this->addAttributes('caption', 'align');
                
  }


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

    global $site;

    $page       = ($this->obj) ? $this->obj : $site->pages()->active();
    $image  = $page->images()->find($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'];

		// html output
		if(!empty($params['align'])) {
			$html = '<figure class="align' . $params['align'] . '">';
		} else {
			$html = '<figure>';
		}

    $html .= '<a href="' . $image->url() . '"><img src="' . thumb($image, array('width' => 500, 'crop' => false), false) . '" alt="' . $params['alt'] . '" /></a>';

		// only add a caption if one is available
		if(!empty($params['caption'])) {
			$html .= '<figcaption>' . $params['caption'] . '</figcaption>';
		}

	$html .= '</figure>';

	return $html;

	}
}

This fork lets you place videos in your figure elements: https://gist.github.com/jancbeck/9723106
Note that it does not support thumbnail creation and alignment.