DEV Community

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

Posted on • Edited on

Umbraco 10 - Sort those crops out!

#umbraco #css #image #cropper

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)