How to add a Image Cropper to a Doc Type in Umbraco 8

In this blog article we are going to look at how to add automatically cropped images to your Doc types and Website.

Before Adding a image cropper you first want to add a Image See my Blog how how to add a image To a Doc Type Here https://www.umbrajobs.com/blog/posts/2020/july/how-to-a-image-to-a-doc-type-in-umbraco-8/

Step 1. Log-in to the back-office of your Umbraco 8 website.

Step 2. Navigate to the Media types section.

Settings>Media Types>Images

Step 3. Next Click on the Settings cog on the first item "Upload Image"  then when the side bar slides across click the settings cog next to where it says Image Cropper.

Step 4. Now Define a Crop with a Name, Width and Height and Click "Add". Then Click Submit>Submit>Save.

Step 5. Open up your visual studio solution and Navigate to the View template you wish to add your Cropped Image to
//YourWebsiteFileName//>Views>//TheViewTemplateYourEditing//.

Step 6. Enter the following code into the pages code in the location you want your image to be.
**make sure to replace where I have typed YOURIMAGEALIAS and YOURCROPPERNAME to the correct names for your project**

 @if (Model.AddedImage != null)
{
<img src="@Model.YOURIMAGEALIAS.GetCropUrl("YOURCROPPERNAME")" />
}
 //* THIS IS THE SAME AS HOW YOU ADDED THE IMAGE JUST CHANGE .Url TO .GetCropUrl("YOURCROPPERNAME")*//

Step 7. Save your solution and reload your website. If you followed my steps correctly your image should now be on your page Cropped to the dimensions you set previously. 

About the author

Nathan Reece

.Net MVC Developer | Umbraco Novice

Hey Guys,

I'm an New Developer with a passion for coding. I absolutely love working with Umbraco CMS and appreciate the Umbraco community even more.

I've got 3 years+ .Net experience and 5 years+ experience working in the Web Develepment industry, both coding and marketing job websites. I wanted to use my skills to help give something back to this awesome community and UmbraJobs.com seems like the right place to do just that.

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.