Copied to clipboard

Flag this post as spam?

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

  • Jon Russell 7 posts 27 karma points
    Jan 29, 2011 @ 02:19
    Jon Russell

    Using image cropper with inline XSLT

    Okay - I'm just starting out with Umbraco and I really like what I'm seeing in Juno, but a few things are really stumping me. This is one...

    I have an upload control alias: 'image' and an image cropper control alias 'imageCrop' with a crop definition 'banner'. I just can't get it to render the imagein the template. What am I doing wrong. The inline XSLT I am using is below (although I have tried several variants).

    <umbraco:Item runat="server" field="image" xslt="concat('&lt;img src=&quot;',umbraco.library:GetMedia({0}, false)//imageCrop [@name = 'banner']/@url, '&quot; /&gt;')" xsltDisableEscaping="true"/>

    From the database value of cmsPropertyData.dataNtext, the image cropper seems to be working okay...

    <crops date="29/01/2011 00:07:25"><crop name="banner" x="0" y="395" x2="2393" y2="794" url="/media/242/cubans_2_banner.jpg" /></crops>


  • Jon Russell 7 posts 27 karma points
    Jan 29, 2011 @ 02:22
    Jon Russell

    BTW I  have tried...

    <umbraco:Item runat="server" field="image" xslt="concat('&lt;img src=&quot;',umbraco.library:GetMedia({0}, false)//crop [@name = 'banner']/@url, '&quot; /&gt;')" xsltDisableEscaping="true"/> well - this doesn't render anything either :(

  • Nigel Wilson 922 posts 2013 karma points
    Jan 29, 2011 @ 04:27
    Nigel Wilson

    Hi there

    Do you have access to the site via FTP?

    Reason for asking is - have you confirmed the image exists ? Not trying to be cheeky by asking - I have been caught out before.



  • Jon Russell 7 posts 27 karma points
    Jan 29, 2011 @ 09:44
    Jon Russell

    Hi Nigel -

    That's perfectly alright - It's not unknown for me to miss the obvious things to check... in this case however... I had checked, yes, the file /media/242/cubans_2_banner.jpg as referenced by the XML does exist on the file system. Idoubt it's relevent but I'm working locally on my dev laptop anyway, so no web server to worry about.

    I suspect my problem is actually the lack of clear documentation about how to use image cropper and how to use inline XSLT. I have no idea whether the syntax I am using id correct as I've cobbled it together and made assumptions about how it all works.

    <umbraco:Item runat="server" field="{arg1}" xslt="concat('&lt;img src=&quot;',umbraco.library:GetMedia({0}, false)//{arg2} [@name = '{arg3}']/@url, '&quot; /&gt;')" xsltDisableEscaping="true"/>

    My assumptions are...

    {arg1} = uploader property alias

    {arg2} = image cropper property alias

    {arg3} = crop name (as defined in the image cropper)

    Can anyone verify for definate whether this interpretation is correct?

  • Nigel Wilson 922 posts 2013 karma points
    Jan 29, 2011 @ 19:33
    Nigel Wilson

    Hi Jon

    Personally I would look to implement this functionality in a Macro / XSLT file.

    You can then make the macro available within the content editor, or simply insert in your template.

    I feel that this adds more functionality to your site and portability - it is available site wide without the hassle of re-writing the code.

    You would have to add a Media Picker property to the macro in order to select the image.

    A snippet from something I have done previously is below - my image crop was "_HomePageSlider":

    <xsl:variable name="imagePath" select="umbraco.library:GetMedia($image, 'false')/umbracoFile"/>
    <xsl:variable name="imageCrop" select="concat(substring-before($imagePath,'.j'),'_HomePageSlider.j',substring-after($imagePath,'.j'))" />

    Hope this is of some help.



  • James Telfer 65 posts 165 karma points
    Jan 31, 2011 @ 05:20
    James Telfer

    The variant in your BTW above appears to be correct. The original post used 'imageCrop' which won't work.

    Have you tried:

    [<umbraco:Item runat="server" field="image" xslt="'{0}'" />]

    This should display the media ID in square brackets.

    Also, the argument false is actually interpreted as an XPath fragment. You either want 'false' (the string false, coerced to a boolean) or false() (the function returning the boolean value false). 


    <umbraco:Item runat="server" field="image" xslt="concat('&lt;img src=&quot;',umbraco.library:GetMedia({0}, false())//crop[@name = 'banner']/@url, '&quot; /&gt;')" xsltDisableEscaping="true"/>

    You can always put this code in a macro to be easier to read: pass the id and the name of the crop in as parameters and you can reuse it. 

Please Sign in or register to post replies

Write your reply to: