Copied to clipboard

Flag this post as spam?

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


  • Steve Humby 9 posts 29 karma points
    Jan 18, 2013 @ 18:41
    Steve Humby
    0

    Display nested child doctypes

    Hi everyone

    I'm trying to create a project gallery for a buiding company and I'm looking to display a single thumbnail with text which opens a lightbox which displays other images. I'm very experienced in .Net but new to Umbraco and XSLTs and basically, a little stumped.

    I've set up a structure as follows:

    Featured Buildings (Folder)
    |
    --> Project 
         |
         --> Project Image

    My basic XSLT is:

    <?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.ExsltCommon="urn:Exslt.ExsltCommon" 
      xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" 
      xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" 
      xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" 
      xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" 
      xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>
      
      <xsl:template match="/">
        <xsl:variable name="nodeIds" select="umbraco.library:Split($currentPage/featuredBuildings,',')" />
        <ul>
          <xsl:for-each select="$nodeIds/value">
            <xsl:variable name="feature" select="umbraco.library:GetXmlNodeById(current()/.)"/>
            <li><xsl:value-of select="$feature/@nodeName" /></li
          </xsl:for-each>
        </ul>
      </xsl:template>
    </xsl:stylesheet>

    As you can see the above will display a list of the Projects (top-level) but I need to nest inside the UL another UL containing all of the images (the doctype is 'featuredImage').

    Could anyone help? My objective is to simply add a new project which will display a clickable thumbnail and add nested images to the project. 

    What would be perfect is to be able to display a count of the images too.

    Thanks in advance.

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 19, 2013 @ 23:35
    Charles Afford
    0

    Hi.

    In order to get to the images from the current page you can do an xpath query.  So inside of GetMedia() you would say get all children under project where alias = 

    featuredImage.  I think it is:

    <xsl:template match="/">

    <xsl:variable name="nodeIds" select="umbraco.library:Split($currentPage/featuredBuildings,',')" /> 
    <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/featuredBuildings/child::*[featuredImage])" />
        <ul>
          <xsl:for-each select="$nodeIds/value">
           <xsl:variable name="feature" select="umbraco.library:GetXmlNodeById(current()/.)"/>
            <li><xsl:value-of select="$feature/@nodeName" /></li
          </xsl:for-each>
        </ul>

    <xsl:if test="$featuredImage != '' ">

    <ul>

            <xsl:variablename="url"select="$media/umbracoFile"/>
           
    <xsl:variablename="width"select="$media/umbracoWidth"/>
           
    <xsl:variablename="height"select="$media/umbracoHeight"/>
           
    <imgsrc="{$url}"width="{$width}"height="{$height}"/>
    </ul>
     </xsl:if>

      </xsl:template>

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 00:43
    Steve Humby
    0

    Thanks Charles.

    I've had a play with the following:

    <xsl:param name="currentPage"/>  
      <xsl:template match="/">
        <xsl:variable name="nodeIds" select="umbraco.library:Split($currentPage/featuredBuildings,',')" /> 
        <ul>
          <xsl:for-each select="$nodeIds/value">
          <xsl:variable name="feature" select="umbraco.library:GetXmlNodeById(current()/.)"/>
          <li><xsl:value-of select="$feature/@nodeName" /></li>    
          <xsl:variable name="mediaIds" select="umbraco.library:Split($currentPage/featuredBuildings/child::*[featuredImage],',')" />
          <ul>  
          <xsl:for-each select="$mediaIds/value">
            <xsl:variable name="imageId" select="umbraco.library:GetMedia($mediaIds,0)"/>
            <xsl:if test="$imageId != ''">
            <ul>
              <xsl:variable name="url" select="$imageId/umbracoFile" />
              <xsl:variable name="width" select="$imageId/umbracoWidth" />
              <xsl:variable name="height" select="$imageId/umbracoHeight" />
              <img src="{$url}" width="{$width}" height="{$height}" />
            </ul>
            </xsl:if>
          </xsl:for-each>
          </ul>
        </xsl:for-each>
        </ul>
      </xsl:template>

    So it loops through the features, then through the images within the feature, however it chucks out the following error:

    System.OverflowException: Value was either too large or too small for an Int32. 

    Any chance you can help?

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 00:57
    Charles Afford
    0

    Hey, sure.  The problem there are these two lines

    <xsl:for-each select="$mediaIds/value">
            <xsl:variable name="imageId" select="umbraco.library:GetMedia(value,0)"/>

    puts you into the context of each id thus 1001,1551,1667 ect ect.

    So umbraco.library:GetMedia($mediaIds,0)" is trying to get the mediaId's from 1001,1551,1667 (if that makes sense)

    What you need to do is simply pass in the value of each $mediaIds into the foreach:

     

    <xsl:if test="$mediaIds != ''">

    <xsl:for-each select="umbraco.library:GetMedia($mediaIds/value,0)">

    I think that should work if not give us a shout :)

    Charles

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 01:18
    Steve Humby
    0

    Thanks Charles

    Yes it's getting that value that stumps me. To give you an idea of wht I'm trying to do, the page I'm creating is this:

    http://y2kconstruction.opcsdesign.co.uk/features.aspx

    And this is the layout:

    So the doctype alias for 'Cole Park Road' is 'Feature' and the doctype alias for CPR1 & CPR2 is 'FeatureImage'. I'm struggling with displaying the CPR1 & 2 bit (as you've probably guessed).

    Does this make sense? I'm not really sure how we pick up the IDs and loop through the images.

    Cheers

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 11:31
    Charles Afford
    0

     

    Hi,  Yea i understand what you are trying to do.  If you want to check the xml by chance then do
    <textarea><xsl:copy-of select=$currentPage/></textarea>
    You could put this at the top of the page
     
    Sorry i meant to give you:
    <xsl:variable name="mediaIds" select="umbraco.library:Split($currentPage/featuredBuildings/descendant-or-self::[featuredImage],',')" />
    So the code you should have is:
    <xsl:variable name="mediaIds" select="umbraco.library:Split($currentPage/featuredBuildings/child::*[featuredImage],',')" />
     
    Some of your code seems a bit off.  What you should have is:
     
        <ul>
          <xsl:for-each select="
    $currentPage/featuredBuildings">
          <li><xsl:value-of select="@nodeName"/></li>    
          <ul>  
          <xsl:if test="$currentPage/featuredBuildings/descendant-or-self::[featuredImage] != ''>
          <xsl:for-each select="
    umbraco.library:GetMedia($currentPage/featuredBuildings/descendant-or-self::[featuredImage],0)">
            <ul>
              <img src="{
    umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" />
            </ul>
            </xsl:if>
          </xsl:for-each>
          </ul>
        </xsl:for-each>
        </ul>
     
    So instead setting up a var and then splitting you can just do a foreach over each node and then get the information from there.  Not at a computer that i can write XSLT on
    so shooting a bit from the hip, but you will need something like that.  Let me know how you get on :D
     
     

     

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 15:25
    Steve Humby
    0

    Thanks for the tip on viewing the XML, that does help and shows there are no child nodes for the featuredBuildings. The currentPage XML is:

    <FeaturesPage id="1157" parentID="1057" level="2" writerID="0" creatorID="0" nodeType="1149" template="1150" sortOrder="4" createDate="2013-01-10T17:43:21" updateDate="2013-01-20T02:19:18" nodeName="Features" urlName="features" writerName="Steve Humby" creatorName="Steve Humby" path="-1,1057,1157" isDoc="">
    <featuredBuildings>1233,1244</featuredBuildings>
    <title>Solutions</title>
    <keywords />
    <description></description>
    <googleAnalyticsKey />
    <umbracoNaviHide>0</umbracoNaviHide>
    </FeaturesPage>

    My XSLT now reads:

    <xsl:param name="currentPage"/>  
      <xsl:template match="/">
        <textarea rows="3"><xsl:copy-of select="$currentPage" /></textarea>
        <xsl:variable name="nodeIds" select="umbraco.library:Split($currentPage/featuredBuildings,',')" /> 
        <ul>
          <xsl:for-each select="$nodeIds/value">
          <xsl:variable name="feature" select="umbraco.library:GetXmlNodeById(current()/.)"/>
          <xsl:if test="$currentPage/featuredBuildings/descendant-or-self::featuredImage != ''">
          <xsl:for-each select="umbraco.library:GetMedia($currentPage/featuredBuildings/descendant-or-self::featuredImage,0)">
            <ul>
              <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" />
            </ul>
          </xsl:for-each>
          </xsl:if>
        </xsl:for-each>
        </ul>
      </xsl:template>

    Am I getting closer? Thanks for your help so far.

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 15:36
    Charles Afford
    0

    It wont, if you want to see that do  <textarea rows="3"><xsl:copy-of select="$currentPage/child::*" />textarea>

    What i will do is set it up this end get it working and then post the XSLT.  Could you tell me the document types ect you have setup so i can replicate it :).

    Can i ask what type is featuredBuildings?

    Also can you tell me what you get back from:

    <xsl:value-of select="umbraco.library:GetMedia($currentPage/featuredBuildings/descendant-or-self::[featuredImage],0)">

     

    Charles.

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 16:10
    Steve Humby
    0

    Hi Charles, that would be great. FeaturedBuildings is a Type I've created (Feature Picker), I've attached the details below:

     

    I don't actually get anything returned from the GetMedia statement.

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 16:34
    Charles Afford
    0

    Hi no problem, could you explain what  FeaturedBuildings is and what it is used for?  Also have have you laid out your FeaturesPage template?  Dont need images just wondering what inside of them?  Also could you tell me what document types and templates you have applied in the content tree.  Thanks.  Charles.

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 16:44
    Steve Humby
    0

    I haven't set up up any templates, I was using the XSLT to built the content. FeaturedBuildings is just a macro so I can display selected buildings - is that what you mean?

    I'm wondering if it would be easier to give you a login, so you could have a look? I could email you a password.

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 17:02
    Charles Afford
    0

    If you are happy for me to do that i can go in and have a look for you :).  You should have templates and then putting the xslt within them.

    Have you got dropbox?

    Also in your web.config you want to set umbracoUseDirectoryUrls = "true".  This will remove the .aspx from your urls :)

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 17:12
    Steve Humby
    0

    Deleted...

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 17:14
    Charles Afford
    0

    Yea probably best you remove that post :)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 17:22
    Charles Afford
    0

    Ok, well there a quite a few problems.. and i dont really want to login and change things.  

    The html markup within your templates should be in an xslt file.

    So with in the template you have something like 

    <%@ Master Language="C#" MasterPageFile="~/masterpages/Html.master" AutoEventWireup="true" %>

    <asp:content ContentPlaceHolderId="Body" runat="server">

    <umbraco:Macro Alias="YourXSLTFILE" runat="server"></umbraco:Macro>

    </asp:content>

    You will have to look at the documentation and see how everything works.  I am not really sure how you have set things up :/ dont really want to login.

    Charles

     

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 17:26
    Steve Humby
    0

    OK no problem, I'll give that a try.

    I don't suppose you could point me to the documentation? I've had a look around and couldn't find anything hence why I posted on the forum.

    :o)

  • Charles Afford 1163 posts 1709 karma points
    Jan 20, 2013 @ 17:33
    Charles Afford
    0

    Sure http://our.umbraco.org/wiki.  http://our.umbraco.org/wiki/recommendations/recommended-reading-for-web-developers.

    Good luck and if you have any other questions give us a shout.

    Also document types inherit propertys from above so HTML > DEFAULT > IMAGE

    Image will have all of the properties of HTML and DEFAULT.  A little tip will stop you needing so many document types :) 

  • Steve Humby 9 posts 29 karma points
    Jan 20, 2013 @ 17:35
    Steve Humby
    0

    OK, will do. Thanks

    :o)

Please Sign in or register to post replies

Write your reply to:

Draft