Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.

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)
<?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;
}
}
@jancbeck

This comment has been minimized.

Copy link

jancbeck commented Mar 23, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.