My first EE plugin

25 Mar

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:

<img src=‘image1.jpg’ width=‘65’ height=‘30’/>
<img src=‘image2.jpg’ width=‘65’ height=‘30’/>
<img src=‘image3.jpg’ width=‘65’ height=‘30’/>

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 smile

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

25 March 2008 at 9:45 pm

5 Responses to My first EE plugin

  1. avatar photo
    Danny 29 April 2008 at 11:41 am #

    This is a great plugin. Combining this with Lumis’ Image Sizer plugin, and you got a great combo.

    One thing I have to ask though.. With such a large assortment of images coming up, is there any known method you would have in mind that could limit the display as per horizontal row?

    I may have up to 10 images using this plugin.. In hopes of not breaking my layout, I’d ideally like to limit it to only having an “X” amount per row.


    Regards,
    Danny!

  2. avatar photo
    Jensa 23 May 2008 at 5:08 am #

    Hi Danny,


    Just limit the width of the surrounding container to make the images “wrap”.

    J

  3. avatar photo
    Mrs. Flinger 18 June 2008 at 11:51 pm #

    Thank you! I have a client needing something similar so I’ll download and play with this. Thank you for your work.

  4. avatar photo
    Jean-Sien 05 December 2008 at 6:22 am #

    Thanks for this useful plugin.
    I have a question though, I am quite a beginner in EE, and I am wondering how you handle the images, do you make a custom field? how do you display images only relating to one entry? it would be wonderful if you could explain!

  5. avatar photo
    Jensa 12 December 2008 at 12:07 am #

    Hi Jean-Sien,

    I don’t think it’s actively developed still, but it’s clever thing as it only creates images when they change or the template change, so it all works really well with the EE caching.

    J

  6.