So when I say I work with Umbraco, people kind of always go, "ahh Umbongo Umbongo, they drink it in the Congo" referencing the TV advert jingle for sugar and fruit flavoured drink 'Umbongo' from the mid-nineteen eighties; which I can't deny is a particulary catchy jingle, but one I've always felt slightly self-concious singing along to. On the other hand, the Kia-Ora jingle of the same vintage and ouvre is as catchy as a rash, and I'm much more comfortable with it in the sing-a-long stakes. So when I had to name my blog which would largely concern Umbraco subject matter and I HAD to pick an eighties fruit based tv advert to reference, I chose the Kia-Ora one. Now I could have gone with the ad strapline 'We all adore a Umbraco' but somehow 'Umbraco, too orangey for crows' made more sense (nonsense). So sorry for wasting your time with this explaination, but I think it gives a fairly good indication about whether it's worth reading any of the blog posts...
We have been working on two upgrade projects from Umbraco 6 to Umbraco 7 this month, and it’s thrown up lots of interesting responses from the editors involved in making the move and adapting to their new environment.
“It’s just the same with a different font”.... was my favourite grumpy observation.
You get a bit complacent knowing how much better Umbraco 7 is in terms of editor experience that you take for granted that editors will embrace the change, forgetting that if you’ve used a tool for 3-4 years, and change is forced upon you, there will be at least some resistance, it’s human nature.
But for me it’s a really interesting scenario, and the first thing you do is stop telling people how much better Umbraco 7 is to Umbraco 6, and you listen - and you do this because editors use the product every day to edit content and they are 'seeing with fresh eyes', it's gold-dust and seconds and minutes within a particular workflow are incredibly important to them - they are the experts.
Take Media Picking for example: On one site when we sat and benchmarked editor activities for picking media for articles in Umbraco 6, it was monumentally slow, either an editor needed to switch to the media section to upload their image, and switch back to the content section to pick it or they used Digibiz Advanced Media Picker DAMP - that enabled them to upload to the media section from within the content section and set particular crops - but was really really slow.
“You’ll love Umbraco 7 for picking media", we boasted, "it’s one of the biggest improvements, it’s really fast and you can upload and pick media from within the content section, no more switching between the two, your workflow will be faster”
In both scenarios, we replaced with a standard Umbraco 7 Media Picker - and both workflows when re-measured using Umbraco 7 were faster: (stopwatch method - complete the journey as fast as you can).
Switching between Content and Media Section to upload image and then pick:
Umbraco 6: 3 mins 44 secs
Umbraco 7: 1 min 3 secs
Upload within the Content Section and pick:
Umbraco 6 - Upload via DAMP: 1mins 24secs
Umbraco 7 - Upload via media picker: 35 secs
Upload within the Content Section, pick and define crops:
Umbraco 6 - Upload and Crop via DAMP: 2min 21secs
Umbraco 7 - Upload via media picker: 1 min 42 secs
So basically it’s a win all round right?
...all is not as it seems.
The gains of using the Media Picker to upload an image and pick selected crops is not ‘that much faster’ than using DAMP - this is mainly because with DAMP, you can edit the crops without leaving the content section in a popup window...
...even though doing so is slower in actual terms of task time, it feels much quicker ‘mentally’ because you haven’t had to shift your focus to another screen, switch context and switch back again.
The editors reported the journey in Umbraco 7 as feeling slower.
Also if you were in the middle of editing content at the time, clicking the pencil on the Umbraco 7 media picker to open the image in the media section to enable the crops, will have triggered the ‘you have unsaved changes’ dialog, which will cause you to think, jolting your mental process - and you’ll have to save your content item, switch to the media section, adjust your crops, and switch back to content to complete the journey.
The paradox is this is still actually quicker than using DAMP! - but it is the exact workflow you boasted earlier that Umbraco 7 had solved!
Essentially the excellent Image Crop facility of Umbraco 7 is not welcomed with open arms by this set of editors because it has broken their workflow!
Even though in real actual time the speed of the Umbraco 7 backoffice makes the workflow quicker to complete - It exhausts the editor in terms of concentration, and this is why it feels slow and for me, this is the really interesting thing about analysing UX/UI, and measuring improvements, is that you can’t ever discount ‘how it feels’ to the person, even if the stats say otherwise!! (think of it as the windchill factor that makes a cold day feel colder than it actually is)
Anyway Tom Pipe (@toepimp) and I figured that surely it must be possible to bring the existing cropping functionality from the media section into an overlay in the content section:
This is only a prototype, but very usable - we’ve taken the approach to have a new property editor that targets a media picker by alias and adds an Edit Crop button underneath the picker, clunky perhaps, but pragmatic...
... well we don’t want to end up maintaining our own custom media picker - we can release this for testing quickly and immediately improve the editing experience for our customer, improving over time with their feedback.
Hopefully, this illustrates the issue too, and a kind of resolution, and we can use this as the basis to explain the problem to Umbraco HQ that might lead to a PR or maybe it’s a bit too niche for the core, and it’s better as a separate package.
in which case what on earth would we call it?
(Darren IS on holiday this week)
or more sensibly:
Anyway, It reassures the client that we are listening, and that the upgrade puts them on a platform that quick improvements like this can be made easily, but hang on forget the platitudes! - what has it done to the stopwatch test?
Upload within the Content Section, pick and define crops:
Umbraco 7 with Moriyama.ClubCropicana/OutCrop: 53secs !!
uSpinMeRightRound for short… is a package that adds the functionality to rotate the orientation of an image once it has been uploaded into the Umbraco Media Section.
You can see a video here that shows it in action:
Why the plugin?
You’ve probably not noticed that a 'rotate option' is actually missing from the back office of Umbraco, this is because uploaded images are ‘auto-rotated’ to be the right way up, based on their exif data etc I think, and using Image Processors AutoRotate functionality... so why would an editor ever need to rotate an image in the back office?
Well if you are bulk uploading images it seems like sometimes the auto-rotate doesn’t kick in and also if you are uploading scanned images from a flatbed scanner like in the olden days then there isn’t the orientation data to auto-rotate by, or perhaps if you are like me and could never fathom how to put the document around the right way, (same with manually doing double-sided printing).
Anyway if you are cohabiting that Venn diagram overlap of niche circumstances then it’s super helpful to have a rotate option in the back office, and it saves you from downloading, spinning it around in some other image manipulator and having to re-upload the corrected version.
How do I work it?
Choose 'rotate' from the action menu
See preview of options for rotating the selected image in 90-degree turns
Select rotation option and click rotate…
(you can replace the crow spinning image at /app_plugins/tooorangey.uSpinMeRightRound/spinner.png)
Correctly orientated image.
And that is it. (although there is an option to create a new media item for the rotated image if you so desire)
How does it work?
This is, of course, standing on the giant shoulders of James M South and Image processor that ships with Umbraco now. Image Processor has a 'rotate' option built-in (a wrapper around System.Drawing) that is of course super-easy to use. However in generating the preview images of how the image will look in the various rotated states, I hit a problem in that I wanted to just add ?rotate= on the querystring, but the rotate processor is turned off by default (for good reason) in Umbraco and I didn't want to enable it for all 360 degrees for all images on the front end of people's websites just to do the previews for these three rotated positions in the plugin.
So I created a new Image Graphics Processor called ‘pirouette’ that will only accept a number of quarter-turns, 1, 2 or 3.. (I'm aware that pirouette means one full turn doh!)
Again, nods to Mr M South as this is just as simple as creating a class that implements his IGraphicsProcessor interface.
public class Pirouette : IWebGraphicsProcessor
/// The regular expression to search strings for.
private static readonly Regex QueryRegex = new Regex(@"pirouette=[1|2|3]", RegexOptions.Compiled);
and add details of the processor to the processing.config file:
(It’s only since Umbraco 7.5 that the additional Image Processor configs have been shipped, so if you want to use this package pre-Umbraco 7.5 you’ll need to install the Image Processor config NuGet package – here…..)
Rotating the image
The actual rotating and resaving of the image back into Umbraco is done via a back office only UmbracoAuthorizedApiController, when you select the number of turns in the UI this instruction is sent to the Api, and we use Image Processors' ImageFactory class to perform the rotation. There is a save method that enables you to save the new transformed image into a memory stream, which is just what Umbraco's media file service likes to get hold of to add images to wherever it is Umbraco is configured to store them. So I have a feeling this will work in the cloud…
var imageToRotate = imageFactory.Load(fullPath);
var ms = new MemoryStream();
imageToRotate.Rotate(turns * 90).Save(ms);
But the tricky part here was trying to avoid file locks, eg what if the image you are trying to rotate is being displayed by IIS on site and locked - I think I've worked around this by always renaming the file with –rotatedX on the end of the filename, where X is the number of turns, this avoids the locks, and sort of also means if I’m doing something really bad here I haven’t mucked up the original image!
(If your having one of those days, perhaps your Umbraco site is powering an art gallery of conceptional art and it’s not clear which way around the picture should be anyway, and you keep rotating and rotating the image around in circles, then if the rotation for that number of turns already exists on disc, uSpinMeRightRound will use that instead for the media item.)
I’ve just realised in typing this that there is probably an edge case here if you have the text '–rotated1(2or3)' naturally somewhere in the name of your image file – well I’m sure it will be fine…
Finally, there is an option to create a new media item inside Umbraco with the rotated image keeping the original in place – the trick here is to make Umbraco think that the memory stream is an uploaded file by implementing a wrapper class that inherits from UploadedFile base class.
public class MemoryStreamPostedFile : HttpPostedFileBase
public MemoryStreamPostedFile(MemoryStream ms, string fileName)
this.ContentLength = (int)ms.Length;
this.FileName = fileName;
this.InputStream = ms;
Anyway, it’s a first-release, there are improvements to be made (image selecting UI and making text translatable, but let's see if it’s of any use to anyone first).
Found this in a notepad file, as a possible ending for last year's codegarden talk... I think I know why I didn't go down this route as it would have been hard to pull off, but the bits that are very lemony snickett made me smile nearly a year on... so they might have worked:
Possible Ending ?
So I told the story of the super multiple checkbox carcrash from earlier to Benjamin Howarth at last year’s codegarden, and he said, ahh yes, I’ve seen that site, it’s xxxx and I said umm no, but realised the site he referred to was in the same industry, and so maybe this same person is using this pattern in all their development sites; and maybe this one person is responsible for all the bad code I’ve had to rescue in all Umbraco sites ever; I mean everyone I talk to about carcrash Umbraco has never done anything stupid; so surely it’s most likely one single person responsible for all this crap - everyone has a nemesis right ? - and no I don’t have black outs it isn’t a fight club thing - If only we could track this person down, I would gladly pay for them to attend the Umbraco training courses, and introduce them to Our Umbraco, and a subscription to Umbraco TV; there never need be a future carcrash umbraco talk again.
so Ladies and Gentlemen I can reveal I have dedicated the last year and a half of my life to tracking down this individual, I have gone undercover, grown a beard and walked and developed amongst you; I’ve travelled, by sea, rail and hot air balloon - slept rough in a ditch outside Byte5 offices in Germany - worked in Amsterdam bulb packing factory that overlooks Novaware HQ - played poker in Huddersfield with a robot, I suspected at the time to have been built by Matt Brailsford’ and I’ve answered countless forum threads obliquely, with leading follow up questions, and data mined tweets mentioning @umbraco (awesome is the top keyword), searching for clues, I have been like some kind of Umbraco **** hunter… to the extent that Channel 5/Discovery Channel would like to make a documentary about me...
.. and today today codegarden I can reveal I suspect the person responsible for all of these carcrash Umbraco problems is present in this room and I have concocted an elaborate scheme for identifying this individual.
(I don't know what the elaborate scheme was going to be)
Ok there is a big slab of a gap on the homepage... maybe on an intranet and the client says "oh that will be an RSS feed of the latest news or weather or something…" - because they want the page to be some kind of 'hub' for all information on the internet that might be of passing interest to their users/employees etc - although of course that isn’t how people use the internet is it?
What's really going on here is you have a big white space next to the company Twitter feed... And well, the output from an RSS feed would be about the same size.
Anyway, after sighing inwardly, you dig out that code from 2012 and if you were smart back then, you would have stumbled across the SyndicationFeed class from that then version of the .Net framework and you'll do the same old thing you always do to display the feed.
In Umbraco then, you're left with a dilemma, this is code, c# code, it shouldn't be in a razor view, although it's only a few lines? should I? should it be a Surface Controller Child Action - should I hijack the route? or....
... why not a property value converter?
is that really the right answer?
The use case
This package / custom property editor thing came from an editor on a site we support needing to update the RSS feed Url on their website homepage, they found the new RSS feed link, clicked it, saw the raw feed in their browser. satisfied, they copied the url from their address bar, and pasted it into the RSS feed textbox property in Umbraco, on their homepage node - published and boom... the url was missing the last few characters, bad cut-and-paste! ... their homepage was down!
Wouldn't it have been great if they could have checked the feed Url was working before they published the homepage?
Now they can!
Replace the textbox for the RSS Feed Url in the umbraco document type with a property editor of type tooorangey.RssFeedUrl.
Now after the editor has cut-and-paste the feed Url, they have a Check Feed Url button to press.
If there is a problem with the feed, they are alerted before the homepage is republished, before the boom!
and can check and correct the feed Url accordingly...
If the Url is an active RSS Feed, the editor sees a tick and a reassuring 'Valid Feed Url' message! - ahh but is it the right feed? a Preview button enables the editor to see the current contents of the feed, to check, again before they push the publish button.
Those first two items are not fake news as far as I know.
I'm not doing anything super clever to validate the Rss Feed, I'm just seeing whether the SyndicationFeed class can open and read the url and whether there are any feed items.
(Why doesn't the editor use Umbraco's page 'Preview' button before publishing instead...? well you are less likely to use this button for changes to an existing page, and also less likely to for 'non content' changes [Citation Needed]- this button gives the editor a subtle 'in context' reminder, that changing or adding this feed url is something worth checking, and it's convenient to do so at the point of entry)
But what about the Property Value Converter ?
Well the work in the plugin to pull back the feed contents based on the feed Url may as well be made available to be used in your razor view or surface controller...
so if your property has an alias of rssFeedUrl, something like this will now pull back the feed contents:
The FeedResult class has four properties, the FeedUrl (in case you want to do something with the raw url) and a boolean flag 'HasFeedResults' that you can use to determine if there are any feed items to display, if there is an error, it will be logged and the StatusMessage will give some indication of the message. Finally the SyndicationFeed property is the .Net SyndicationFeed class mentioned above, and contains all the details you need to know about the RSS Feed you are consuming and it's feed SyndicationItems.
It's worth putting the above in a Macro/CachedPartial/OutputCached Surface controller to add some caching so you are not requesting the feed ever time the page is refreshed.
Anyway, the snippet above produces something like the following:
but you can customise the html and css to use with your feed content.
... now the next time you are asked to add an RSS Feed to a page, I cannot promise you that your inward sigh won't still occur, a simple property editor can do nothing to temper the sigh of a developer that has been asked to add an RSS Feed to a page for seemingly little reason by very well meaning people, but I can hope, that the thought of demo'ing this small crumb of helpful functionality and the smile of gratefulness you may receive in return could temper you from responding with a tired sulky "really?, well it's technically possible but...
So recently we helped upgrade one of our support client's Umbraco sites from v6 to v7, all went very smoothly, except suddenly...
...puncturing their haze of post upgrade bliss was the shocking realisation that they were entirely in love with the Cogworks CogPageReview dashboard and actually their entire world of workflow revolved around this simple content review date dashboard - and it wasn't in fact 'something they didn't really use and could live without' - but something they needed superfast, or otherwise, well... some content might get old and nobody would know....
I've come across this deceptively simple package a few times before, and people just tend to believe 'it's part of Umbraco', particularly for large sites containing public information that will only be valid for a certain period of time, you set the content review date, and don't have to remember to check next year, it's invaluable.
Anyway onsite I knocked together quickly a dashboard to do a similar job in Umbraco 7, and you can download it here for the time being, if it helps you out, and hopefully we can push this back into the original package, but what I have here is pretty hasty, it's working so far... fingers crossed.
... but hey that isn't what this blogpost is about...
So what I wanted to blog about was three small things I noticed putting this together that I sort of didn't really know about or had learnt recently from the above course and also had spotted in the refactoring of the 'proof of concept' (for proof of concept, read not very good) Redirect Dashboard that HQ ahem refactored for the 7.5 release - that seemed new to me and I thought were mildly worth talking out loud about, here they are:
1) Don't use $scope 'willy nilly'...
So I'd got into the habit of using $scope all over the place, and when we introduced property editors to the Umbraco Level 2 course we taught this approach - officially from the docs:
$scope as a Data-Model "Scope is the glue between application controller and the view." and so enables your directives, controllers and views to share values and communicate in an agnostic manner.
Anyway cool kids don't seem to do it like that anymore - looking at the Redirects dashboard the preferred pattern moving forward for Data Models is to declare a ViewModel object or vm for short!
so here I'm grouping the dashboard status and settings on an object and for some reason to me it seems to make the controller much much easier to read...
... and you don't need to inject $scope into your controller unless you are using it for non data model purposes, eg setting watches and the like.
2) Backoffice styling - flexgrid and pagination, particularly pagination.
Making things look good in the backoffice has always been a bit of guesswork over what is there, and providing your own styles, which then as Umbraco changes start to look a bit weird... what package creators need is a style guide for property editors and dashboards that they can use to keep the look and feel of their creations consistent with the vanilla backoffice... the good news is I'm told the style guide is very much a planned thing that will happen soon.In the meantime if you are presenting tabular data, the redirects dashboard has the most recent HQ approach to this kind of thing and the first thing you notice is Flexbox for table layout is in the core, was that always there? I don't know, but it's certainly worth being aware of and utilising!
The most exciting thing though for me, because I hate implementing paging... is there is a new directive called 'umb-pagination' <umb-pagination - to consistently handle paging ui in the backoffice, and it's really easy to repurpose: so all I needed to do here was to create a pagination object on my viewmodel with totalPages, pageNumber, etc, populated from my search results
also we have an <umb-loading-indicator directive to handle the interaction when it takes a while to build the report
and an <umb-empty-state to show a message when there is no content review...
3) Finally language translations of text within the dashboard
I've always kind of wanted to provide the opportunity for people to translate the text used within a property editor or dashboard I'd created, but never really understood how. It's not just cos I'm English and think people from other countries will undertand if I just talk louder... anyway this isn't new, but is all setup by convention and so it might not be apparent what to do.
In your angularJS dashboard view or property editor you can use the <localize tag with a key and a default value (there is also a localize service if you need to work with the translated text in your controller)
Written by @marcemarc on Thursday, 06 October 2016
Today, the 6th of October is National Poetry Day - when I was younger, so much younger than today I used to write awful urban romantic poetry, (marcemarc completists can find out more here: http://daysdrawout.co.uk/posts/the-panda-keeper/). Anyway I've often thought there is a similarity between beautiful code and poetry, the metre, readability, code blocks are like verses and of course whilst your code needs to compile - it does not have to rhyme...
oh and Poets and Coders seem equally obsessed with late nights and drinking coffee.
...with Umbraco and it's interfaces beginning with I, and all those package names beginning with u - my mind has often thought it should be possible to construct an Urban Romantic poem containing entirely references to classes and interfaces in the codebase and umbraco package names...
but of course that is ridiculous and here's the proof:
It would be a good openspace session to discuss creating a library of common Umbraco coding patterns, showing off variations of how to implement common functionality, or even a library of common Compositions, that you could select, and download into your Umbraco site...or something.
Editor notes has been Steinmeiered... Greystated; well Umbraco legend Chriztian has been using it and having ideas.
Principally it's all very well having this huge colourful Editor note reminding, sometimes nagging editors to do a thing in a certain way, (and the idea is to use this on areas not used that often), but there becomes a point, if you are an editor, and you use the site everyday, that a well meaning note, well it becomes irritating and patronising and takes up screen space and therefore infringes on an editors sense of wellbeing, particularly if you done a good grammatical error in the text of the note, or made a sentence too long, with too many commas and ands.
So now there is an option to configure the note to be 'collapsible' - the editor can read the note, and then decide 'they got it' and hide it, expanding it later lest they forget. (The state of collapsibility should be remembered using browser local storage for each note.)
So setting the Node Render Mode to 'Html' means everything is as before, 'Collapsible' gives you the new functionality and 'SlidingPane' is another alternative that will slide out a panel containing the note.
The latest version is .3 and is available and updated on Our Umbraco and Nuget too (Install-Package tooorangey.uEditorNotes).
but somehow, on this last project I was working on - I couldn't get it to work like it used to :-( let me know if it still works right ? (probably just caching or something)
Anyway I didn't have time to mess around, tweaking and hoping and F5ving; and so instead, I hooked into the ContentService's saving event, checked for my rich text editor property (with alias 'content'), and used a Regex to strip out any empty paragraphs:
void ContentService_Saving(IContentService sender, Umbraco.Core.Events.SaveEventArgs e)
foreach (var content in e.SavedEntities)
var contentHtml = content.GetValue("content");
if (contentHtml != null)
// remove empty paragraphs
var removeBlankParasRegex = @"<p[^>]*>(\s| |)*";
var strippedHtml = Regex.Replace(contentHtml.ToString(), removeBlankParasRegex, "");
// remove empty paragraphs with a non breaking space
The nice thing about this approach is the editors get immediate feedback when they save, that the rogue spacing has been removed before they publish.
Written by @marcemarc on Tuesday, 16 February 2016
Hey this may not be obvious but creating Custom Macro Parameter Type's in Umbraco 7 has gotten insanely easy, without anyone really shouting about it. (or if they did I wasn't listening properly, I do apologise - I bet there's something on Tim Geyssens' excellent nibble.be blog about it - but in fact if you wondered about this and looked in the official docs:
"If you want to create a new macro parameter editor you will need some c# programming and database knowledge:
First create a class deriving from a webcontrol and implement the IMacroGuiRendering interface. Afterwards, open your database editor. Find the cmsMacroPropertyType table and add the a new property editor."
Boo, that sucks! and it's also not true anymore!
Because now in the wonderful world of Umbraco 7 and angularJS - if you can create an Umbraco Property Editor, you can create a custom Macro Parameter Type Editor too!
The secret (shsssshhh) is to create an angularJS property editor, as you normally would, then in the package.manifest file; add the property:
isParameterEditor and set it to true.
Not only will your editor appear in the list of property editors, it will now be available as a Macro Parameter Type too !!
Example, (always you want an example).
Well in the real world, I often have to build Umbraco sites where editors insert images into a Rich Text Area. (as not everyone is weaned onto using the grid yet). Now you might want that inserted image to have very specific markup ie class="responsive-image", and have a caption underneath, or use the new html5 picture element that all the cool kids are talking about instead of the img tag.
So this could lead you to abandoning the Insert Media button and creating a macro instead to insert the image into the rich text editor, you can specify a parameter of media picker type; and then be very specific about the markup that gets written out for the picked image.
Which is all great and that but,... then the editor wants to align the image right or left amongst their text. Well you can create another parameter which is a textbox and have them type L or R into it or maybe create another Macro called 'Insert Image Right' to add the floating markup but it doesn't feel awesome. What you really want to provide is a nice radio button list to infer the options for positioning the image.
The default Macro Parameter Types are a bit lacking when it comes to this kind of thing.
So let's create a custom 'ImagePosition' Macro Parameter Type editor, to provide radio button options of how to position the inserted image, that we can then read in our macro implementation to apply relevent markup / css classes etc.
This is what our package.manifest file looks like:
we can then read the parameter in our macro using:
var imagePosition = Model.GetParameterValue<string>("parameterAlias");
and depending on this value align our images appropriately.
In conclusion it does kind of mean you can kind of go to town on creating custom Macro Parameter Types to make the editing experience more delightful or at least be aware it's easy to re-use existing property editors on macros parameter types.