Erhan is typing…

WebDevelopment , PHP, Javascript, CakePHP, ExtJS

Image Rotator For Your SilverStripe Application

| Comments

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.

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
1
2
3
4
5
6
7
8
9

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/

ImageRotator.ss
1
2
3
4
5
6
7
8
9
10
11
12
13

<?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

Flash.ss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!--
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:

Flash.ss
1

<% 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…

Comments