Random Images Specific to each section of the site - Extending umbraco

umbraco Forum » Extending umbraco » Extending umbraco » Random Images Specific to each section of the site

Random Images Specific to each section of the site

Options

Previous Topic · Next Topic

ProNotion

Posted: Thursday, April 24, 2008 1:14:06 PM

Rank: Enthusiast

Joined: 4/22/2008
Posts: 31
Location: Plymouth, UK

I am still getting to grips with Umbraco and have a requirement that I thought I would put to the community for advice on the best approach to take in order to fulfill the requirement.

The site I am currently working on requires that for each section of the site x number of images can be defined that are specific to a section of the site and then these header images if you like are then randomly loaded on the parent and child pages within that section each time they are loaded. I need the end users to be able to add and select the images for the sections of the site.

Thanks, Si

sjors

Posted: Thursday, April 24, 2008 1:38:30 PM

Rank: Fanatic

Joined: 7/20/2006
Posts: 407
Location: Amsterdam

You can use a multi media picker to select the images required for that section, in XSLT you have to output the right ones.

You can also define different maps in the media section offcourse, and pick a random from lower.

imayat12

Posted: Thursday, April 24, 2008 1:47:28 PM

Rank: Addict

Joined: 7/19/2006
Posts: 542
Location: Preston, UK

Pronotion,

I have done this before but we had bank of images and macro randomly displayed only one. The xslt looks like

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library"
  xmlns:myFuncs="urn:my-scripts"
  exclude-result-prefixes="msxml myFuncs umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>

<xsl:param name="currentPage"/>

<xsl:variable name="imageRoot" select="/macro/startMediaNode"/>

<msxsl:script implements-prefix="myFuncs" language="JavaScript">

<![CDATA[

var myArray = new Array();

function random(){

  var index = Math.floor(Math.random() * myArray.length);
  return myArray [index];
}

function addtoArray(item){
  myArray.push(item);

}

]]>

</msxsl:script>

<xsl:template match="/">

<xsl:comment> start of display random image</xsl:comment>




<xsl:call-template name="buildArray">
  <xsl:with-param name="arrayNodes" select="umbraco.library:GetMedia($imageRoot/node/@id, 'true')/node/data[@alias='umbracoFile']"/>
</xsl:call-template>



<img alt="Section image" border="0">
<xsl:attribute name="src">
  <xsl:value-of select="myFuncs:random()"/>
</xsl:attribute>
</img>


<xsl:comment> //end of display random image</xsl:comment>

</xsl:template>

<xsl:template name="buildArray">
<xsl:param name="arrayNodes"/>

  <xsl:for-each select="$arrayNodes">
      <xsl:value-of select="myFuncs:addtoArray(string(./text()))"/>
  </xsl:for-each>

</xsl:template>

</xsl:stylesheet>

You use this but as it stands you would have to add the macro to each section page and pass into it the gallery you want to use. In my case there was only the one gallery and i had a section template and i inserted the macro there.

Regards

Ismail

Level 2 certified. If it aint broke dont fix.

timgaunt

Posted: Friday, April 25, 2008 9:27:17 AM

Rank: Aficionado

Joined: 10/31/2007
Posts: 109
Location: Birmingham (UK)

Check out my blog as I've done just this: http://blogs.thesitedoctor.co.uk/tim/CategoryView,category,Umbraco.aspx

It outputs a string with the URL of the image in it which I then used to update a CSS property for the header on the page itself. Works really well, you could easily adapt it if you wanted to output the image tag itself.

Tim

Managing Director at The Site Doctor Ltd - My personal blog is here - Umbraco Newbie ;)

saelfaer

Posted: Sunday, May 25, 2008 11:57:15 AM

Rank: Newbie

Joined: 5/14/2008
Posts: 15
Location: Brugge Belgium

Hi there,

i changed your script a little, to work with my idea
i don't display a random media item, but a random Photo document type from the content tree
(i got a gallery on my website, and in the sidebar it displays a random photo from the gallery)

though i got 1 question, it shows the picture nice and perfect
but how can i adjust the script even more, that it actually links to the right photopage?
the problem is that the array does not contain the photo document types but the images
so i will probably have to rewrite alot for it to contain the photo document types with which i can then select the pic to display and the ID to link to... ?

Code:

my content tree goes like this:

- Photos
- PhotoFolder
- Photo (with an upload box for an image...) umbracoFile

then, i have the XSLT file

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
xmlns:myFuncs="urn:my-scripts"
exclude-result-prefixes="msxml myFuncs umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>

<xsl:param name="currentPage"/>
<xsl:variable name="level" select="2"/>


<msxsl:script implements-prefix="myFuncs" language="JavaScript">
<![CDATA[
var myArray = new Array();

function random(){
var index = Math.floor(Math.random() * myArray.length);
return myArray [index];
}

function addtoArray(item){
myArray.push(item);
}
]]>

</msxsl:script>

<xsl:template match="/">
<xsl:call-template name="buildArray">
<xsl:with-param name="arrayNodes" select="$currentPage/ancestor-or-self::node [@level=$level]//node [@nodeTypeAlias='Photo']/data[@alias='umbracoFile']"/>
</xsl:call-template>

<div style="float: left; width: 150px; margin-left: 15px; margin-right: 15px">
  
  <a href="#">
      <img>
          <xsl:attribute name="src">
          /umbraco/imagegen.aspx?image=<xsl:value-of select="myFuncs:random()"/>&width=150
          </xsl:attribute>
      </img>
  </a>
</div>
</xsl:template>

<xsl:template name="buildArray">
<xsl:param name="arrayNodes"/>

<xsl:for-each select="$arrayNodes">
<xsl:value-of select="myFuncs:addtoArray(string(./text()))"/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Umbraco Level 2 Certified

ProNotion

Posted: Thursday, June 05, 2008 12:34:21 PM

Rank: Enthusiast

Joined: 4/22/2008
Posts: 31
Location: Plymouth, UK

timgaunt wrote:

OK this worked great but I have had to make some amendments to it so that if a specific image is selected it displays that instead if trying to choose a random photo. I think I have been staring at it too long and can't find my mistake as what is happening is that I keep getting no output on some pages on a random basis even though parent pages have media defined - any ideas?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:math="urn:schemas-hizi-nl:math"
xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
exclude-result-prefixes="msxml Exslt.ExsltMath Exslt.ExsltStrings math umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>
<xsl:param name="documentTypeAlias">HomePage</xsl:param>

<msxml:script language="JavaScript" implements-prefix="math">
function random(numDie,numMax,numMin){
if (numMin==null){numMin=1;}
var sum=0;
for (var index=0;index<numDie;index++){
sum+=Math.floor(Math.random()*(numMax-numMin) + numMin);
}
return "" + sum;
}
function floorme(numFloor){
return "" + Math.floor(numFloor);
}
</msxml:script>

<xsl:variable name="StartNode">
<xsl:choose>
<xsl:when test="string($currentPage/ancestor-or-self::node [string(data[@alias='HeaderImagesFolder'])!=''][1]) != ''">
<xsl:value-of select="$currentPage/ancestor-or-self::node [data[@alias='HeaderImagesFolder']!=''][1] /data[@alias='HeaderImagesFolder']" />
</xsl:when>
<xsl:otherwise>1408</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<xsl:variable name="parent" select="umbraco.library:GetMedia($StartNode, 'false')" />
<xsl:variable name="random" select="math:random(1, count($parent/node)+1, 1)"/>

<xsl:template match="/">

<xsl:if test="string($currentPage/@nodeTypeAlias) != $documentTypeAlias">
  <xsl:choose>
          <xsl:when test="count($parent/node) > 1">
              <xsl:for-each select="$parent/node">
                  <xsl:if test="position()=$random">
                      <xsl:if test="./data [@alias = 'umbracoExtension'] = 'gif' or ./data [@alias = 'umbracoExtension'] = 'jpg' or ./data [@alias = 'umbracoExtension'] = 'png'">
<style type="text/css">
#secondaryPageHeader{ background-image: url(<xsl:value-of select="./data [@alias = 'umbracoFile']"/>); }
</style>
                      </xsl:if>
                  </xsl:if>
              </xsl:for-each>
          </xsl:when>
      <xsl:otherwise>
      <style type="text/css">
      #secondaryPageHeader{ background-image: url(<xsl:value-of select="$parent/data [@alias = 'umbracoFile']"/>); }
      </style>
      </xsl:otherwise>
  </xsl:choose>
</xsl:if>
</xsl:template>
</xsl:stylesheet>

VirtualRichard

Posted: Thursday, June 05, 2008 1:38:42 PM

Rank: Aficionado

Joined: 9/17/2007
Posts: 172
Location: London, UK.

You might also find my unique random image script / xslt has something you can use. You can find that in this post.

Richard

2 * 3 * 3 * 37 : The prime factorisation of The Beast.

ProNotion

Posted: Monday, June 09, 2008 10:44:16 PM

Rank: Enthusiast

Joined: 4/22/2008
Posts: 31
Location: Plymouth, UK

VirtualRichard wrote:

You might also find my unique random image script / xslt has something you can use. You can find that in this post.

Richard

I appreciate the advice and will certainly look at the post but I would also like to identify the problem with my existing solution for my own piece of mind.

Thanks, Simon

ProNotion

Posted: Tuesday, June 10, 2008 2:14:30 PM

Rank: Enthusiast

Joined: 4/22/2008
Posts: 31
Location: Plymouth, UK

For anyone that is interested I seem to have fixed the issue with the blanks appearing by changing the following line:

Code:

<xsl:variable name="random" select="math:random(1, count($parent/node)+1, 1)"/>

Code:

<xsl:variable name="random" select="math:random(1, count($parent/node)-1, 1)"/>

Always the simple things that seem to waste hours of my time tracking down :(

Users browsing this topic

Guest

umbraco Forum » Extending umbraco » Extending umbraco » Random Images Specific to each section of the site

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.