Random Image

Topics: General, XSLT
Oct 13, 2011 at 4:21 PM

I am trying to use the Random Image function and call 3 different images at a time.  I modified the function and I am able to pull 3 random images, but how can I change my code (shown below) to not pull the same image more than once.  I would like to always pull 3 different images.  

Here is my xlst code (not sure if this is the best way to get it to pull 3 images, but it worked):

 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:in="http://www.composite.net/ns/transformation/input/1.0"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:msxsl="urn:schemas-microsoft-com:xslt"
	xmlns:user="urn:my-scripts"
	exclude-result-prefixes="xsl in msxsl user">

	<xsl:param name="images" select="/in:inputs/in:result[@name='GetIMediaFileXml']/IMediaFile" />

	<xsl:template match="/">
		<html>
			<head>
				<link rel="stylesheet" type="text/css" href="~/Frontend/Composite/Media/ImageRotator/Styles.css" />
			</head>
			<body>
				<div class="ImageRotator">
					<xsl:if test="count($images)>0">
						<xsl:apply-templates select="user:GetRandomNode($images)" />
					</xsl:if>
                                  <xsl:if test="count($images)>1">
						<xsl:apply-templates select="user:GetRandomNode2($images)" />
					</xsl:if>
                                  <xsl:if test="count($images)>2">
						<xsl:apply-templates select="user:GetRandomNode3($images)" />
					</xsl:if>
				</div>
			</body>
		</html>
	</xsl:template>

	<xsl:template match="IMediaFile[starts-with(@MimeType,'image')]">
		<img alt="image" src="~/Renderers/ShowMedia.ashx?id={@Id}" class="ImageRotator" />
	</xsl:template>

	<msxsl:script language="C#" implements-prefix="user">
		<msxsl:assembly name="System.Web" />
		<![CDATA[
			public XPathNavigator GetRandomNode(XPathNodeIterator nav)
			{
				int randomValue = (new Random()).Next(nav.Count);
                                var random1 = randomValue;
				while (nav.MoveNext())
					if (nav.CurrentPosition > randomValue)
						break;
				return nav.Current;
			}
          public XPathNavigator GetRandomNode2(XPathNodeIterator nav)
			{
				int randomValue2 = (new Random()).Next(nav.Count)+1;
				while (nav.MoveNext())
					if (nav.CurrentPosition > randomValue2)
						break;
				return nav.Current;
			}
          public XPathNavigator GetRandomNode3(XPathNodeIterator nav)
			{
				int randomValue3 = (new Random()).Next(nav.Count)+2;
				while (nav.MoveNext())
					if (nav.CurrentPosition > randomValue3)
						break;
				return nav.Current;
			}
		]]>
	</msxsl:script>

</xsl:stylesheet>

Coordinator
Oct 13, 2011 at 5:12 PM

Hi,

It looks like this Composite.Media.ImageRotator is one of old C1 packages and now it is more easy to get random data item in C1. We will re-view this package but you can consider next scenario:

1. Go to the Function Calls tab -> delete GetIMediaFileXml call -> instead  add Composite.Data.Types.IImageFile.GetIImageFileXml function call -> set next values:

Selected fields = select necessary fields (Id,...)

Filter =select function Composite.Data.Types.IImageFile.MediaFolderFilter -> Media Folder = Input parameter Media Folder

Randomized = select "Yes, randomize selection"

Page size=3

2. Go to the Template tab and the code will be something like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in ">
 
<xsl:param name="images" select="/in:inputs/in:result[@name='GetIImageFileXml']/IImageFile" />
<xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="~/Frontend/Composite/Media/ImageRotator/Styles.css" /> </head> <body> <div class="ImageRotator"> <xsl:apply-templates select="$images" /> </div> </body> </html> </xsl:template> <xsl:template match="IImageFile"> <img alt="image" src="~/Renderers/ShowMedia.ashx?id={@Id}" class="ImageRotator" /> </xsl:template> </xsl:stylesheet>


Coordinator
Oct 14, 2011 at 8:07 AM

Hi, webkey

We re-viewed this package and now a new version "1.1.1" is available. You can try it out, just uninstall the old version. It is possible now select the number of image to show at a time and use animated rotation.

For more details read this article - http://docs.composite.net/C1/Packages/CompositeMediaPackages/CompositeMediaImageRotator.aspx

Oct 15, 2011 at 5:02 AM

Thanks for the quick update.  I created a function based of your earlier work around - but I will give the new package a try.  Sounds like a great package and exactly what I was looking for.

Thanks for all the work you do to put out a great CMS!