Hello, ive been wanting to show 1 thumbnail only on each image folder on my gallery.

Currently im using this Xslt to populate my page with all the folder images and it works well

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

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

        <xsl:param name="currentPage" />
          

        
        <!-- Grab QueryString parameter (if present) -->
        <xsl:variable name="imgId" select="umbraco.library:RequestQueryString('img')" />

          
          <xsl:template match="/">
        <!-- Process the picturesFolder (if one is specified) -->
        <xsl:apply-templates select="$currentPage/mediaFolderId[normalize-space()]" />
          </xsl:template>
        
<!-- Template for the property -->
<xsl:template match="mediaFolderId">
        <xsl:choose>
                <xsl:when test="$imgId">
                        <!-- Process a single Image -->
                        <xsl:variable name="mediaImage" select="umbraco.library:GetMedia($imgId, false())" />
                        <xsl:apply-templates select="$mediaImage[not(error)]" mode="single" />
                </xsl:when>
                <xsl:otherwise>
                        <!-- Process the folder -->
                        <xsl:variable name="mediaFolder" select="umbraco.library:GetMedia(., true())" />
                        <xsl:apply-templates select="$mediaFolder[not(error)]" />
                </xsl:otherwise>
        </xsl:choose>
</xsl:template> 
        
        <!-- Template for the root folder -->
        <xsl:template match="Folder">
                <h3><xsl:value-of select="@nodeName" /></h3>
                <ul>
                  <!-- Render all Images, Files or (sub-)Folders in this folder -->
                        <xsl:apply-templates select="Image | Folder" />
                </ul>
        </xsl:template>

        <!-- Template for an Image (thumbnail linked to fullsize view of image)-->
        <xsl:template match="Image">
          <xsl:variable name="ext" select="concat('.', umbracoExtension)" />
         <a href="{umbraco.library:NiceUrl($currentPage/@id)}?img={@id}">
            <img src="{concat(substring-before(umbracoFile, $ext), '_thumb', $ext)}" alt="{@nodeName}" />
          </a>
        </xsl:template>

        <!-- Template for displaying single Image -->
        <xsl:template match="Image" mode="single">
                <div class="image">
                      <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}" />
                </div>
        </xsl:template>

</xsl:stylesheet>

This is the part where the folder images are populated, it currently show all the images of each folder

 <!-- Template for an Image (thumbnail linked to fullsize view of image)-->
        <xsl:template match="Image">
          <xsl:variable name="ext" select="concat('.', umbracoExtension)" />
         <a href="{umbraco.library:NiceUrl($currentPage/@id)}?img={@id}">
            <img src="{concat(substring-before(umbracoFile, $ext), '_thumb', $ext)}" alt="{@nodeName}" />
          </a>
        </xsl:template>

Now, what i wanted is instead of show all the images of each folder - i just want it to show just the first image thumbnail of the folder.

Apologies if this is a dumb question, but ive been stuck with this for some hours already and im not that adept with xlst, thanks much in advance.