My first EE plugin

While making my second EE site, I needed a way to create a Slideshow from thumbnails. I found a slick JavaScript called Shadowbox that can display images, Flash, movies and more. It’s kind of like LightBox, but better and fully standards compliant (click the images of Hoss or Aral to test). Using the Shadowbox approach, you can accommodate users with anything from 2” to 30” screens easily. If a user have a nice, expensive 30”, why not give them a nice big image to feast their eyes on?

I really like EE, but the image handling is a bit weak.  I couldn’t find a user friendly way to associate a series of images with an entry, so I figured the easiest would be to have the user upload/add images separated by a comma and then do some clever parsing on this.

EE isn’t really clever at doing string parsing at all. You can enable PHP in the templates for complete flexibility, but that has some uncool security implications. I figured there had to be someone with a similar problem already, but I couldn’t find a plugin that could do what I wanted so I figured I’d roll my own. It was surprisingly easy and the result is the SplitAndWrap-plugin (feedback wanted!).

Here’s the doc on how it works:

Usage SplitAndWrap plugin for EE

Splits a string based on a delimiter and enables you to wrap code around the returned elements. The plugin works as a tag pair. You can wrap each returned element with code like this:

{exp:splitandwrap char="," str="image1.jpg,image2.jpg,image3.jpg"}
  <img src='{splitted}' width='65' height='30'/>
{/exp:splitandwrap}

This will produce an output like this:
<br /> <img src=‘image1.jpg’ width=‘65’ height=‘30’/><br /> <img src=‘image2.jpg’ width=‘65’ height=‘30’/><br /> <img src=‘image3.jpg’ width=‘65’ height=‘30’/><br />

The {splitted} variable will be replaced with each element across the loop. You’ll probably want to use this with a custom field, so to make a list of comma separated names, just do like this:

{exp:splitandwrap char="," str="{my_field_of_names}"}
  <li>{splitted}</li>
{/exp:splitandwrap}

Here is a more advanced example where I use a comma separated list of images with the excellent imagesizer plugin to produce a list of clickable thumbnails leading to the original image:

<ul class="img">
{exp:splitandwrap char="," str="{embed:images}" parse="inward"}
<li class="img"><a href="{splitted}" rel="shadowbox[myGallery];options={counterType:'skip',continuous:true,animSequence:'sync'}">
{exp:imgsizer:size src="{splitted}" width="65"}
<img src="{sized}" border="0" class="border_a"/>
{/exp:imgsizer:size}
</a></li>
{/exp:splitandwrap}
</ul>

Notice the parse=“inward” parameter. This ensures that the splitandwrap plugin is parsed before the imgsizer plugin. Without this, there’s no output. This output will work with another brilliant piece of code - Shadowbox.js - to produce a slideshow that both validates and looks good.

Shadowbox URL: http://mjijackson.com/shadowbox/
Imgsizer URL : http://www.lumis.com/

NOTE:
If used as a single tag, you can even use this plugin as general purpose string removal tool:

{exp:splitandwrap char=" " str="This is a sample text"}

The above will produce this output:

Thisisasampletext

(not really sure if that’s useful at all, but it’s an interesting side-effect)

Installing plugins in EE

Download and unzip this file and copy “pi.splitandwrap.php” to your plugins folder (/sysfolder/plugins/). That’s it 😊

The site I made this for is now live: variousarchitects.no Click a project and try the slideshow 😊