I seem to have a few problems achieving a "for-each" inside a "for-each". From what i've read so far i've realized that it's probably not possible, i just can't seem to wrap my head around the syntax i can use instead.
This xslt is for a gallery. There's a "gallery-page" with the ID of 1749, as seen above. Child-pages of this node are the so called "galleries", so when the user creates a child-page, the user gets to pick a folder (gallerimap) with a media picker. The user then also gets to define the thumbWidth and thumbHeight independently for each node. Now, this macro creates an image-thumb wrapped in a link. Unfortunately it does this for ALL the images in the selected folder, and that's quite a few http-requests loading all those images, which makes the page incrediably slow. I've hidden all other images but the first for now, but i'd really like to optimize this script, so that it only loads a thumbnail for the first image, and then just links for the rest.
The link has a rel=shadowbox[galleryname] which tells the jQuery gallery plugin to load this image in that gallery. So displaying the thumbnails aren't nessecary, only for the first one. :)
I'm using Umbraco 4.7 (Net 4.0), jQuery 1.5.2. and Shadowbox jQuery plugin. I hope i've made myself clear on most parts, else feel free to ask! :) I do indeed hope you're able to help a rookie xslt-developer!
Unfortunately your first reply restricts the script to only load one link, where i need it to load a link for every image. Trying your second approach right now, if i can figure it out! :)
Well this is embarrassing, i can't quite seem to figure out where to actually put your code in the xslt. Gives error like: gallerimap is not defined and might be out of scope and such.
Hurray! Your method worked! :) I had to move the beskrivelse up a notch, so that it came right after the image template. Else the description would be produced as a link as well, but it all turned out well! Thanks a lot really, you're one of the guys that make this forum absolutely awesome! ;)
Thanks for the code, it works great! I've reworked it to fit my site, but I have a question as well. I need to do a version that not only pulls in the the current media image folder, but also any sub folders. I've attached the code that I've tried to implement, but it isn't working. It still only pulls in the images within the same folder. Any help would be appreciated.
<xsl:for-each select="$currentPage/imageFolder"> <xsl:variable name="startImageFolder" select="$currentPage/imageFolder"/> <xsl:if test="number($startImageFolder)"> <!-- Grab all the images in the folder that has an image file --> <xsl:variable name="images" select="umbraco.library:GetMedia($startImageFolder, true())/Image[normalize-space(umbracoFile)]" />
<!-- Create a thumbnail for the first image --> <xsl:apply-templates select="$images[1]" mode="thumb"> </xsl:apply-templates>
<!-- Just links for the rest --> <xsl:apply-templates select="$images[position() > 1]" mode="link" />
</xsl:if> <xsl:if test="./@id and self::Folder"> <!-- Grab all the images in the sub folder --> <xsl:variable name="subimages" select="umbraco.library:GetMedia(./@id, false())" /> <!-- Make links for the subimages --> <xsl:apply-templates select="$subimages" mode="sublink" /> </xsl:if> </xsl:for-each> </xsl:template>
Loading just one image in a xlst loop; gallery
Greetings everyone!
I seem to have a few problems achieving a "for-each" inside a "for-each". From what i've read so far i've realized that it's probably not possible, i just can't seem to wrap my head around the syntax i can use instead.
I have this xslt:
This xslt is for a gallery. There's a "gallery-page" with the ID of 1749, as seen above. Child-pages of this node are the so called "galleries", so when the user creates a child-page, the user gets to pick a folder (gallerimap) with a media picker. The user then also gets to define the thumbWidth and thumbHeight independently for each node.
Now, this macro creates an image-thumb wrapped in a link. Unfortunately it does this for ALL the images in the selected folder, and that's quite a few http-requests loading all those images, which makes the page incrediably slow. I've hidden all other images but the first for now, but i'd really like to optimize this script, so that it only loads a thumbnail for the first image, and then just links for the rest.
The link has a rel=shadowbox[galleryname] which tells the jQuery gallery plugin to load this image in that gallery. So displaying the thumbnails aren't nessecary, only for the first one. :)
You can also check out this link, to see an example: http://www.fuglevang.dk/galleri.aspx
Beware of the insane loading time.
I'm using Umbraco 4.7 (Net 4.0), jQuery 1.5.2. and Shadowbox jQuery plugin.
I hope i've made myself clear on most parts, else feel free to ask! :) I do indeed hope you're able to help a rookie xslt-developer!
- Thomas
Hi Thomas,
To only process the first image in the folder, just add [1] to the selector:
/Chrizian
- another approach would be to start looking at separate templates for the thumb/links:
<!-- Grab all the images in the folder that has an image file --> <xsl:variable name="images" select="umbraco.library:GetMedia($gallerimap, true())/Image[normalize-space(umbracoFile)]" /> <!-- Create a thumbnail for the first image --> <xsl:apply-templates select="$images[1]" mode="thumb" /> <!-- Just links for the rest --> <xsl:apply-templates select="$images[position() > 1]" mode="link" /> <!-- ... --> <!-- Template for thumbnails --> <xsl:template match="Image" mode="thumb"> <a href="{umbracoFile}" rel="shadowbox[{@parentID}]"> <img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$thumbWidth}&height={$thumbHeight}" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" class="thumbnail" /> </a> </xsl:template> <!-- Template for links --> <xsl:template match="Image" mode="link"> <a href="{umbracoFile}"> <xsl:value-of select="@nodeName" /> </a> </xsl:template>/Chriztian
Hello Chriztian,
Thanks for the swift reply! :)
Unfortunately your first reply restricts the script to only load one link, where i need it to load a link for every image.
Trying your second approach right now, if i can figure it out! :)
- Thomas
Well this is embarrassing, i can't quite seem to figure out where to actually put your code in the xslt.
Gives error like: gallerimap is not defined and might be out of scope and such.
Hi Thomas,
Don't apologize for my mistakes - I am partly to blame for the errors :-)
We just need to pass the needed variables on to the templates - try this instead and let me know if you hit any other dead ends:
<xsl:template match="/"> <xsl:for-each select="umbraco.library:GetXmlNodeById('1749')/* [@isDoc and umbracoNaviHide != '1']"> <xsl:variable name="gallerimap" select="gallerimap" /> <xsl:variable name="thumbWidth" select="thumbbredde" /> <xsl:variable name="thumbHeight" select="thumbhjde" /> <xsl:if test="number($gallerimap)"> <div class="gallery"> <!-- Grab all the images in the folder that has an image file --> <xsl:variable name="images" select="umbraco.library:GetMedia($gallerimap, true())/Image[normalize-space(umbracoFile)]" /> <!-- Create a thumbnail for the first image --> <xsl:apply-templates select="$images[1]" mode="thumb"> <xsl:with-param name="thumbWidth" select="$thumbWidth" /> <xsl:with-param name="thumbHeight" select="$thumbHeight" /> </xsl:apply-templates> <!-- Just links for the rest --> <xsl:apply-templates select="$images[position() > 1]" mode="link" /> <div class="beskrivelse"><xsl:value-of select="galleribeskrivelse"/></div> </div> </xsl:if> </xsl:for-each> </xsl:template> <!-- Template for thumbnails --> <xsl:template match="Image" mode="thumb"> <xsl:param name="thumbWidth" /> <xsl:param name="thumbHeight" /> <a href="{umbracoFile}" rel="shadowbox[{@parentID}]"> <img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$thumbWidth}&height={$thumbHeight}" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" class="thumbnail" /> </a> </xsl:template> <!-- Template for links --> <xsl:template match="Image" mode="link"> <a href="{umbracoFile}"> <xsl:value-of select="@nodeName" /> </a> </xsl:template>/Chriztian
Hello Chriztian,
Hurray! Your method worked! :) I had to move the beskrivelse up a notch, so that it came right after the image template. Else the description would be produced as a link as well, but it all turned out well! Thanks a lot really, you're one of the guys that make this forum absolutely awesome! ;)
Have a nice day!
- Thomas
Thanks for the code, it works great! I've reworked it to fit my site, but I have a question as well. I need to do a version that not only pulls in the the current media image folder, but also any sub folders. I've attached the code that I've tried to implement, but it isn't working. It still only pulls in the images within the same folder. Any help would be appreciated.
Cheers,
Wade.
is working on a reply...