Image Rotator For Your SilverStripe Application

I used SilverStripe to develop couple of projects and I really liked it. I am still a fan of CakePHP but you should give a try if you don’t want to build a new CMS from scratch with CakePHP.

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.

ss01

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”.

ss02

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…

  • http://inprogress! peter

    I worked through the above (a silverstripe newbie) but have come a bit unstuck, all of the above is done, but i still see none of my images, am guessing i am missing some sort of call to the javascript in the head tag as mentioned in flash.ss and or also have to download and install swfobject somewhere as well…

    a little lost at the moment, can someone shed some light?

  • http://www.insitesolutions.co.za Martin

    Sorry – should read: I tried to examine the result by browsing to home/ImageRotatorXML

  • http://www.insitesolutions.co.za Martin

    Hi
    Nice code. Unfortunately I can’t get it to work in a themed site. The part I don’t understand is how Silverstripe renders $BaseURL/ImageRotatorXML. There is no ImageRotatorXML class – should it automatically look for an ImageRotator template in the theme’s Templates folder? I tried to examine the result by browsing to home/ImageRotator and I get my page.ss template.
    Any help would be greatly appreciated!
    Thanks

  • Invader_Zim

    Hi!

    Thank you for this article. Works very well.

    Cheers