Add an Image Rotator to your website

You can create a set of images and add them to your OM4 website so they display in rotation – like a mini slide show.

You’ll need to activate the OM4 Simple Image Rotator plugin before you can use this (go to Dashboard, Plugins, Installed, then scroll down the list to find Simple Image Rotator and click Activate).

As this is a relatively new plugin, we haven’t published it for use outside OM4.

Prepare your images

For a good rotator you’ll need a set of images that:

are the same physical dimensions (for example, 300px wide by 200px high – the width/height will depend on where you want to use the rotator)
have been optimised in terms of file size (Kilobytes) so they don’t slow down loading of the whole page

Check out your images in Windows Explorer or the Mac Finder and make sure you know the dimensions and file size of each of the images you plan to use. You can use a simple image cropping tool to change the dimensions and file size if you need to:

On Mac, you can use Preview (part of Leopard) or Picturesque for Mac
If you use Windows you can get a Mac or use the free FastStone tools

If you are using images from your digital camera, make sure the image quality has been adjusted so the file size (in Kilobytes/Megabytes) is not too large. Aim for about 30-40Kb for smaller images, and no larger than 60-120Kb for full page size images.

It will help here if you standardise your file names – make them all lowercase and use hyphens instead of spaces. For example, instead of Blue Sky.jpg use blue-sky.jpg. This isn’t mandatory, it will just make it easier for you to work with the files.

Upload your images

Go to Dashboard, Media, Add New.

Select the image files and upload them to your website. Make a note of the file names AFTER uploading.

Note WordPress will automatically convert all spaces to hyphens and upper case to lower case. If you did this yourself before you uploaded, you won’t need to worry about file names changing.

When WordPress uploads to a standard OM4 community website, your image files are placed into the /files folder. So to reference a file later, you put /files in front of the file name. If you have an OM4 Standalone website, the files go into the /wp-content/uploads folder.

For the purposes of this example, I’ve used the folllowing 300px by 200px files (note I added the -rtr to the files when I cropped them for the rotator):
applesplash-rtr.jpg ladderintoocean-rtr.jpg greatoceanroad-rtr.jpg frogdipper-rtr.jpg clownfish-rtr.jpg brightonbeach-rtr.jpg

Set up your rotator

On the page you want your rotator to appear, add the simplerotator shortcode with the list of files separated by commas. Note the upload process puts the images into your /files folder (or /wp-content/uploads for standalone OM4 sites), so all file names will need this prefix.

The shortcode works like this:
[simplerotator] list of files separated by commas [/simplerotator]

Here is the shortcode with all the file names included:
[simplerotator]/files/applesplash-rtr.jpg, /files/ladderintoocean-rtr.jpg, /files/greatoceanroad-rtr.jpg, /files/frogdipper-rtr.jpg, /files/clownfish-rtr.jpg, /files/brightonbeach-rtr.jpg[/simplerotator]

Save your page and view it to see your new image rotator in action.

Randomising/Shuffling the order of the images

If you want the images in the rotator set to display in a random order on each page load, you can use the optional order parameter:

[simplerotator order="random"]/files/applesplash-rtr.jpg, /files/ladderintoocean-rtr.jpg, /files/greatoceanroad-rtr.jpg, /files/frogdipper-rtr.jpg, /files/clownfish-rtr.jpg, /files/brightonbeach-rtr.jpg[/simplerotator]

Valid values for the order parameter area normal (default) and random.

Positioning your rotator

If you want your image rotator to be left aligned, centered or right aligned in the page text, you can use the optional align parameter:

[simplerotator align=left]

Valid align values are:

left
center
right

Following is an example of a right aligned image rotator:

[simplerotator align=right]/files/applesplash-rtr.jpg, /files/ladderintoocean-rtr.jpg, /files/greatoceanroad-rtr.jpg, /files/frogdipper-rtr.jpg, /files/clownfish-rtr.jpg, /files/brightonbeach-rtr.jpg[/simplerotator]

Alternatively, if you wish for the rotator to be positioned above the main content of the website, you need to create a custom CSS rule such as the following:
#simplerotator_1 { position:absolute; right:6px; top:10px; }

This will position the rotator (using absolute positioning) at the top of the page, 10 pixels down from the bottom of the header, and 6 pixels to the left of the right hand edge of the page.

The CSS above also assumes you are trying to position the first rotator on the page. If you need to position more than one, then use the #simplerotator_2 selector.

Changing the timing for your rotator

By default your rotator will display images for a 5 second interval, and will transition to the next image over 2 seconds. You can change the interval and transition for each rotator by adding parameters to the simplerotator shortcode:
[simplerotator interval=x transition=y]

Here is our original example modified to use a 20 second interval and an 8 second transition:
[simplerotator interval=20 transition=8]/files/applesplash-rtr.jpg, /files/ladderintoocean-rtr.jpg, /files/greatoceanroad-rtr.jpg, /files/frogdipper-rtr.jpg, /files/clownfish-rtr.jpg, /files/brightonbeach-rtr.jpg[/simplerotator]

Delaying the start for your rotator

By default your rotator will start counting the interval time as soon as the page loads. By using the startdelay parameter, you can adjust this behaviour:
[simplerotator interval=x transition=y startdelay=z]

In this example, the first image transition in the rotator will be z seconds after the page loads. The transition will take y seconds, and then the next transition will begin x seconds after this.

Controlling the number of times the rotator loops/cycles

By default the rotator will cycle through an unlimited number of times. You can change this behaviour for each rotator by adding a cycles parameter to the simplerotator shortcode:
[simplerotator cycles=x]

The default value for the cycles parameter is 0 (unlimited). If cycles=1, the rotator will loop through all images once. If cycles=2, the rotator will loop through all images twice, etc.

Linking your rotator to another page

Similar to how you can link a piece of text to another page, you can also link your entire rotator to another page. So when someone clicks on any image in your rotator, they will be sent to the target page. This is achieved using the href parameter:

[simplerotator href="url"]

Where url could be any valid URL to another page or website. For example,

[simplerotator href="/url/to/page"]
[simplerotator href="http://domain.com/url/to/page"]
[simplerotator href="http://www.google.com"]

Placing a rotator using absolute positioning

You can place a rotator set in a precise position using x,y co-ordinates. For example, so it appears in the header area of your website.

Warning: this is quite advanced CSS. You can probably copy what is here and get things working, but getting a full understanding of CSS relative positioning concepts will require further research.

There are two steps involved:

Create the rotator set on the page it is to appear on
Create a custom CSS rule that positions the rotator with absolute positioning

You can see a website with 2 rotators positioned absolutely here: Nick Melidonis

Note that each rotator set automatically gets a unique id – #simplerotator_1 for the first rotator, #simplerotator_2 for the 2nd and so on.

Here are the CSS rules that position the two rotators. Note we have used the body.home selector to ensure that these rules only apply to rotators on the home page – you may need to use different selectors for different pages.

/* This rule allows use of absolute positioning relative to #page */
#page { position: relative; }
/* First rotator: set the height and width, and also offsets from the top and right to position the rotator */
body.home #simplerotator_1 { position: absolute; width: 167px; height: 121px; right: 206px; top: 0px; }
/* Second rotator: set the height and width, and also offsets from the top and right to position the rotator */
body.home #simplerotator_2 { position: absolute; top:0px; right: 33px; width: 206px; height: 281px; }
/* Remove all margins from the outside of the images */
body.home #simplerotator_1 img { margin: 0px !important; }
body.home #simplerotator_2 img { margin: 0px !important; }

The two rotators in this example are positioned relative to different sections of the page. The first one is relative to the overall page, so the offsets work from the top right corner of the web page. The second rotator has been placed inside a div that is a child of the #page element. Therefore the absolute positioning offsets for that rotator apply relative to the div it sits within, not #page itself.

Here are the two rotators – note the second rotator is in a div that has a big image displayed within it, so the rotator itself appears over the top of that image. Rotators will sit in front of all other page elements (except rollover menus).