How do I output an image in Umbraco? Image Cropper tutorial

Umbraco image cropper tutorial

Umbraco is one of the most fantastic content management systems we've come across. However, the learning curve is not easy. Some simple tasks can leave you banging your head against the desk.

So here's the first in our series of giving something back, invaluable code snippets. 

Here's the scenario  - "I just want to output an image on a node using razor". Truth is, there are many ways, but here's our favourite using the mighty-fine image cropper tool.

1) Within your document type, create a new image cropper.

2) Create a crop, this is what's used in 'cropName' parameter

3) Don't forget to upload an image to your node and publish it :-) The Umbraco image cropper has a really content editor friendly zoom / pan which clients totally love.

Here's the most simple way to output an Umbraco image cropper on a node

<img src="@CurrentPage.GetCropUrl("fieldAlias", "cropName")" />

You might want to check if the Image Cropper field is populated...

if (CurrentPage.HasValue("fieldAlias")){     

     cropUrl = CurrentPage.GetCropUrl("fieldAlias", "cropName");

     <img src="@cropUrl" />


Dead easy.

You can also output an image cropper direct to node from the media library

Just find out its ID and use it like this:

//Render image based on provided ID

var image = Umbraco.Media(12345);

var cropUrl = image.GetCropUrl("fieldAlias", "cropName");

<img src="@cropUrl" />

Image Cropper notes

Note that if you create a new crop, you will probably need to republish your content.


DX Digital are an Umbraco agency based near Manchester UK. Get in touch if we can help you.