Display random images every time the page is accessed

Displays one or more random images from a media folder on a page.

Technical description

The Image Rotator is implemented as an XSLT Function - Composite.Image.ImageRotator. At least one media folder containing images is required.

How to implement Composite.Image.Rotator

  1. In the Layout or Content perpective, insert the Composite.Image.ImageRotator function ( Insert > Function) or add the following code:
     
    <f:function name="Composite.Media.ImageRotator" xmlns:f="http://www.composite.net/ns/function/1.0"> 
      <f:param name="MediaFolder" value="MediaArchive:a5160412-ffc0-4f1c-9443-9325a5c41452" /> 
      <f:param name="ImageCount" value="1" /> 
      <f:param name="UseAnimatedRotation" value="False" /> 
    </f:function>
  2. Specify the required parameter:
    • Media Folder: Specify the media folder to select images from to rotate on a page (for example, "/images") or set the value to "/" if you want to select images from the root directory.
  3. If necessary, set these optional parameters:
    • Image Count: The number of image to show at a time (1 by default)
    • Use Animated Rotation: When 'True' and the number of images is greater than one (Image Count > 1,) these images will rotate over and over without a page being refreshed. "False" by default.

IMportant Notes

Because of page caching, a randomly selected image will not change on a particular page when refreshed (F5) until the cache expires.

Customization

The layout can be customized via the style sheets (/Frontend/Composite/Media/ImageRotator/Styles.css).

Requirements

Composite C1 2.0 or later.

SHARE