DEV Community

Cover image for Umbraco 10 - Sort those crops out!
Gareth Wright
Gareth Wright

Posted on • Updated on

 

Umbraco 10 - Sort those crops out!

I've always though that the image cropper in Umbraco, looked a little messy and the view for the main image wasn't large enough.

Default Cropper

So I decided to tweak the CSS and see if I can tidy it up:

Improved Cropper

I think this looks better and it gives the main image 100% of the area to use!

It's fairly straightforward to achieve this, just follow these steps:

1 - Create the following structure in your site under app_plugins

Folder

2 - Add a package.manifest with this code:

{
  "css": [
    "~/app_plugins/tweaks/cropper.css"
  ]
}
Enter fullscreen mode Exit fullscreen mode

3 - Add this CSS in a file called: cropper.css

.imagecropper {
  display: block;
}

.imagecropper .umb-sortable-thumbnails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  overflow: auto;
  max-height: 300px;
}

.imagecropper .umb-sortable-thumbnails li {
  display: flex;
  flex-wrap: wrap;
  width: 10%;
  align-items: flex-start;
}

.imagecropper .umb-sortable-thumbnails li .crop-information {
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

4 - Restart the Umbraco website, and the image cropper should be updated :)


Nuget Package:

Install-Package punkCropperStyles
Enter fullscreen mode Exit fullscreen mode

https://www.nuget.org/packages/punkCropperStyles/


If you need any help, give me a shout on twitter.

Top comments (0)

Hi!I'm Noah!

Hey, my name is Noah and I’m the one who set up this ad!


My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.
 
If you found DEV from searching around, here are a couple of our most popular articles on DEV: