loading the cropped image of an upload in a document

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Thomas Egebrand Gram 63 posts 138 karma points

Jul 11, 2011 @ 23:16
0

Loading the cropped image of an upload in a document
Greetings everyone.

I seem to have a few problems achieving what i want with my setup.
I've created a new datatype for the Image Cropper tool in Umbraco 4.7; created a upload field so a user can upload an image; and then linked the 2 datatypes together, so that the user can upload an image (a logo for example), and then crop it directly from the content-section.

Now what i'm having difficulties with - is actually loading the cropped image into my template. I've tried the following XSLT to display it, but it seems to give an error when i try to save - or try it in the browser.
```
<xsl:template match="/">
<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/logo, 0)" />   
  <img src="{$media/blogo//crop [@name ='Logo']/@url}" alt="" />
</xsl:template>
```
'logo' is the alias of the upload field in the document.
'blogo' is the alias of the crop field in the document.
And @name='Logo' is the name of the defined crop-type.

What am i doing wrong, or is this a wrong approach to the whole thing?
Been bashing my head against the wall all day :-(

Also - is there a way to make this macro recursive? Or is that just possible as any other umbraco item?
Thanks a lot for reading, and have a lovely evening!

- Thomas
Copy Link
Thomas Egebrand Gram 63 posts 138 karma points

Jul 13, 2011 @ 21:45
0
Hurray!

It seems i figured this one out eventually - after spending the entire day searching and reading.
I made some adjustments to my setup; completely skipping the interacting with the content-section.

Basically i create a new media-item with the same properties as the "Image" in the media section.
I then added the Image Cropper datatype to this mediatype - so that the user can just upload his logo, and then crop it.

Now for the xlst i did the following:
```
<xsl:template match="/">
 
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia(1069, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
          <img src="{$mediaNode/blogo//crop [@name ='Logo']/@url}" height="" width="" alt="Logo" />
</xsl:if>

</xsl:template>
```
Creating a new variable (mediaNode) - that finds the media of the mediaId (1069). You could of course then make this id dynamic with a media picker if you wanted to.
Now - the if statement checks if this mediaId has an umbracoFile, if so it runs.

The image then checks the mediaNode for the alias 'blogo' which is alias of the crop datatype.
'Logo' is the predefined cropsetting on the datatype itself.

The best way i can explain it from a rookie XSLT developer, learning by doing! ;-)
I hope this will help someone in the future.

- Thomas
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?