I want to show you how easy to add an image rotator to your SilverStripe site by using JW Image Rotator. You can see it in action at sumpa.com.tr.

First download the greatest flash image rotator, JW Image Rotator. Then copy/move it to your SilverStripe project folder. I prefer “images” folder.

In order to add or remove new images (or swf files) to your rotator easily, we are going to use a folder in our “Uploads” directory and list all the files in this folder. Let’s assume that our directory name is “flash”. To do that, go to your admin panel in SilverStripe, switch to “Files & Images” tab in your menu and create a new directory called “flash”.

In your Page class, define a new method called ImageRotator().

// myproject/code/Page.php
class Page extends SiteTree {
  static $db = array();
  static $has_one = array();
  function ImageRotator() {
    return DataObject::get('File', 'ClassName <> "Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder" AND Name = "flash" LIMIT 0,1)');
  }
}

Create a new file “ImageRotator.ss” in “myproject/templates/”

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
  <% if ImageRotator %>
    <% control ImageRotator %>
    <track>
      <title>$Title.XML</title>
      <location>$BaseHref$Filename.XML</location>
    </track>
    <% end_if %>
  <% end_control %>
  </trackList>
</playlist>

Create a new file “Flash.ss” in “myproject/templates/Includes”

<!--
Don't change the "file" variable. This is the URI of our XML which contains images
You can change other settings or add/remove.
-->
<script type="text/javascript">
var introFlashvars = {
  width: "950",
  height: "300",
  file: "$URLSegment/ImageRotatorXML",
  shownavigation: false,
  screencolor: "0xFFFFFF",
  rotatetime: 15
};
var params = {
  wmode: "transparent"
}
</script>
<!--
Following div with id "Intro" is used as a container for our image rotator.
Browsers which are not supporting Javascript, "dummyimage.jpg" image linked to the home page is displayed
Don't forget to add swfobject.js into your head tag!
You can download it from http://code.google.com/p/swfobject/
-->
<div id="Intro"><a href="/"><img src="dummyimage.jpg" /></a></div>
<script type="text/javascript">
  swfobject.embedSWF("$ThemeDir/images/imagerotator.swf", "Intro", introFlashvars.width, introFlashvars.height, "8", false, introFlashvars, params);
</script>

We complete the steps to create our rotator. Now, you can call it from any page that you want with the following include directive:

<% include Flash %>

Upload your images and swf files into your “flash” directory and open the page by adding “?flush=1″ to URI. It will refresh the cache.

I know, it should be a widget so that it can easily be added to the pages without hardcoding. I am not planning to do that kind of work but if you find it useful, convert it to a widget and share with community. You are free to do that! No license, no restrictions…

Contributions are welcome…