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
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.
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 =
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.
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 onso shooting a bit from the hip, but you will need something like that. Let me know how you get on :D
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 :).
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.
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.
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 " "> ]>
<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)
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>
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)
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
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
<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 onso shooting a bit from the hip, but you will need something like that. Let me know how you get on :D
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)
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.
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)
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.
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)
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 :)
Deleted...
Yea probably best you remove that post :)
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
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)
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 :)
OK, will do. Thanks
:o)
is working on a reply...