Software update: Umbraco CMS 8.8

Umbraco is a content management system for editing and managing dynamic web pages. The whole thing is written in C# and runs on a Microsoft infrastructure. There is a positive and proactive community behind with more than 50,000 registered users and developers who ensure a stable flow of releases. Version 8.8 of Umbraco was released on Tuesday and the most important changes that have been made are listed for you below.

Cropping images in the Grid

Ever wanted to crop and preview images directly in Grid Layouts? Lars-Erik Aabech did and he went ahead and built the feature. This means that you can now use the standard image cropper functionality when you’ve selected an image and the preview in the Grid will update accordingly.

Content editors will now be able to control cropping and have a much better representation of what it will look like on the frontend. What’s really neat is that it uses the same configuration of the Grid Media Picker as before, just with enhanced functionality. You can see how you can add crops in the documentation for Grid Editors.

Editing Styles and Settings for the Grid

Another great addition if you’re working with the Grid and using Settings and Styles (the little cogwheel on rows and cells ⚙), is that the JSON configuration for this is handled with a proper code editor. Bjarne Fyrstenborg has updated this part of the configuration to use the Ace editor. This will make it a lot easier to add Settings and Styles with proper formatting, syntax highlighting and should result in less trial and error.

List view in Media Picker

If you have folders in the Media library with a lot of media items, this feature is here to help. You can now choose to view items in a list as opposed to just thumbnails. This can make it easier to get an overview and quicker to scan if you’re looking for something by name.

Simple, clean and a great help for anyone picking media items. Kudos to Marc Goodson for contributing and to Thomas Morris and Bjarne Fyrstenborg for testing it out.

Working with GUIDs and UDIs

Referencing entities in Umbraco is usually done with GUIDs or UDIs – unique identifiers that ensure things are consistent. This was not always the case, as this used to be done with IDs, which are decidedly less unique. Bjarne Fyrstenborg has made a fantastic contribution to Umbracos APIs, making it a lot easier to work GUIDs and UDIs. No more jumping through hoops, converting back and forth to IDs, requesting entities with unique identifiers is now native.

• Access document, media and member types by guid and udi
• Access relation type by id, guid and udi
• Access template by id, guid and udi
• Access dictionary item by id, guid and udi
• Access member group by id, guid and udi

Icons as SVGs

A major step up in terms of accessibility is going from using icon fonts to SVGs. An SVG can hold semantic data for screen readers and are not affected if accessibility fonts are being used. If you want some more background on why this is a good thing, this post explains the reasoning for Github switching to SVGs.

A new directive umb-icon has been added to help render the SVG icons and it has already been implemented in a few places in the backoffice and can also be used by package developers. This first release, with Umbraco 8.8, is mostly to get the functionality in Core and the icons can then be updated in subsequent PRs (maybe a good idea for Hacktoberfest?).

Mike Massey has been working on this for close to 2 years. It is a big change to the backoffice, so it’s naturally taken some time to ensure it’s backwards compatible, has proper fallbacks and so forth. It’s already caught the attention of other contributors that are working on expanding and solidifying the functionality. An example is making it possible to have your own SVGs stored in an App_Plugins and registered in a package.manifest file. Soren Kottal already has a PR for this functionality!

Overlays, dialogues and tabbing

If you use the keyboard to navigate the backoffice there are improvements in this release as well. Jan Skovgaard has been working on a great enhancement to ensure you don’t inadvertently tab out of confirmation dialogues and overlays.

A new AngularJS service makes it possible to create focus lock, which means you can scope the area that is in focus. This has been in a number of places already and can be used in packages where this functionality is needed.

Parlezvous français?

Michael Latouche has contributed with a massive overhaul of french translation of the back office. More than 550(!) updates and additions will surely benefit content editors working in a localized backoffice. Haut cinq tu rock!

Accessibility

This is another big release for Umbraco in terms of accessibility. Aside from the icons and overlays mentioned above, there are 25(!) additional PRs aiming to make the Umbraco backoffice easier to use for everyone. Whether you’re using a screen reader or are a keyboard shortcut enthusiastic, you’ll feel the difference. The Umbraco Accessibility Team is 100% community-run and has made a huge amount of contributions over the past year which makes a big impact on the user experience in the backoffice – So do go give them a big old H5YR, they deserve it!