CMS Image Rotator Web Part
The CMS Image Rotator Web Part displays a random image on a web page.
Images can be displayed using two options:
- Display all images located in a folder.
- For best display, all images should be cropped to the same width and/or height.
- Images can be resized by the Web Part using the Image Layout property.
- Display images, based on an XML file. Images are assigned in the Image Rotator XML file.
- This option allows the user to set the width and/or height for each image.
An alternative Rotator Web Part is
RAD Rotator for Workflows used with Jetfire Workflows.
Access
The Web Part is accessed from the
CMS Designer Web Parts Library.
Image Rotator Features
- A random image is displayed
- A navigation URL may be assigned to the Image
- Alternate text may be set for the image
- Image Width and/or Height may be set per Image
- Keywords may be used to filter what images are displayed
- Image Weighting may be used to skew how often an image is displayed
- The user may select a specific image to display, based on links of the images in the XML file.
Image Rotator Editor
Editing the Image Rotator Part
The figure shows the editor for the Image Rotator Web Part. This is shown to the user, when the Image Rotator is edited.
Edit properties
Custom Edit properties include:
- Link to an Image Directory
- Enter the path to the directory that contains images. All and only images will be displayed.
- NOTE: The Image Definition File takes precedence over the Image Directory option.
- Link to an Image Definition File
- Enter the link to the XML file with the Image Rotator images
- Test the link to verify that the file can be found by the Web Part
- Rotation Time - the duration in milliseconds that an images is displayed.
- Show Links - if checked, displays the image name.
- Show Start Stop Links - if checked, allows user to start and stop the rotation.
- Image Layout - option for how images are sized in the Web Part.
- None - images default to left justification
- Center - images are centered in the Web Part
- Right - images are right justified
- Stretch - images are stretched to the fill the Web Part. Images may be distorted.
- Size to Height - images are re-sized to the height of the Web Part. Set the Height property in the Web Part.
- Size to Width - images are re-sized to the width of the Web Part. Set the Width property in the Web Part.
Image Rotator Sample XML file
The Image Rotator Xml file is based on the Image Rotator XML file. The XML file has the following elements:
Advertisements – The Advertisements block contains one or more Ad sections. Each Ad describes an Image. Properties for each Ad include:
- Image Url
- Values = Absolute or relative URL to the page.
- The path to the image file
- Height
- Values = number plus “px” to denote the height in pixels or number plus “%” to denote the height in percent.
- The height of this specific image, if not blank.
- Width
- Values = number plus “px” to denote the width in pixels or number plus “%” to denote the width in percent.
- The width of this specific image, if not blank.
- Navigate Url
- Values = Absolute or relative Url.
- The page to navigate to when the user clicks the image.
- Alternate Text
- Values = string
- This text is displayed to the user, when the mouse hovers over the image.
- Keyword
- Values = any strings, separated by semi-colons (;)
- Reserved for future use
- Impressions
- Values = any strings, separated by semi-colons (;)
- Reserved for future use
Sample XML file
The following xml snippet is a sample of the XML file used with the CMS Image Rotator.
To use the XML file for your application, download
Image Rotator sample xml file and modify it accordingly.
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements xmlns="http://schemas.microsoft.com/AspNet/SmartRotator">
<Ad>
<ImageUrl>~/images/WebTasks.jpg</ImageUrl>
<Height>400</Height>
<Width></Width>
<NavigateUrl>http://TrackerRealm.ca</NavigateUrl>
<AlternateText>Check out Tracker Tasks</AlternateText>
<Target></Target>
<Keyword>Workers</Keyword>
<Impressions>1</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/WebBlog.jpg</ImageUrl>
<Height>200</Height>
<Width></Width>
<NavigateUrl>http://TrackerRealm.ca</NavigateUrl>
<AlternateText>Check out the Tracker Blog</AlternateText>
<Target></Target>
<Keyword>Power Users</Keyword>
<Impressions>1</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/WebCalendar.jpg</ImageUrl>
<Height>300</Height>
<Width></Width>
<NavigateUrl>http://TrackerRealm.ca</NavigateUrl>
<AlternateText>Check out the Tracker Calendar</AlternateText>
<Target></Target>
<Keyword>Users</Keyword>
<Impressions>1</Impressions>
</Ad>
</Advertisements>