Web Part: CMS Image Rotator

CMS Image Rotator Web Part¶

• 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.
    

Access¶

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¶

Edit properties¶

• 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¶

• 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¶

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