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) – we have a detailed Image Preparation Checklist to help you with this
- 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 freeFastStone 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:
Save your page and view it to see your new image rotator in action.
Improving page rendering by specifying the dimensions of the image rotator
It is highly recommended that you use the
width and
height parameters to specify the size of the image rotator. This helps speed up the amount of time it takes to render the image rotator in your browser.
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:
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:
Valid
align values are:
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:
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:
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:
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:
Where url could be any valid URL to another page or website.
Advanced – 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.
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
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).
Full Screen Image Rotators
By default the images in the rotators will display in their original dimensions.
If you wish the rotator to automatically fill the entire width/height of the screen, use the
fullscreen parameter:
When using this parameter, the images in the rotator need to be prepared carefully. Images look good when reduced, but not when enlarged.If your images are enlarged, you may get blurriness/pixelation on larger monitors. So you’ll get best results when the dimensions of your images are at at least 1,920px wide by 1,200 pixels high, or preferably 2,560 pixels wide by 1,600px high. If you prepare your images carefully, you can get high quality images at these dimensions and still keep them down to 100Kb-200Kb in physical file size.
We also recommend using the Raw Splash or Splash page template (see Attributes panel under Dashboard, Edit Page). The Splash page template will display the header, menu and footer, but does not include any sidebars or margins. The Raw Splash won’t display anything but what you place in the page.
If using the Raw Splash template, you can manually include an image at the top of your page, such as a replacement header or logo. You can use the
topoffset parameter to leave a gap at the top of the page. So if you include a 100px high image at the top of the page, you can offset the rotator images by 100px so they fill the page below your image at the top of the page.
For example:
would leave a 100 pixel gap at the top of the full screen rotator.
Note: The width and height parameters mentioned above are not necessary (and are ignored) for full screen rotators.
Note: The full screen rotator effect does not work reliably in Internet Explorer 6 when page content is placed over the top of the rotator. We recommend hiding the full screen rotator from Internet Explorer 6 users using the following custom CSS rule:
/* IE6: hide full screen rotators from Internet Explorer 6 users */
* html .fullscreen { display: none; }
Hover Navigation Effects
Additional advanced parameters are available for experienced web developers to implement hover navigation.
shownavigation=""
Controls the next/previous image navigation feature.
Accepted values:
false: (default) no navigation buttons are shown.
true: always show next/prev navigation buttons (like the simple image gallery plugin does).
onhover: only show the next/prev buttons while hovering over the image rotator.
stoponnavigationclick=""
Only applicable if
shownavigation is set to
true or
onhover.
Accepted values:
true: (default) when the next/previous navigation buttons are clicked, stop the image rotator from automatically rotating.
false: don’t stop the image rotator after using the navigation buttons.
