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;    

  }
    
}

Never mind, got around adding a class element myself: https://gist.github.com/3361532

Does line 5 need a closing bracket after true? function __construct($text=false, $markdown=true, $smartypants=true) {

Also, is there a way to add a class to the figure element itself?

If I add class:float-left it gets added to the img element and if I add it straight after figure class:float-left: it doesn't output.

And for some reason, empty p tags get added after the img, the fig caption and the figure - but maybe this is a markdown issue because it also occurs if straight html and markdownextra is used.

Sorry, just saw the gist about the option to add classes - still unsure about all the extra p tags though.

I need to have a multiline <figcaption> containing <p> tags and other formatting. No idea how to handle that. A last resort is to get the client to use pure HTML instead of Kirbytext Markdown for figures.

This is what I am attempting:

<figure>
    (youtube: http://www.youtube.com/embed/k85pIWGYLxg width: 480 height: 854)
    <figcaption>
        **"E²"**
        <p>Animated projection for the exhibition, COMPOSITE.</p>
        <p>Further detail here, with a new paragraph for each detail.</p>
    </figcaption>
</figure>

Random <br /> tags get inserted, but none of the proper formatting.