Hi Jon,

1144 seems to be the id of the media item that has your crops (I guess you're using a media picker on the document, right?), so you should use

var imageNode = Model.MediaById(int.Parse(image));

and from there, use .Find() method to find the cropped image you're looking for.

Cheers,

/Dirk

Hi Jon,

I created a helper method for this. Create this class somewhere in your project :

public static class ImageCropperHelper
{
public static string GetImageCropperUrl(umbraco.MacroEngines.DynamicXml cropXml,string cropname)
{
string cropUrl = string.Empty;

            XmlDocument xmlDocument = new XmlDocument();
            xmlDocument.LoadXml(cropXml.BaseElement.ToString());
            XmlNode cropNode = xmlDocument.SelectSingleNode("descendant::crops/crop[@name='" + cropName + "']");

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

            return cropUrl;
}
} 

And then in razor you can use this :

dynamic image = @Model.MediaById(@slide.Image);
var url = ImageCropperHelper.GetImageCropperUrl(image.crop, "Carrousel");

Thanks for the input guys. I've tried ammending my code as you suggested Dirk but I always fail to find anything using the find method. I'm still pretty sure that my crops aren't working or at least being created. Furthermore Dawoe's suggestion clearly details iterating through XML which just doesn't exist in my originally posted XML.

For the record if I create a media node with the image cropper properly configured should the crops be listed within the XML of that node?

Hi Jon,

The umbraco.config only keeps a the ID of you selected Image.

The code I posted is used on the xml returned when you call GetMedia on that ID

Ok cool. I have pushed along with this some more and found the answer. I also tried to port my code to an older project and that gave me even more insight into the way it all works.

My working code is as follows;

 <div id="headerSlider">
    @foreach (dynamic slide in @Model.Children.OrderBy("CreateDate desc"))
    {
        if (slide.NodeTypeAlias == "slide")
        {
            var image = Model.MediaById(slide.Image);

            var crops = image.imageCropper.crops;

            if (crops != null || crops.GetType().ToString() != "System.String")
            {
                <div>
                    <img src="@crops.Find("@name", "header").url" alt="@image.Name" title="@image.Strapline" width="982" height="170" />
                    <span>@slide.Strapline</span>
                </div>
             } // if
        } // if
    } // foreach 

First of all I was missing imageCropper from my path to the crops. You have to select through this as it is a property of the media item. Without it you won't find the crops array. If you name it differently on the media type then you would have to edit that in your code.

I didn't want to create a helper method for this because it's overkill to select something simple from a node. The reason that I got it to work is because I am using version 4.7.1 in which case the imageCropper property returns dynamic xml. In previous versions it would return a string and obviously it doesn't have any properties you can reference like this. A helper method is a requirement in that position. 

So to conclude. Razor can be used to find crops created by an image Cropper. You just need to be using 4.7.1 or above and get your naming correct. 

What is the @name property?  I understand that "header" is the crop name.  What am I missing? 

 foreach (var item in @currentPage.First().Children.Where("Visible")) 
{
 @if(@item.relatedMedia.GetType() != typeof(umbraco.MacroEngines.DynamicNull)) 
   {
     var image = @Model.MediaById(@item.relatedMedia); 
     var crops = image.crop; image @image.HasValue("imageCrop") // returns false 
     item @item.HasValue("imageCrop") // returns false 

 @if (item.link.GetType() != typeof(umbraco.MacroEngines.DynamicNull) && item.link != "")
                            {
                                <img title="@image.Name" src='/[email protected]&width=552&height="280"' alt='@image.Name' />
                            }
    }
} 

The @image.UmbracoFile works... 

Tried dawoe initial idea but getMediaItem returns DynamicMedia and not DynamicXml. Tried casting it but that didn't work.

is working on a reply...