Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Nikolas van Etten 202 posts 162 karma points
    Jul 21, 2009 @ 15:49
    Nikolas van Etten

    Automatic crop generation and XSLT for media items

    I've just tried implementing this very nice package into a new site and have run into a few things I'm wondering about.

    First of all, when I create a new image in the media section I need to save the image twice in order to get the cropped image generated. It would be more convenient if the generated image was created when you upload the image.

    Second, I cannot find out how the XSLT for a media item should be. I managed to fix this by more or less hard-coding it, but should be easier doing it another way I would think.



  • Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib
    Jul 21, 2009 @ 17:24
    Dirk De Grave

    Hi Nikolas,

    Here's what I've done:

    <xsl:variable name="pic" select="umbraco.library:GetMedia($currentPagePictureMediaId, 'false')/data [@alias = 'umbracoFile']" />
    <img src="{concat(substring-before($pic,'.'),'_PagePicture.',substring-after($pic,'.'))}" alt=""/>

    Basically, I've split the media url using the '.', then take first part, add the crop name and finally add the extension (part after '.')

    If there's a more convenient way, I'd like to hear about it...




  • Nikolas van Etten 202 posts 162 karma points
    Jul 21, 2009 @ 21:48
    Nikolas van Etten

    Hi Dirk,

    That's more or less exactly my code! ;) I was more thinking about something similar to the code Kenny used on his blog, but seems like that works only with the content section.



  • James Telfer 65 posts 165 karma points
    Sep 14, 2009 @ 16:19
    James Telfer

    I've just tested to see if the same XML is output in the Media section as it is in the Content, and it seems that it is (others would have been able to say straight out, but I'm just looking at the control for the first time).

    As is mentioned in the blog post (which you've obviously seen), the image cropper outputs XML in the content tree, e.g.:

    <data alias="crops">
      <crops date="14/09/2009 14:59:46">
        <crop name="Thumb" x="307" y="121" x2="493" y2="254" url="/media/449/bookhouse-boys_3_Thumb.jpg"/>
        <crop name="Full" x="0" y="0" x2="550" y2="350" url="/media/449/bookhouse-boys_3_Full.jpg"/>

    Note that the alias 'crops' is the alias of the Image Cropper property in the document type.

    To use this in your XSLT, just reference the appropriate path with an XPath expression.

    <img src="{umbraco.library:GetMedia([image node id], false)/data [@alias ='crops']/crops/crop[@name='Thumb']/@url}" alt="{@nodeName}"/>

    Of course, you'll be wanting to change that node Id reference to something different.

    If you're keen to see the XML structure of the media item, try the following XSLT:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
      <!ENTITY nbsp "&#x00A0;">
        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:template match="/">
        <xsl:value-of select="umbraco.library:ChangeContentType('text/xml')"/>
          select="umbraco.library:GetMedia([replace with Media nodeId], 'false')"/>
      <xsl:template match="*">
        <xsl:element name="{name(.)}">
          <xsl:for-each select="@*">
            <xsl:attribute name="{name(.)}">
              <xsl:value-of select="."/>

    Just put your media node id into the right spot. Actually, with a tweak or two, this would show your entire media tree (and of course your standard content tree.

    Hope this helps,


  • Bram Loquet 72 posts 102 karma points
    Mar 11, 2010 @ 13:31
    Bram Loquet

    I did it Dirk's way as well.
    just splitting the media url and putting your cop-name between it.

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Sep 23, 2011 @ 16:49
    Jeroen Breuer

    This topic is pretty old, but I wanted to let everyone know I've created 2 packages which can help with the Image Cropper (the default version in 4.5+).

    With the Digibiz Advanced Media Picker 2.0 Release Candidate it's possible to generate the crops on upload.

    With the Create Crops package you can generate crops for all the media items to ensure all crops are available.


Please Sign in or register to post replies

Write your reply to: