Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Niels Kristiansen 166 posts 382 karma points
    May 20, 2010 @ 10:26
    Niels Kristiansen
    0

    One single random image/picture from a media folder

    Hi,

    I don't know why, but I can't get the random image to work at all. All the solutions I found here in the forum says Value was either too large or too small for an Int32.

    I use the following XSLT code to pick up the media folder:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <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:Exslt.ExsltMath="urn:Exslt.ExsltMath"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltMath">


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

    <xsl:param name="currentPage"/>
    <xsl:variable name="bannerFolder" select="1264"/>

    <!-- ============================================================= -->

    <xsl:template match="/">
    <xsl:variable name="numNodes" select="count(umbraco.library:GetXmlNodeById($bannerFolder)/node)"/>
    <xsl:variable name="random" select="floor(Exslt.ExsltMath:random() * $numNodes) + 1"/>

    <xsl:variable name="imageID" select="umbraco.library:GetXmlNodeById($bannerFolder)/node [position() = $random]/data [@alias='bannerImage']"/>
    <img alt="Our Banner Image">
    <xsl:attribute name="src">
    <xsl:value-of select="umbraco.library:GetMedia($imageID, 0)/data [@alias='umbracoFile']"/>
    </xsl:attribute>
    </img>
    </xsl:template>

    <!-- ============================================================= -->

    </xsl:stylesheet>

    The number 1264 is picked from the Media Archive:

    - Media Archive
       - Background picture (1264)

    There is 4 pictures in that folder at the moment

    I don't know what I should do to remove this error. Anyone who can see what the problem could be?

    I'm running Umbraco 4.0.3

     

    Kind regards,

    Niels

  • Rich Green 2246 posts 4008 karma points
    May 20, 2010 @ 10:32
    Rich Green
    0

    Tick the "Skip testing" checkbox, this is a common problem as the editor cannot validate one of the values.

    More details and workaround here http://forum.umbraco.org/yaf_postst3143_NiceUrl-failing-on-valid-node.aspx

     


  • Niels Kristiansen 166 posts 382 karma points
    May 20, 2010 @ 10:48
    Niels Kristiansen
    0

    If I do that, instead I get the following error:

    Error parsing XSLT file: \xslt\randomFrontImg.xslt
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    May 20, 2010 @ 10:52
    Jan Skovgaard
    0

    Hi Niels

    Try adding this string to your resulting page with the error: ?umbDebugShowTrace=true - now you'll get some debugging information, which can maybe help you.

    If there are some errors in the XSLT it will be highlighted in red. You can't miss it.

    Please feel free to post the error in here if it gives you any.

    /Jan

  • Niels Kristiansen 166 posts 382 karma points
    May 20, 2010 @ 11:42
    Niels Kristiansen
    0

    Hi Jan,

    Looking there is no error there related to the background front img.

    Here is the link for the testsite: http://red.nikri.dk. I have turned of the existing static background picture.

    /Niels

  • Niels Kristiansen 166 posts 382 karma points
    May 20, 2010 @ 11:43
    Niels Kristiansen
    0

    Hi Jan,

    There is no error related to the background front img.

    Here is the link for the testsite: http://red.nikri.dk . I have turned of the existing static background picture.

    /Niels

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    May 20, 2010 @ 12:18
    Douglas Robar
    3

    Hi, Niels,

    The problem is not so much with the xslt but with the fact that this xslt is not designed to work directly against the media section. I would guess it was designed to get images saved in the content tree that were associated with an upload datatype.

    The two approaches are similar but not the same.

    Since you said you had 4 images in a folder in the MEDIA section, this would be the way to handle it...

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <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:Exslt.ExsltMath="urn:Exslt.ExsltMath"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltMath">


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

    <xsl:param name="currentPage"/>
    <xsl:variable name="bannerFolder" select="1264"/>

    <!-- ============================================================= -->

    <xsl:template match="/">
    <xsl:variable name="bannerFolderNodes" select="umbraco.library:GetMedia($bannerFolder, true())" />
    <xsl:variable name="numNodes" select="count($bannerFolderNodes/node)"/>
    <xsl:variable name="random" select="floor(Exslt.ExsltMath:random() * $numNodes) + 1"/>

    <xsl:variable name="image" select="$bannerFolderNodes/node [position() = $random]" />
    <img alt="Our Banner Image">
    <xsl:attribute name="src">
    <xsl:value-of select="$image/data [@alias='umbracoFile']"/>
    </xsl:attribute>
    </img>
    </xsl:template>

    <!-- ============================================================= -->

    </xsl:stylesheet>

     

    The code does the following...

    Get all the images below the $bannerFolder, whose ID you've pre-defined in the $bannerFolder variable. Because the GetMedia() call is relatively slow we'll save the output to a variable called banerFolderNodes that contains all the data we'll later need.

    We then count the number of nodes and create a random number between 1 and the number of nodes in the media folder.

    Then we select a single, random node from all of the images in the $bannerFolderNodes list, saving it to the $image variable.

    At this point the work is basically done and we only need to create the <img /> tag, by getting the 'umbracoFile' information from the image node.

     

    Hope this helps.

    cheers,
    doug.

  • Paulo Paiva 7 posts 28 karma points
    May 20, 2010 @ 12:27
    Paulo Paiva
    0

    Hello,

     

    I think this will solve your problem:

    <xsl:template match="/">
        <xsl:variable name="numNodes" select="count(umbraco.library:GetMedia($bannerFolder, 1)/node)"/>
        <xsl:variable name="random" select="floor(Exslt.ExsltMath:random() * $numNodes) + 1"/>
    
        <img alt="Our Banner Image">         <xsl:attribute name="src">    <xsl:value-of select="umbraco.library:GetMedia($bannerFolder, 1)/node [position() = $random]/data"/>         </xsl:attribute>     </img> </xsl:template>

     

    I changed the GetXmlNodeById for the GetMedia in the count nodes, and then output directly that node.

     

    Hope that it solves your problem.

    Paulo

  • Niels Kristiansen 166 posts 382 karma points
    May 20, 2010 @ 12:37
    Niels Kristiansen
    0

    Hi Paulo & Douglas,

    Thanks both for the reply. I was trying out Douglas version and it just work like a charm :) I actually think it was your code I used at first Douglas, if I'm not wrong.

    Again, thanks a lot for the help from all of you.

     

    Kind regards,

    Niels

  • Damiaan 442 posts 1301 karma points MVP 6x c-trib
    Nov 23, 2010 @ 00:21
    Damiaan
    0

    Hi

    I try to get this code working with the 4.5 schema, but I can't get this get right. 

    Can someone help?

    Thanks a lot

    Kind regards

  • Owen Hope 119 posts 140 karma points
    Nov 23, 2010 @ 00:42
    Owen Hope
    1

    Try this implementation I just used it in my 4.5.2 install:

     

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

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

      <xsl:param name="currentPage"/>

      <xsl:variable name="maxItems" select="number(25)" />

      <xsl:template match="/"> //this is where you set your default image folder
        <xsl:variable name="mediaFolderID" select="1074" />
        <xsl:if test="$mediaFolderID &gt; 0">
          <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 1)" />
            <xsl:if test="count($mediaID//Image) &gt; 0">
              <xsl:for-each select="$mediaID//Image">
                <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
                  <xsl:if test="position() = 1">
                     <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
                  </xsl:if>
              </xsl:for-each>
            </xsl:if>
         </xsl:if>
      </xsl:template>

      <msxsl:script language="c#" implements-prefix="randomTools">
        <msxsl:assembly href="../bin/umbraco.dll"/>
        <![CDATA[
            /// <summary>
            /// Gets a random integer that falls between the specified limits
            /// </summary>
            /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
            /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
            /// <returns>A random integer within the specified range</returns>
            public static int GetRandom(int lowerLimit,int upperLimit) {
                Random r = umbraco.library.GetRandom();
                int returnedNumber = 0;
                lock (r)
                {
                    returnedNumber = r.Next(lowerLimit, upperLimit);
                }
                return returnedNumber;
            }
        ]]>
      </msxsl:script>
    </xsl:stylesheet>

     

    Goodluck!

     

    Owen

  • Damiaan 442 posts 1301 karma points MVP 6x c-trib
    Nov 23, 2010 @ 20:22
    Damiaan
    0

    Thanks a lot!  It's working flawless!

  • MartinB 411 posts 512 karma points
    Jun 11, 2011 @ 18:26
    MartinB
    0

    Owen, you're a star.

    Here's an example based on Owens code with the addition of links on the images (create a new datatype called Header with the attributes of the image datatype and then add the "headerLink" property under "Generic properties" as a textfield. Or just add the headerLink property to the existing image datatype

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

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

    <xsl:param name="currentPage"/>

    <xsl:variable name="maxItems" select="number(1)" />

    <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="1084" />
    <xsl:if test="$mediaFolderID &gt; 0">
    <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 1)" />
    <xsl:if test="count($mediaID//Image) &gt; 0">
    <xsl:for-each select="$mediaID//Image">
    <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
    <xsl:if test="position() = 1">

    <xsl:choose>
    <xsl:when test="./headerLink !='' ">
    <a href="http://{./headerLink}" title="{./data [@alias='headerLink']}">
    <img>
    <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
    </img>
    </a>
    </xsl:when>
    <xsl:otherwise>
    <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
    </xsl:otherwise>
    </xsl:choose>

    </xsl:if>
    </xsl:for-each>
    </xsl:if>
    </xsl:if>
    </xsl:template>

    <msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
    /// <summary>
    /// Gets a random integer that falls between the specified limits
    /// </summary>
    /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
    /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
    /// <returns>A random integer within the specified range</returns>
    public static int GetRandom(int lowerLimit,int upperLimit) {
    Random r = umbraco.library.GetRandom();
    int returnedNumber = 0;
    lock (r)
    {
    returnedNumber = r.Next(lowerLimit, upperLimit);
    }
    return returnedNumber;
    }
    ]]>
    </msxsl:script>
    </xsl:stylesheet>
  • MartinB 411 posts 512 karma points
    Jun 11, 2011 @ 18:35
    MartinB
    0

    Sorry, MediaType under "Settings", not Datatype.

  • Thomas Egebrand Gram 63 posts 138 karma points
    Dec 10, 2011 @ 20:23
    Thomas Egebrand Gram
    0

    Thanks Owen,

    Your script worked perfectly for me 4.7 installation of Umbraco.
    Now, instead of displaying an actual image, i converted this into creating a style property, if you for example would want a random background.

    I changed the:

    <imgsrc="{umbracoFile}"alt=""width="{umbracoWidth}"height="{umbracoHeight}"/>

    Into:

    <style type="text/css">body {background:url("<xsl:value-of select="umbracoFile"/>") no-repeat top center fixed #58585A;}</style>

    I hope this may someone else looking for a solution on how to do this! :) Have a nice evening everyone.

    // Thomas G

  • Gus Deadman 45 posts 65 karma points
    Jun 28, 2012 @ 17:42
    Gus Deadman
    0

    I used Owen's adaptation of Douglas's code with 4.7 and it worked although there were three things;

    1. The comment "//this is where you set your default image folder" showed up on the final page until I removed it entirely, adding an extra slash didn't remove it, but I imagine this is just a syntax problem
    2. Changing the "<xsl:variablename="maxItems"select="number(25)"/>" number didn't seem to affect anything but then the variable doesn't seem to be used elsewhere in the file, so I'm not sure why it's there.
    3. Sometimes no image will be shown

    I can live with the first two but the last makes the whole thing less useful as there's not even a place holder just a full stop instead. Does anybody know about this last bit?



  • iku 41 posts 70 karma points
    Jul 05, 2013 @ 17:02
    iku
    0

    I tried it out with the code of Owen. I'm using Umbraco 4.10.11.

    Code for random background of the body tag.

    Code:

    <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
    <asp:content id="Content1" contentplaceholderid="ContentPlaceHolderDefault" runat="server">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="head" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <umbraco:Item field="metaDescription" insertTextBefore="&lt;meta name=&quot;description&quot; content=&quot;" insertTextAfter="&quot;/&gt;" runat="server" />
    <umbraco:Item field="metaKeywords" insertTextBefore="&lt;meta name=&quot;keywords&quot; content=&quot;" insertTextAfter="&quot;/&gt;" runat="server" />
    <umbraco:Item field="metaPagetitle" insertTextBefore="&lt;meta name=&quot;title&quot; content=&quot;" insertTextAfter="&quot;/&gt;" runat="server" />
    <title><asp:placeholder runat="server"><umbraco:item id="Item1" runat="server" field="pageName"></umbraco:item> - <umbraco:item id="Item2" runat="server" field="siteName" recursive="true"></umbraco:item></asp:placeholder></title>
    <link rel="stylesheet" type="text/css" href="/css/layout.css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin" rel="stylesheet" type="text/css">
    <umbraco:macro id="Macro1" alias="BlogRssFeedLink" runat="server"></umbraco:macro>
    <umbraco:Macro Alias="RandomBodyBg" runat="server" />
    <asp:contentplaceholder id="cp_head" runat="server"></asp:contentplaceholder>
    <link rel="stylesheet" type="text/css" href="/css/layout.css">
    </head>
    <body>
    <umbraco:Macro Alias="RandomBodyBg" runat="server" />
    <div id="main">
    <asp:contentplaceholder id="cp_top" runat="server">
    <div id="top">
    <div id="topInner">
    <h1 id="siteName"><a href="/" id="siteNameLink"><umbraco:item id="Item3" runat="server" field="siteName" recursive="true"></umbraco:item></a></h1>

    </div>
    <div id="naviWrap">
    <umbraco:macro id="Macro2" alias="umbTopNavigation" runat="server"></umbraco:macro>
    </div>
    </div>
    </asp:contentplaceholder>

    <div id="body" class="clearfix">
    <form id="RunwayMasterForm" runat="server">
    <asp:contentplaceholder id="cp_content" runat="server"></asp:contentplaceholder>
    </form>
    </div>

    <asp:contentplaceholder id="cp_footer" runat="server">
    <div id="footer">
    <div id="footerInner"><a href="https://contao.org/de/" target="_blank"><img src="/media/490/umbraco_logo_klein.png" alt="Umbraco Logo"/></a><a href="http://www.umbraco.com/" target="_blank"><img src="/media/474/contao_logo_klein.png" alt="Umbraco Logo"/></a></div>
    </div>
    <div id="footerInfo"><div id="footerLogo"><a href="mailto:[email protected]">contact iku.ch</a> | hosting powered by hostfactory.ch server<a href="http://www.hostfactory.ch/reseller/MTAwNjAxMw2"><img src="/media/199/hostfactory-logo-klein.png" alt="Hostfactory Logo"/></div></a></div>
    </asp:contentplaceholder>
    </div>
    </body>
    </html>
    </asp:content>

    Step 1: Go to Backend -> Developer -> XSLT Files -> right click create...(activate: create Macro), then paste the code in.

    Step 2: Go to Backend -> Settings -> Templates -> Master -> into theyou to set the Macro of the XSLT you created in Step 1.

    example:

    <body>
    <umbraco:Macro Alias="RandomBodyBg" runat="server" />
    </body>

     They #body { } in your CSS file could be empty.

    Now, you got a random background if you are clicking arround on the webpage.

    That's how I did this. I'm new to Umbraco, perhaps there is an other way to use this better, but for me it is perfect.

     

    best regards

Please Sign in or register to post replies

Write your reply to:

Draft