Hi Dennis, that's exactly what I need, many thanks. I'll give it a try.

Okay I will wait to hear if you can get it to work. If your end-user of the website, uploads large images in the Media Library with different
dimensions and your webdesign is optimized for specific dimensions of the pictures, you may want to use Douglas Robar´s ImageGen package.

http://our.umbraco.org/projects/website-utilities/imagegen

I have used it myself on different projects, and find it really nice. I know there are some other packages, which has the same functionality

/Dennis

Hi Roger,

I just want to hear if you managed to get it work, with my suggestion.

/Dennis

Hi Dennis,

Yes, this worked fine. Thanks :)

No problem Roger, glad that I could help you with a solution.

/Dennis

Dennis,

Sorry, i was incorrect, the code is giving an error.

Do you know if there is a way of using xsl:sort to display the images by the time or date they were taken?

I know images have data attached to them, I just need to know if we can use xslt to read that data.

Here's the code i'm using now based on your example:

<xsl:template match="/">
       
        <xsl:variable name="images" select="$currentPage/mediaPicker"/>
        <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($images, true())"/>
       
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQuery', '/scripts/jquery.js')"/>
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQueryLightbox', '/scripts/jquery.lightbox-0.5.min.js')"/>
        <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('jQueryLightboxCss', '/css/jquery.lightbox-0.5.css')"/>
     

<div id="gallery-images">
     <ul>
         

      <xsl:for-each select="$mediaItems/Image">
         
            <xsl:if test="position() &lt;= 80">
            <li class="photo{position()}">
                <a href="/ImageGen.ashx?image={umbracoFile}&amp;width=533&amp;constrain=true" class="lightbox" >
                    <xsl:attribute name="title"><xsl:value-of select="@nodeName"/> - Tandem Skydive

</xsl:attribute>
                  <img src="/ImageGen.ashx?image={umbracoFile}&amp;width=140&amp;height=94"/>

                </a>
            </li>
          </xsl:if>
        </xsl:for-each>
      </ul>
        </div>

        <script type="text/javascript">
            $(function() {
            $('ul a.lightbox').lightBox({
            imageLoading: '/images/lightbox-ico-loading.gif',
            imageBlank: '/images/lightbox-blank.gif',
            imageBtnClose: '/images/lightbox-btn-close.gif',
            imageBtnPrev: '/images/lightbox-btn-prev.gif',
            imageBtnNext: '/images/lightbox-btn-next.gif'
            });
            });
        </script>

    </xsl:template>

Hi Roger,

You could use the @CreateDate attribute, to sort the images. The create date, is the date  where the picture was uploaded to the media library in Umbraco.

<xsl:sortselect="@createDate"  order="descending"/>

Alternativ you could add a custom property to the image document type and sort it by this.

<xsl:sortselect="custom_property_alias"  order="descending"/>

/Dennis

I have it working with the following code but I still need to apply a sort by date image was taken somehow:

<xsl:template match="/">
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQuery', '/scripts/jquery.js')"/>
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQueryLightbox', '/scripts/jquery.lightbox-0.5.min.js')"/>
        <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('jQueryLightboxCss', '/css/jquery.lightbox-0.5.css')"/>

<xsl:variable name="mediaFolderId" select="$currentPage/mediaPicker" />
 
<!-- Make sure a folder was picked -->
<xsl:if test="normalize-space($mediaFolderId)">
<xsl:variable name="mediaPicker" select="umb:GetMedia($mediaFolderId, true())" />
 
<!-- Process folder, if it exists -->
<xsl:apply-templates select="$mediaPicker[not(error)]" />
</xsl:if>
</xsl:template>
 
<xsl:template match="Folder">
<div id="gallery-images">
     <ul>
<!-- Process images in folder -->
<xsl:apply-templates select="Image" />
    </ul>
</div>
        <script type="text/javascript">
            $(function() {
            $('ul a.lightbox').lightBox({
            imageLoading: '/images/lightbox-ico-loading.gif',
            imageBlank: '/images/lightbox-blank.gif',
            imageBtnClose: '/images/lightbox-btn-close.gif',
            imageBtnPrev: '/images/lightbox-btn-prev.gif',
            imageBtnNext: '/images/lightbox-btn-next.gif'
            });
            });
        </script>
</xsl:template>
 
<xsl:template match="Image">

 <xsl:if test="position() &lt;= 80">
            <li class="photo{position()}">   
                <a href="/ImageGen.ashx?image={umbracoFile}&amp;width=533&amp;constrain=true" class="lightbox" >
                    <xsl:attribute name="title"><xsl:value-of select="@nodeName"/> - Tandem Skydive

</xsl:attribute>
                <img src="/ImageGen.ashx?image={umbracoFile}&amp;width=140&amp;height=94" />
                </a>
            </li>
</xsl:if>

</xsl:template>

i don't think that would work with the images getting uploaded in batches that might span over a few days from when one was taken to last one that was taken.

Also, I can't add xsl:sort to the child of a template. Might be better if we could get your code working

Hi Roger,

I don´t think it is posible to sort on when the image was taken, unless the information is writen i the backend of Umbraco by the user. For instance in a text string field.

<xsl:template match="/">
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQuery', '/scripts/jquery.js')"/>
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQueryLightbox', '/scripts/jquery.lightbox-0.5.min.js')"/>
        <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('jQueryLightboxCss', '/css/jquery.lightbox-0.5.css')"/>

<xsl:variable name="mediaFolderId" select="$currentPage/mediaPicker" />
 
<!-- Make sure a folder was picked -->
<xsl:if test="normalize-space($mediaFolderId)">
<xsl:variable name="mediaPicker" select="umb:GetMedia($mediaFolderId, true())" />
 
<!-- Process folder, if it exists -->
<xsl:apply-templates select="$mediaPicker[not(error)]" />
</xsl:if>
</xsl:template>
 
<xsl:template match="Folder">
<div id="gallery-images">
     <ul>
<!-- Process images in folder -->

<xsl:apply-templatesselect="Image"><xsl:sortselect="@createDate" order="descending"/></xsl:apply-templates>    
</ul>
</div>
        <script type="text/javascript">
            $(function() {
            $('ul a.lightbox').lightBox({
            imageLoading: '/images/lightbox-ico-loading.gif',
            imageBlank: '/images/lightbox-blank.gif',
            imageBtnClose: '/images/lightbox-btn-close.gif',
            imageBtnPrev: '/images/lightbox-btn-prev.gif',
            imageBtnNext: '/images/lightbox-btn-next.gif'
            });
            });
        </script>
</xsl:template>
 
<xsl:template match="Image">

 <xsl:if test="position() &lt;= 80">
            <li class="photo{position()}">   
                <a href="/ImageGen.ashx?image={umbracoFile}&amp;width=533&amp;constrain=true" class="lightbox" >
                    <xsl:attribute name="title"><xsl:value-of select="@nodeName"/> - Tandem Skydive

</xsl:attribute>
                <img src="/ImageGen.ashx?image={umbracoFile}&amp;width=140&amp;height=94" />

                </a>
            </li>
</xsl:if>

</xsl:template>

I hope this can help you Roger.

/Dennis

is working on a reply...