The easiest way to do this is to use the uComponents extensions...

e.g (with filler removed):

@using uComponents.Core.uQueryExtensions;

var imageNode = new Media(@imageId);
var url = @imageNode.GetImageCropperUrl("crops", "Tile");
if (string.IsNullOrEmpty(url))
{
    url = @imageNode.getProperty("umbracoFile").Value.ToString();
}

That's all there is to it.

@Robert Foster I have uComponents installed...

So if my:
cropper alias = cropDirectoryImage
The specific crop = thumbnail

how should it look to output this?

<img src="IMAGE URL" />

I'm still getting errors with it.

you don't need that stuff.
I'll introduce you how to simple use just razor

1. Create a document type: i called mine image with text / properties simple Text / Image with type upload and named it umbracoFile
2. Configure your image cropper and say that it should look for umbracoFile

Here's my output XML in umbraco.config

<root id="-1">
<ChildPage id="1060" parentID="-1" level="1" writerID="0" creatorID="0" nodeType="1054" template="0" sortOrder="3" createDate="2011-05-22T08:11:52" updateDate="2011-05-22T09:34:09" nodeName="razortest" urlName="razortest" writerName="admin" creatorName="admin" path="-1,1060" isDoc="">
<ImageWithText id="1065" parentID="1060" level="2" writerID="0" creatorID="0" nodeType="1055" template="1056" sortOrder="2" createDate="2011-06-13T09:30:30" updateDate="2011-06-13T09:30:50" nodeName="testseite" urlName="testseite" writerName="admin" creatorName="admin" path="-1,1060,1065" isDoc="">
<umbracoFile>/media/89/4564564__1_.jpg</umbracoFile>
<text><![CDATA[]]></text>
<thumbs>
<crops date="13/06/2011 09:30:39">
<crop name="small" x="20" y="183" x2="1009" y2="607" url="/media/89/4564564__1__small.jpg" />
</crops>
</thumbs>
</ImageWithText>
</ChildPage>
</root>

So now i can easily acces my xml via razor without using hacky xpath or other components.

Than you could put this snippet into your template to render out original image and the crop:

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<umbraco:Macro  runat="server" language="cshtml">
@inherits umbraco.MacroEngines.DynamicNodeContext
  <img src="@Model.umbracoFile" alt="@Model.Name" />
  <p>Here come's the crop</p>
  @foreach(dynamic thumbnail in Model.thumbs)
  {
  if(thumbnail.name == "small")
    {
      <img src="@thumbnail.url" />
    }
  }
</umbraco:Macro>
</asp:Content>

And here's my result:

But i prefere to use this in combination with the Digibiz Advanced Media Picker. Solutions are writte in the related forum.

Bye and have fun experimenting razor is very powerful and in combination with Entity Framework or the strong helpers it makes a lot of fun to work with.

@Toni Becker Does this rely on using the media section? Cause I don't really want to use a media picker. I'd rather just upload the image and then crop it all right there in my members admin area.

So I have these Member Types:
File Uploader with the alias =  facultyHeadshot
Image Cropper with the alias = cropDirectoryImage
and my specific crop alias is = thumbnail

I haven't been able to plug these values into your script and get it to pull out any information. Could you show me using these values?

can you post an extract from your xml? it's better to analyze the structure

Hello Toni, I looked up my umbraco.config file but none of the information about my members show up in there. Is there a different way I should be looking to extract the XML?

hmmm. you could read @ asp.net/webmatrix or asp.net/mvc there are some usefull tips to work with razor and data sources.
I'm working with an integrated entity framework in umbraco so i can easily acces my data and store it in a list or a data object to work and minpulate it.

I think it's very powerful instead of using ultra-long lines of razor code.

You could read it and your development skills will boost up a lot :) and makes your life easier.

Ok.. I got distracted will some other stuff but now I need to figure this Image Cropper in Razor thing out..
I also got the XML for you to look at:

<ublogsyImageUpload>/media/32067/picture_31.png</ublogsyImageUpload>
          <ublogsyCrop>
            <crops date="22/06/2011 13:17:23">
              <crop name="ublogsyThumb" x="27" y="11" x2="227" y2="211" url="/media/32067/picture_31_ublogsyThumb.jpg" />
            </crops>
          </ublogsyCrop>

in this particular case I am calling an image in a post that I have created using uBlogsy. I can call the full scale image like this:

<img src="@d.GetProperty("ublogsyImageUpload")">

But what I want to do is call the "ublogsyThumb"... and I am not sure how to grab that one using Razor...

This will be much easier in 4.7.1 but for now I have a helper method that you can call like this:

var crop = GetImageCropperUrlFullMedia(d.GetProperty("ublogsyImageUpload").Value, "ublogsyThumb");
<img src="@crop"> 

In your Razor file add these usings at the top (not sure if you will need them all):

@using System.Xml
@using System.Xml.Linq
@using umbraco.MacroEngines

And add this helper function:

@functions 
{
    public static string GetImageCropperUrlFullMedia(string mediaXml, string cropName)
    {
        string cropUrl = string.Empty;
 
        XmlDocument xmlDocument = new XmlDocument();
        xmlDocument.LoadXml("" + mediaXml + "");
        XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='" + cropName + "']");
 
        if (cropNode != null)
        {
            cropUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
        }
 
        return cropUrl;
    }
} 

Hmmm got an error:

Error loading Razor Script uBlogsyShowPost.cshtml
Object reference not set to an instance of an object.

Here's what I have at the top of the page..

@using uBlogsy.Web.Extensions;
@using uBlogsy.Web.Helpers;
@using umbraco.MacroEngines;
@using System.Xml
@using System.Xml.Linq
@functions
{
    public static string GetImageCropperUrlFullMedia(string mediaXml, string cropName)
    {
        string cropUrl = string.Empty;
 
        XmlDocument xmlDocument = new XmlDocument();
        xmlDocument.LoadXml("" + mediaXml + "");
        XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='" + cropName + "']");
 
        if (cropNode != null)
        {
            cropUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
        }
 
        return cropUrl;
    }
}


@{
    DynamicNode d;
    
    if (PageData.Count > 0){
        d = new DynamicNode(PageData[0]);
    }
    else{
        d = new DynamicNode(Model.Id);
    }

And then I call the image further down like this:

@if (Model.NodeTypeAlias == "uBlogsyPost"){ 
  var crop = GetImageCropperUrlFullMedia(d.GetProperty("ublogsyImageUpload").Value, "ublogsyThumb");
 <div><img src="@crop"></div>
}      

It looks like one of the crops/images might not be available.. Try:

@if (Model.NodeTypeAlias == "uBlogsyPost" && d.GetProperty("ublogsyImageUpload") != null && d.GetProperty("ublogsyImageUpload").Value != "")
{ 
  var crop = GetImageCropperUrlFullMedia(d.GetProperty("ublogsyImageUpload").Value, "ublogsyThumb");
  <div><img src="@crop"></div>
} 

Thanks for checking back with me... I've been working with your example... I am able to save the template.. but the actual page errors out with:

Error loading Razor Script uBlogsyShowPost.cshtml
Data at the root level is invalid. Line 1, position 1.

You have the line 1 position 1 script ? I you can copy here to check it ! 

There has to be something wrong with the Function part at the top of that file..(see below)

@using System.Xml
@using System.Xml.Linq
@using uBlogsy.Web.Extensions;
@using uBlogsy.Web.Helpers;
@using umbraco.MacroEngines;
@functions 
{
    public static string GetImageCropperUrlFullMedia(string mediaXml, string cropName)
    {
        string cropUrl = string.Empty;
 
        XmlDocument xmlDocument = new XmlDocument();
        xmlDocument.LoadXml("" + mediaXml + "");
        XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='" + cropName + "']");
 
        if (cropNode != null)
        {
            cropUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
        }
 
        return cropUrl;
    }
}

later on on the file, I am trying to call the cropped image like this

@if(Model.NodeTypeAlias=="uBlogsyPost"&& d.GetProperty("ublogsyImageUpload")!=null&& d.GetProperty("ublogsyImageUpload").Value!="")
{ 
  var crop =GetImageCropperUrlFullMedia(d.GetProperty("ublogsyImageUpload").Value,"ublogsyThumb");
  <div><img src="@crop"></div>
}

I only get the error on pages that have an image.. soo

d.GetProperty("ublogsyImageUpload")!=null

But this is driving me nuts..

My XML looks like this for example:

<ublogsyImageUpload>/media/33638/dsc_6762.jpg</ublogsyImageUpload>
          <ublogsyCrop>
            <crops date="23/06/2011 11:58:37">
              <crop name="ublogsyThumb" x="73" y="112" x2="153" y2="192" url="/media/33638/dsc_6762_ublogsyThumb.jpg" />
            </crops>
          </ublogsyCrop>

If anyone could provide a solution using that info... THAT WOULD BE GREAT!

Ah, looks like I let a little mistake slip in. If you have a look at the code: it's asking for the crop that is on the property ImageUpload. But that's not where the crop is, it's in the ublogsyCrop property, so this should help:

var crop = GetImageCropperUrlFullMedia(d.GetProperty("ublogsyCrop").Value, "ublogsyThumb");

Also, you MIGHT have to change .Value to .Value.ToString()

Just to be clear, you got the null reference error because you were asking for something that doesn't exist (the crop) on that particular property. So you don't need the extra null and empty string checks that I suggested earlier.

Hi Sebastiaan Janssen I was so excited about the code I went back to the office on Saturday. I'm affraid that the error is gone now.. but no value comes up when I call @crop.

@if(Model.NodeTypeAlias=="uBlogsyPost"&& d.GetProperty("ublogsyImageUpload")!=null&& d.GetProperty("ublogsyImageUpload").Value!="")
{ 
var crop = GetImageCropperUrlFullMedia(d.GetProperty("ublogsyCrop").Value.ToString(), "ublogsyThumb");
  @crop <text>HELLO</text>
}
  

I tried both ways with .Value and .Value.ToString() and got nothing to come back..

I put the Hello Text just to see if stuff was showing up.. which it does... Thanks again for looking at it.. I can't wait to have this one solved..

Okay, we're getting there. So HELLO shows up, right?

I've just tested my code and it works fine with your XML. So the problem is most likely in the getProperty part. Do you get a string of XML back when you do:

@Html.Raw(d.GetProperty("ublogsyCrop").Value.ToString())

If that is empty, obviously the crop will be empty as well.

Instead of this, try: 

@Html.Raw(Model.GetProperty("ublogsyCrop").Value.ToString())

(as I don't understand why you're creating that "d" variable in the first place).

If that gives you an xml string, this should work:

@if(Model.NodeTypeAlias=="uBlogsyPost")
{ 
var crop = GetImageCropperUrlFullMedia(Model.GetProperty("ublogsyCrop").Value.ToString(), "ublogsyThumb");
<img src="@crop" />
}

hmm closer but no cigar..I added:

@Html.Raw(d.GetProperty("ublogsyCrop").Value.ToString())
@Html.Raw(Model.GetProperty("ublogsyCrop").Value.ToString())
@Html.Raw(d.GetProperty("ublogsyCrop").Value)
@Html.Raw(Model.GetProperty("ublogsyCrop").Value)  

to my file and all 4 lines returned the correct information viewable when I viewed the source code of my page. But displayed nothing on the actual page itself. The result looked like this:

<crops date="23/06/2011 11:58:37"><crop name="ublogsyThumb" x="55" y="94" x2="183" y2="222" url="/media/33638/dsc_6762_ublogsyThumb.jpg" /></crops>  

If I wanted to have this information actually show on my page I could write it like this.

@d.GetProperty("ublogsyCrop").Value.ToString()

which worked, but I am still unable to only call the URL for the cropped image. When i tried your @if statement I get No result. If I add <text>hello</text> I am able to see the hello part.

As far as the reason for the d. variable.. Im not exactly sure eithe,r but I am working from inside a ublogsy file and just following the code that is already in there. if you want to try to experience the full problem you could install uBlogsy and add an upload and image cropper datatype to the Blog Post DocType and see if you could call the crops. But we can see it in the XML and I can now call the string (in full anyway) just haven't been able to isolate the URL for the cropped image.

Once we get this solved I really hope it works in the members section too cause I have crops in razor over there too..

Hi, I also had a problem with image cropper, in my case I got a "root element missing" xml error message and it took me quite a while to realize that it was because I was iterating over several images, and one of them did not have the actual cropper name. Anyways, to solve it I copied parts of Sebastiaans code and added a try catch to help me. Dunno if that might help you also, but something like this:

var imageUrl = "";
try
{
  var mediaXml = d.GetProperty("ublogsyCrop").Value.ToString();
  xmlDocument.LoadXml(mediaXml);
  var cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='ublogsyThumb']");
  if (cropNode != null)
  {
    imageUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
  }              
}
catch (Exception ex)
{
  <text>@ex.Message</text>
}
<img src="@imageUrl"/>

Ok I had to take a little break from this cause it was just holding me up too much.. But now I need to give it another go..

@Jonas Eriksson did you modify the 

@functions {

section at all at the top of the page that Sebastiaan Janssen provided? I keep getting errors with your script that says that certain items don't exist.

-----------------------------------------------------------------------------------------------------------------------------------------------------------

@Sebastiaan Janssen well we left off being able to display the XML on the page.. that looks like this..

<cropsdate="23/06/2011 11:58:37"><cropname="ublogsyThumb"x="55"y="94"x2="183"y2="222"url="/media/33638/dsc_6762_ublogsyThumb.jpg"/>crops>  

Any other tricks that you might be able to pull out to issolate just the URL value?? I really gotta get past this hurdle..

Thanks to both of you for working with me.. sorry this has been so frustrating

Ok well I've spent the day rewriting the template line by line..But still no luck pulling the cropped thumbnail..

If I place this line of code into my template

@d.GetProperty("ublogsyCrop").Value.ToString()

I writes this on my page...

<crops date="30/06/2011 09:50:15"><crop name="ublogsyThumb" x="70" y="49" x2="270" y2="249" url="/media/57487/mikeramos2009_ublogsyThumb.jpg" /></crops>  

I just need to figure out how to only pull the URL from this string..

Hi Jonas.. well when I drop in your code I get no result... I can add in "hello" text inside your div and see that text appear on my page so I know where it should be popping up.. but still I get no imagecropper URL...

I have the GetImageCropperUrlFullMedia function at the top of my cshtml file which looks like this:

@functions 
{
    public static string GetImageCropperUrlFullMedia(string mediaXml, string cropName)
    {
        string cropUrl = string.Empty;
 
        XmlDocument xmlDocument = new XmlDocument();
        xmlDocument.LoadXml("" + mediaXml + "");
        XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::ublogsyCrop/crops/crop[@name='" + cropName + "']");
 
        if (cropNode != null)
        {
            cropUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
        }
 
        return cropUrl;
    }
} 
<!--start entering my template stuff-->

Do you see anything wrong with that?? I have no idea why I can't pull the info..

I noticed you changed the code slightly, please change back this row:

XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='"+ cropName +"']");

YAAAAAAAYYYYYYYYY
THANK YOU!!!!!!! OMG... Finally..

Yay, happy it works :) (credits should really go to Sebastiaan and uComponents originally I think) could you please add the whole script for us?

Yes, Sebastiaan Janssen worked with me forever on this problem. He's been a great help all throughout my frist Umbraco Project.

Well my full template script is a little crazy but here are the important parts to get the image cropper thumbs:
At the top of the Razor template make sure you have this:

@usingSystem.Xml
@usingSystem.Xml.Linq
@using umbraco.MacroEngines
@functions 
{
    public static string GetImageCropperUrlFullMedia(string mediaXml, string cropName)
    {
        string cropUrl = string.Empty;
 
        XmlDocument xmlDocument = new XmlDocument();
        xmlDocument.LoadXml("" + mediaXml + "");
      XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='"+ cropName +"']");

        if (cropNode != null)
        {
            cropUrl = cropNode.Attributes.GetNamedItem("url").InnerText;
        }
        return cropUrl;
    }
} 

And then where you need to call the crop you can do it like this..

@{
 var crop =GetImageCropperUrlFullMedia(d.GetProperty("ublogsyCrop").Value.ToString(),"ublogsyThumb");
}
<div><img src="@crop"></div>

It's just depressing that in 4.7.1 (which should be out soon-ish) you could just do the below.. would've saved many hours:

<img src="@d.ublogsyCrop.Find("@name", "ublogsyThumb").url" />

Ps. We were at the exact same solution 5 days ago, do you have any idea what changed?

Ha.. well that sure would have been nice.. but on the bright side.. I think I probably learned a lot by dissecting this thing line by line so many times... probably some good experience for me on my first project.. Thanks again for all your help... I know I have a few more major hurdles before I can launch this bad boy.. but trying to make progress everyday

No, honestly I have no idea how that got changed.. very very very sorry.. however it did..

Curious : I saw that you were using this code:

DynamicNode d;
    
    if(PageData.Count>0){
        d =new DynamicNode(PageData[0]);
    }
    else{
        d =new DynamicNode(Model.Id);
    }

that looks like you are able to call the script from another page (or from a template) with a reference to a node (other than the current) with the actual cropped image. That would explain why Model and d is actually different.

@FarmFresh Nah, don't be sorry, was just curious what might be different now.

@Jonas Aaah, that might be it

Yeah, I worried that it might be hendering me.. I don't know if you guys have checked out the package "uBlogsy" yet. its a Razor based Blog for Umbraco. For the most part I am really enjoying it. However I am still in my n00b stage and understanding all of the pre-existing code is a little over my head.. I am just trying to work within the guidelines that it came with..

Here's a link to an example of how you do this in Umbraco 4.7.1.

You shouldn't need more than one row of code:

<img src="@yourCurrentNode.aliasOfYourCropper.Find("@name", "Name of the crop you want").url" />

Worked like a charm for me!

/Thomas

https://gist.github.com/1170848 is an excellent link but I have two images in my news items (image1 & image2) and I just want the crop called "News Item" off the first image.  I can't seem to do

var newsImage = newsItem.image1.imageCropper.Find("name", "News Item").url;

Don't understand why it isn't easier.

Craig

here is some image crop codes in C#

        public static void CropImageDemo()
        {
            string fileName = "c:/Sample.png";

            REImage reImage = REFile.OpenImageFile(fileName);

            ImageProcessing.ApplyCrop(reImage, 5, 5, 60, 60);

            REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());
        }

is working on a reply...