Copied to clipboard

Flag this post as spam?

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


  • Roger 195 posts 474 karma points
    Jul 16, 2015 @ 11:58
    Roger
    0

    Help featuring an image gallery on the website

    Hi guys, Im a little rusty and need some help please...

    I have an image gallery that uses the umbGallery.

    Basically, I have a check box (websiteFeatured) that is on the gallery document type. If the user selects this, I want that gallery featured in the foot of the website on each page.

    The structure in the content is:

    • Homepage

      • Gallery
        • A Gallery Name (project 1 for example)
          • Gallery Image
          • Gallery Image
          • Gallery Image
        • Another Gallery Name (project 2 for example)
          • Gallery Image
          • Gallery Image
          • Gallery Image

      So if the user checks the box (websiteFeatured) on project 1, the images of that project will be displayed throughout the site. Also, ideally the images could be displayed in random order but only show 3 at a time.

      I was thinking something like this:

      <xsl:param name="currentPage"/>
          <xsl:variable name="maxItems" select="3"/>  
      
      <xsl:template match="/">
      
      <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*/child::*[@level=2]"/>
      
      <xsl:for-each select="$galleryNode/child::umbGalleryAlbum">
      
      <xsl:if test="websiteFeatured != ''">
          <xsl:if test="position() &lt;= $maxItems">
      
          <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Featured Image"/>
      
      
              </xsl:if>
      </xsl:if>
      </xsl:for-each>
      
      
      </xsl:template>
      

      Now I know this code is incorrect but I hope it gives an idea of what i'm trying to acheive.

      Any help would be greatly appreciated!

      thanks!

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Jul 16, 2015 @ 18:08
    Chriztian Steinmeier
    0

    Hi Roger,

    You could maybe try something like this:

    <xsl:param name="currentPage" />
    
    <xsl:variable name="maxItems" select="3" />
    
    <xsl:template match="/">
        <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*[@level = 2]" />
    
        <!-- Process the Gallery selected for featuring -->
        <xsl:apply-templates select="$galleryNode/umbGalleryAlbum[websiteFeatured = 1]" />
    </xsl:template>
    
    <xsl:template match="umbGalleryAlbum">
        <xsl:for-each select="*[@isDoc]">
            <!-- This is not *real* randomization... -->
            <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
            <xsl:if test="position() &lt;= $maxItems">
                <!-- Render the image as you would normally -->
                <img src="{...}" />
            </xsl:if>
        </xsl:for-each>
    </xsl:template>
    

    Hope that helps,

    /Chriztian

  • Roger 195 posts 474 karma points
    Jul 27, 2015 @ 10:59
    Roger
    0

    Hey Chriztian, thanks for the help. I've just tried that and although I dont get an error with this code, nothing is displayed on the site. I have checked a project with images in as 'websiteFeatured'

    <xsl:param name="currentPage" />
    
    <xsl:variable name="maxItems" select="3" />
    
    <xsl:template match="/">
        <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*[@level = 2]" />
    
    
    
      <!-- Process the Gallery selected for featuring -->
        <xsl:apply-templates select="$galleryNode/umbGalleryAlbum[websiteFeatured = 1]" />
    </xsl:template>
    
    <xsl:template match="umbGalleryAlbum">
        <xsl:for-each select="*[@isDoc]">
            <!-- This is not *real* randomization... -->
            <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
            <xsl:if test="position() &lt;= $maxItems">
                <!-- Render the image as you would normally -->
                <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
                <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Featured Image"/>
            </xsl:if>
        </xsl:for-each>
    </xsl:template>
    

    Could it be something to do with the way I am trying to render the images here:

    <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
                    <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Featured Image"/>
    

    I am using the Upload datatype.

    Or perhaps I have the level wrong but I was sure it was 2

    Thanks again!

    Roger

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Jul 27, 2015 @ 17:18
    Chriztian Steinmeier
    0

    Hi Roger,

    Let's see if we can figure out what's happening - can you try adding some output before and after the apply-templates instruction? Like this:

    <p>Before</p>
    <xsl:apply-templates select="$galleryNode/umbGalleryAlbum[websiteFeatured = 1]" />
    <p>After</p>
    

    And then add something similar inside the for-each, to see if it is even being hit?

    /Chriztian

  • Roger 195 posts 474 karma points
    Jul 28, 2015 @ 11:37
    Roger
    0

    Hi Chriztian, Ok i've tried that and the before and after outsputs ok around the apply templates but nothing outputs in the loop.

    <!-- Process the Gallery selected for featuring -->
    <p>Before</p>
    <xsl:apply-templates select="$galleryNode/umbGalleryAlbum[websiteFeatured = 1]" />
    <p>After</p>
    </xsl:template>
    
    <xsl:template match="umbGalleryAlbum">
        <xsl:for-each select="*[@isDoc]">
    
        <!-- This is not *real* randomization... -->
        <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
        <xsl:if test="position() &lt;= $maxItems">
            <!-- Render the image as you would normally -->
            <p>Loop Test</p>
            <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
            <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Featured Image"/>
        </xsl:if>
    </xsl:for-each>
    

    Thanks again

    Roger

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Jul 28, 2015 @ 22:27
    Chriztian Steinmeier
    0

    Alright - that means one or more of these are to blame:

    1. The $galleryNode is selected wrongly (wrong level?)
    2. There's no umbGalleryAlbum document as a child of $galleryNode (or none with the websiteFeatured checkbox checked)
    3. The featured album has no document children

    Try adding some more debug output in other locations to determine which is the case.

    /Chriztian

  • Roger 195 posts 474 karma points
    Jul 29, 2015 @ 17:29
    Roger
    0

    Hi Chriztian, I've tried everything today. Still no output. it doesn't seem to be applying the template. I've changed levels, took out[@isDoc], removed the websiteFeatured=1 and still nothing.

    Ive checked the document type aliases and the are all correct. I've changed them all to: umbGallery, umbGalleryAlbum, umbGalleryPhoto

    <xsl:variable name="maxItems" select="3" />
    
    <xsl:template match="/">
        <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*[@level = 2]" />
    
        <!-- Process the Gallery selected for featuring -->
        <p>Before</p>
        <xsl:apply-templates select="$galleryNode/umbGallery/umbGalleryAlbum[websiteFeatured = 1]" />
        <p>After</p>
    </xsl:template>
    
    <xsl:template match="umbGalleryAlbum">
        <xsl:for-each select="*[@isDoc]">
    
            <!-- This is not *real* randomization... -->
            <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
            <xsl:if test="position() &lt;= $maxItems">
                <!-- Render the image as you would normally -->
                <p>Loop Test</p>
                <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
                <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Featured Image"/>
            </xsl:if>
        </xsl:for-each>
    </xsl:template>
    

    These are the levels in the content tree and websiteFeatured is checked or this project which uses the umbGalleryAlbum doc type:

    Screenshot

    Thanks again for the help

  • Roger 195 posts 474 karma points
    Jul 30, 2015 @ 12:59
    Roger
    0

    Hi Chriztian, Ive tried to simplify it a little to see if I can get to the bottom of the issue. I have removed the websiteFeatured checkbox from the Gallery Album.

    I was thinking that it could just randomly loop through and display any 3 Gallery Photos but it still wont work. I've even renamed the document type aliases just in case there was an error...

    The structure in the content tree is still the same as the image i posted above.

    I might have the level wrong here but i've tried every level and still nothing:

    <xsl:variable name="maxItems" select="3" />
    
    <xsl:template match="/">
    
    <!-- start writing XSLT -->
    
      <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*/child::*[@level=3]"/>   
    
        <p> before </p>
    
        <xsl:for-each select="$galleryNode/GalleryPhoto">
    
            <!-- This is not *real* randomization... -->
            <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
    
            <xsl:if test="position() &lt;= $maxItems">
    
                <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
                <img src="{$umbracoMediaFile/umbracoFile}" width="257" height="176" alt="Gallery Image"/>
    
            </xsl:if>   
    
          </xsl:for-each>
    
        <p> After </p>
    
    </xsl:template>
    

    Thanks again

    Roger

  • Roger 195 posts 474 karma points
    Jul 30, 2015 @ 14:23
    Roger
    0

    Hey again Chriztian, I've managed to get it working but one slight issue:

    The randomization doesnt seem to work. Any ideas? (I have about 5 or 6 images with the websiteFeatured checked. I was hoping for it to randomly select any 3 of those images)

    Anyway, its almost there!

    <xsl:param name="currentPage"/>
            <xsl:variable name="maxItems" select="3"/>  
    
    <xsl:template match="/">
    
        <xsl:variable name="galleryNode" select="$currentPage/ancestor-or-self::*/child::*[@level=2]"/>
    
    <!-- The fun starts here -->
    
        <xsl:for-each select="$galleryNode/child::GalleryAlbum/GalleryPhoto[websiteFeatured = 1]">
    
    
            <xsl:sort select="Exslt.ExsltMath:random() * @id" data-type="number" order="ascending" />
            <xsl:if test="position() &lt;= $maxItems">
    
                <img>
                    <xsl:attribute name="src">/ImageGen.ashx?image=<xsl:value-of select="umbracoFile"/>&amp;width=257&amp;height=176</xsl:attribute>
                    <xsl:attribute name="alt"><xsl:value-of select="@nodeName"/></xsl:attribute>
                    <xsl:if test="position() = last()">
                        <xsl:attribute name="class">last</xsl:attribute>
                    </xsl:if>
                </img>
    
            </xsl:if>
    
    
    </xsl:for-each>
    
    
    </xsl:template>
    

    Thanks

    Roger

Please Sign in or register to post replies

Write your reply to:

Draft