I'm working on the process of rendering out the crop version of an image using razor. I always seem to have consistency issues with this process, every time the solutions differs between Umbraco versions and projects, but this time I'm completely stuck. All the images that I want the crops of are in a Multi-Node Tree Picker and all I want to do is get the crop of each image instead of the full size versions.
Here is my code at the moment, which renders out some xml (I think?) data about the crop image, including the Url of the crop itself:
@foreach(var item in @Model.myMultiNodePickerProperty) { var media = Model.MediaById(item.InnerText); var image = Model.MediaById(media.primaryImage); var crops = image.crops; <li> <p>@crops</p> </li> }
I've been struggling with different methods to fetch crop data. Checking the crop's BaseElement works best for me:
@{ var image = Model.MediaById(<mediaid>); var crops = image.mediaCropper; // mediaCropper is the Image Cropper property I added to the Image media type
// check if specific crop exists if (crops.Find("@name","<cropname>").BaseElement != null) { // crop exists <img src="@crops.Find("@name","<cropname>").url" alt="@image.Name" /> } else { // crop doesn't exist, use alternative method (e.g. ImageGen) } }
Extracting the data of an image crop
I'm working on the process of rendering out the crop version of an image using razor. I always seem to have consistency issues with this process, every time the solutions differs between Umbraco versions and projects, but this time I'm completely stuck. All the images that I want the crops of are in a Multi-Node Tree Picker and all I want to do is get the crop of each image instead of the full size versions.
Here is my code at the moment, which renders out some xml (I think?) data about the crop image, including the Url of the crop itself:
This is what renders within the paragraph tags:
Is there a way to extract the url (I was thinking along the lines of '@crops.Url' but to no avail) or is there something I'm missing from the code?
Have a look at the Cultiv Razor Examples project. It also has some crop examples.
Jeroen
I've been struggling with different methods to fetch crop data. Checking the crop's BaseElement works best for me:
@{
var image = Model.MediaById(<mediaid>);
var crops = image.mediaCropper; // mediaCropper is the Image Cropper property I added to the Image media type
// check if specific crop exists
if (crops.Find("@name","<cropname>").BaseElement != null) {
// crop exists
<img src="@crops.Find("@name","<cropname>").url" alt="@image.Name" />
}
else {
// crop doesn't exist, use alternative method (e.g. ImageGen)
}
}
is working on a reply...