A Kirbytext extension that lets you add HTML5 figure tags for videos and images.

readme.md

Figure Extension for Kirbytext

This extension lets you add figures to your content files. It supports video files.

Installation

1. Put kirbytext.extended.php in your site/plugins folder
2. Make sure to install the video plugin for video support

Usage

Add figures to your content files like this:

(figure: photo.jpg caption: What a great photo! link: flickr.com)

And for videos just use a video as a filename:

(figure: video.mp4 caption: My cat width: 640 height: 480)

Use multiple file formats by specifying "webm", "ogv" and "mp4":

(figure: video.mp4 webm: video.webm webm: video.ogv)

kirbytext.extended.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', 'thumb', 'preload', 'controls', 'mp4', 'webm', 'ogv');

  }

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

    // 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'];

    $page = $this->relatedPage();
    $video = $page->videos()->find($params['figure']);

    if ( $video ) {

      $args = array( 'videos' => array( $video ));

      if (! empty( $params['thumb'] )) {
        $args['thumb'] = $page->images()->find($params['thumb']);
      }
      if ( isset( $params['ogv'])&& $webm = $page->videos()->find($params['webm']) ) {
        $args['videos'][] = $webm;
      }
      if ( isset( $params['mp4'] ) &&$mp4 = $page->videos()->find($params['mp4'])) {
        $args['videos'][] = $mp4;
      }
      if ( isset( $params['ogv'] ) && $ogv = $page->videos()->find($params['ogv'])) {
        $args['videos'][] = $ogv;
      }

      ob_start();

      snippet('video', array_merge( $params, $args ));

      $figure = ob_get_clean();

    } else {
      // we need to change this to make the image function work.
      $params['image'] = $params['figure'];
      $figure = $this->image( $params );
    }

    // start the html output
    $html  = '<figure>';

    $html .= $figure;

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

    $html .= '</figure>';

    return $html;

  }

}