Hi Paul,

Here's a single macro to run on both Gallery and GalleryAlbum pages - it assumes a couple of things, which you may need to change to suit your aliases:

• Gallery and GalleryAlbum are the Document Type aliases for those pages
• galleryFolder is the property alias of the media picker on the GalleryAlbum documents

Let me know if this gets you going,

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umb="urn:umbraco.library"
    exclude-result-prefixes="umb"
>

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

    <xsl:param name="currentPage" />
    <xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />

    <xsl:template match="/">
        <xsl:apply-templates select="$currentPage" />
    </xsl:template>

    <!-- On the Gallery page, show the cover images (thumb of 1st Image) -->
    <xsl:template match="Gallery">
        <ul>
            <!-- Process all albums that have a non-empty galleryFolder property -->
            <xsl:apply-templates select="GalleryAlbum[normalize-space(galleryFolder)]" mode="cover" />
        </ul>
    </xsl:template>

    <!-- On a GalleryAlbum page, show all the thumbnails in the folder -->
    <xsl:template match="GalleryAlbum">
        <xsl:variable name="mediaFolder" select="umb:GetMedia(galleryFolder, true())" />
        <xsl:if test="not($mediaFolder[error])">
            <ul>
                <!-- Process all the images using the Image template -->
                <xsl:apply-templates select="$mediaFolder/Image" />
            </ul>
        </xsl:if>
    </xsl:template>

    <!-- Show a thumbnail of the 1st Image in the gallery -->
    <xsl:template match="GalleryAlbum" mode="cover">
        <xsl:variable name="mediaFolder" select="umb:GetMedia(galleryFolder, true())" />
        <xsl:if test="not($mediaFolder[error])">
            <!-- Process the first Image in the folder, passing in the link to this album -->
            <xsl:apply-templates select="$mediaFolder/Image[1]">
                <xsl:with-param name="link" select="umb:NiceUrl(@id)" />
            </xsl:apply-templates>
        </xsl:if>
    </xsl:template>

    <!--
        Template for an image - a thumbnail linked to the full-size image,
        but the link can be overridden (we do that from the "cover" template)
    -->
    <xsl:template match="Image">
        <!-- Default the link to the full-size image (can be overridden) -->
        <xsl:param name="link" select="umbracoFile" />
        <!-- You can use cropping etc. to find a good thumbnail, here I'm just taking the auto-generated thumbnail Umbraco creates. -->
        <xsl:variable name="thumbnail" select="concat(substring-before(umbracoFile, concat('.', umbracoExtension)), '_thumb.jpg')" />
        <li>
            <a href="{$link}">
                <img src="{$thumbnail}" alt="{@nodeName}" />
            </a>
        </li>
    </xsl:template>

</xsl:stylesheet>

/Chriztian

Chriztian,

You my friend, is the Man! You have absolutely just nailed exactly what I was after!!! Thank you so so much for that! Im rather new to xslt and Ill be honest without your help I dont think I would of ever completed that task ha. Although I dont completely understand everything that is going on your comments really helped when  changing the relevant alias etc. and now that I have thanks to you it is working a dream :).

Im now going to study the entire syntax to try and ensure I have a full understanding of it all as I want to ensure that the thumbnail sizes  change to a bigger size and the images constrain etc. But you have provided an excellent platform for me so big thanks!

Once again the Umbraco Community comes up trumps! Happy Days!! :)

Paul 

Hi Chriztien,

Sorry to ask agian but im wondering if you could explain how you would resize the images of the gallery album and the thumbs inside them? Sorry if im missing the obvious but im not quite getting what you mean by

<!--
        Template for an image - a thumbnail linked to the full-size image,
        but the link can be overridden (we do that from the "cover" template)
    -->

Thanks Paul

Ps I was adding the following imagen syntax to the last img tag but the images are appearing pixelated.

<img src="/ImageGen.ashx?image={$thumbnail}&amp;width=166&amp;height=166" alt="{@nodeName}" />

Paul

Hey Paul,

Really glad you're diggin' it :-)

So, the reason your ImageGen images get pixelated is because they're working with the thumbnail, which is a much smaller image - just use umbracoFile instead (as in the original code) - I hadn't seen you were using ImageGen so just used the standard thumbnails.

What I meant with the comment about overriding the link, was because we're using the same template for the Image regardless if we're on the GalleryAlbum page or the actual Gallery page, we need to set a different link, so I added a template parameter and just set it to default to one of the use cases. So in the cover template we specify another link to use instead.

Personally, I usually do something a little more advanced using some helpers I've created, and they're a little out of scope for this - but they enable me to override width/height and set classes etc. and have the code be very easy to read a month later :-)

Anyway - keep asking! :)

/Chriztian

Hi Chriztien,

sorry bout the delayed response after over 8 hours battling with xslt i powered down for the night ;).

Thanks for the response once again and explaining what you meant about the comment.However, Ive been trying to use the umbracoFile instead of the thumbnail but I keep getting an exception something along the lines of prefix umbraco library has not been defined. Imnot quite sure where im going wrong.

Thanks

Paul

Heres where im atJust took keep you totally in the loop

<?xml version="1.0" encoding="UTF-8"?>

]>

<xsl:param name="currentPage" />
<xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />

<xsl:template match="/">
    <xsl:apply-templates select="$currentPage" />
</xsl:template>

<!-- On the Galleries page, show the cover images (thumb of 1st Image) from the selected media album -->
<xsl:template match="Galleries">
    <ul class="album-list">
        <!-- Process all albums that have a non-empty galleryFolder property -->
        <xsl:apply-templates select="GalleryAlbum[normalize-space(selectAlbum)]" mode="cover" />    
    </ul>
</xsl:template>

<!-- On a GalleryAlbum page, show all the thumbnails from the selected media folder chosen by the user -->
<xsl:template match="GalleryAlbum">
    <xsl:variable name="mediaFolder" select="umbraco.library:GetMedia(selectAlbum, true())" />
    <xsl:if test="not($mediaFolder[error])">
        <ul class="image-list">
            <!-- Process all the images using the Image template -->
            <xsl:apply-templates select="$mediaFolder/Image" />
        </ul>
    </xsl:if>
</xsl:template>


<!-- Show a thumbnail of the 1st Image from the selected media folder -->
<xsl:template match="GalleryAlbum" mode="cover">
    <xsl:variable name="mediaFolder" select="umbraco.library:GetMedia(selectAlbum, true())" />
    <xsl:if test="not($mediaFolder[error])">
        <!-- Process the first Image in the folder, passing in the link to this album -->
        <xsl:apply-templates select="$mediaFolder/Image[1]">
            <xsl:with-param name="link" select="umbraco.library:NiceUrl(@id)" />
        </xsl:apply-templates>
    </xsl:if>
</xsl:template>

<!--
    Template for an image - a thumbnail linked to the full-size image,
    but the link can be overridden (we do that from the "cover" template)
-->
<xsl:template match="Image">
    <!-- Default the link to the full-size image (can be overridden) -->
    <xsl:param name="link" select="umbracoFile" />
    <!-- You can use cropping etc. to find a good thumbnail, here I'm just taking the auto-generated thumbnail Umbraco creates. -->
    <xsl:variable name="thumbnail" select="concat(substring-before(umbracoFile, concat('.', umbracoExtension)), '_thumb.jpg')"/>

    <li>
        <a href="{$link}">
            <img src="{$thumbnail}" alt="{@nodeName}" />
        </a>
    </li>
</xsl:template>

Ive tried adding this

<xsl:template match="/">
<xsl:variable name="mediaFolder" select="number($currentPage/selectAlbum)" />
<xsl:if test="$mediaFolder > 0">
    <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($selectAlbum, 0)" />
    <xsl:if test="$mediaNode/umbracoFile">
        <img src="{$mediaNode/umbracoFile}" alt="[image]" height="{umbracoHeight}" width="{umbracoWidth}" />
    </xsl:if>
</xsl:if>

Thanks

Paul

Hi Paul,

OK - I think I've reconstructed what happened :-) When you tried to use your original ImageGen line:

<img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&amp;width={$thumbWidth}&amp;height={$thumbHeight}" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" class="thumbnail" />

you got a message about the umbraco.library prefix not being mapped to a namespace because I was using a shorter prefix (umb) in my code - you can just change the prefix in that line to use the short one too, and it'll work:

<img src="/imageGen.ashx?image={umb:UrlEncode(umbracoFile)}&amp;width={$thumbWidth}&amp;height={$thumbHeight}" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" class="thumbnail" /> 

I know the .NET guys probably like the longer umbraco.library because it tells them where it comes from, but for me it's just crud – XML prefixes are not meant to be whole sentences, otherwise they'd be called pre-sentences :-)

• But you seem to have changed them back in all of your code though, so what's not working now?

/Chriztian

Hey Chriztian,

Sorry for the delay getting back.

Sorry, I got confused when I was posting I have now amended my code now and I'm using the full syntax umbraco.library but I understand exactly what you are saying so thanks again for the explanation. I realised that it had something to do with shortend down umb and changed it on the off chance.

Thanks to you Ive not got a working XSLT macro that does nearly what I want it do. The last part that I'm currently working on is trying to ensure that the images that the user uploads are all resized and still look ok. I know that if i was using the pro version of imagegen then you could use the crop function but as im not im trying to figure a way to do this.

Thanks for your help, im slowly but surely learning :)

Paul

is working on a reply...