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...

uCssClassNameDropdown Property Editor for Umbraco 7

Written by @marcemarc on Monday, 25 November 2013
uCssClassNameDropdownConfig.png

Ok, so I know alot of people are waiting on the popular uCssClassNameDropdown umbraco Data Type to be ported as a new fangled Property Editor in Umbraco 7 before they'll even contemplate looking at the possibility of upgrading from 4 or 6, and who can blame them ?

It's all very well having this swish responsive editing experience but how else are you going to turn your css stylesheet class names into a rich datasource for editor's to pick ? you, the dev, are going to have to type them all in as prevalues into a dropdownlist, and try and maintain them as the front enders, switch, rename and add new ones just to spite you;  and for something like font-awesome that's alot of class names to type.

But hey you can read more about the existing uCssClassNameDropdown package on our (think I need to update the font-awesome icon picker to use the new version of class names in font-awesome 4.0)

So porting this to Umbraco 7, first off, I'll just concentrate on binding the regex matches from the stylesheet to a dropdown, if that's ok ?

I have paid some attention to several of Per's talks, and read Tim Geyssen's excellent blog posts on creating custom property editor's in Umbraco 7.

So I won't repeat all that here but basically:

You need a manifest

to tell umbraco all about the property editor. You configure, alias, name and how to store the data:

editor: {
alias: "tooorangey.uCssClassNameDropdown",
name: "Class Name Dropdown", valueType: "JSON",

then set the path to the view file for the editor, that will be displayed when the property editor is in use:

view: "~/App_Plugins/uCssClassNameDropdown/ucssclassnamedropdowneditor.html"},

then set any prevalues, for the editor, with uCssClassNameDropdown, you need to be able to configure the path to the css file, the regex to match the class name pattern, and a basic exclusion list for when the regex is too hard to work out...

 prevalues: {
            fields: [
                {
                    label: "PathToStylesheet",
                    description: "Put in the relative path to the stylesheet",
                    key: "cssPath",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                },
                 {
                    label: "Class Name Regex",
                    description: "put in the regex pattern that matches the class names",
                    key: "cssRegex",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                },
                 {
                    label: "Exclusion list",
                    description: "comma delimited list of styles to exclude",
                    key: "excludeList",
                    view: "textstring"
                }
            ]
        }

and finally you register any javascript or css files that the editor will need to render itself on the page. For the simple dropdown version of uCssClassNameDropdown, I'll just need to register the angular controller that will be responsible for gluing everything together:

 javascript: [
        '~/App_Plugins/uCssClassNameDropdown/ucssclassnamedropdown.controller.js'
    ],
    css: []

The View

In uCssClassNameDropdown's case this is just a <select tag using angular's ng-options attribute to bind to a list of classnames defined in the controller and the value of select get's saved in the umbraco document type, via binding the selection of the dropdown to model.value (ng-model) and this is two way binding. so when he control loads if the value is set on the node, then the selected item is automatically displayed.

             

I've got a span there to write an error message to when things go wrong.

The Controller

So the controller, glues it all together, You defined the controller on the umbraco module in this file at the top:

angular.module("umbraco")
    .controller("tooorangey.uCssClassNameDropdownController",
    function ($scope) {

and then put all your controller 'actions' in here.

first I set up the classnames property as an array for the ng-options thing to loop through on the view.

$scope.classnames = [];

then create a function, to populate it.

$scope.getClassNames = function () {

Now because I'm going to be making a http request I also need to 'inject' the angular $http request functionality into the controller, which is done by adding it at the controller function after the  $scope

angular.module("umbraco")
    .controller("tooorangey.uCssClassNameDropdownController",
    function ($scope, $http) {

I could have made a serverside web api call to handle the reading of the css file, applying of the regex and caching, then returning of the matched classnames, but I was interested to see if this could all be done in angular (so this may not be the most efficient way) So I'm going to make a request for the css styles sheet.

Read in the configuration properties

   var cssPath = $scope.model.config.cssPath;
            var cssRegexPattern = $scope.model.config.cssRegex;
            var excludeList = $scope.model.config.excludeList;




make the http request

 $http({ method: 'GET', url: cssPath, cache: true }).
  success(function (data, status, headers, config) {
      cssStylesheetContents = data;
// apply regex and populate $scope.classnames property
}

Now I had a hunch I didn't want to make this request every time the editor was loaded, and I noticed there was a cache: true property that could be set on the $http request eg.

$http({ method: 'GET', url: cssPath, cache: true })

hopefully that makes this not the case ?

umm that's it, added those three files to a folder called 'uCssClassNameDropdown' in the app_plugin folder and I can now create a font-awesome icon picker data type by supply cssPath as /css/font-awesome.css and regex as \.fa-(*.?):before, and then add it to my blog post doc type. so look,

Some description

I can pick a font-awesome icon now for each blog post and display it after the title... (umm for no particular reason, but it does have it's uses this sometimes honest) 

Some description

The next step is to work out how to dynamically add the selected stylesheet to the control in angular, so that instead of a dropdown you can see and click on the actual icon to select it, like the usercontrol wrappers I created before in version 4.

Download the property editor files


Umbraco 7.0.0 launch party tips

Written by @marcemarc on Thursday, 21 November 2013
umbraco-rocket-to-the-stars.jpg

Well I had a bit of a headstart, at least I did, but then had loads of problems upgrading from the Release Candidate to version 7.0.0 proper, although it hadn't been an issue switching to the Keiras (Knightleys that is), so in the end I've just created a new fresh build of 7, and brought the blog across and things seem ok.

If anything this version seems a little faster than the release candidate!

It's fair to say there are probably a few more issues to uncover, now that more people will be using it and on different setups but the main thing is I'm pleased I can insert images via the rich text editor again, and thankfully the annoying S bug 7 has disappeared... (thank you Per)

Think the community really appreciate how hard the core team have worked on this...

...but...

... and I know it's a joy to use and everything...

... but ...

...I can't help feeling, and this is the main disappointment for me, it's not a criticism but maybe instead of fixing all those show stopping bugs in the last few days, that perhaps the core team's time could have been better spent putting together a video with tips for hosting your own Umbraco 7 launch party, I now have no pointers as to how to structure the evening, or what activites to run...

 


Responsive images - roll on 4G...

Written by @marcemarc on Sunday, 17 November 2013
faces.jpg

So my images are huge, and rendered huge regardless of browser, and responsive images are cool right now, (that's the ability to serve differently sized images at different compression rates for different devices.)

Normally on an umbraco project, my image resizer of choice would be Eksponent CropUp , which is built as a plugin for ImageResizer 

And I tend to use this because of it's ability to suggest a crop based on what it thinks is the most important part of an image, using mathematics; but still allows editors to override this on the 10-20% of occasions when this isn't 'quite right', using jcrop. It's great !! - CropUp also has some responsive image functionality, but I've never quite got it to work.

The slight pain is ImageResizer doesn't do disc cache-ing out of the box, but there is a plugin for $99 - $249 per domain depending on usage: http://imageresizing.net/plugins/diskcache but who'd begrudge a few dollars for the cool stuff that it does ?

Anyway this is Umbraco 7.0.0 RC and CropUp is a legacy property editor, at the moment, and so I can't use it 'yet', and I have these huge images.

So alot of people been talking recently about slimmage.js which works with ImageResizer for "sane & simple effortless responsive images" and I guess this blog should be about trying stuff out.

So reading the info on Slimmage it says it works with any RIAPI-compliant image resizing tool but ImageResizer 'is preferred', and I thought RIAPI client, what's that ? https://github.com/riapi/riapi it's a work in progress 'standard' for parameters for QueryString image resizing tools by the , and I thought I wonder if I can use this with ImageGen, largely because, I'd get disc caching for free :-)

So ImageGen isn't RIAPI compliant, but alls thats different as far as I can see, is that Doug calls the Jpeg Quality value 'Compression' and ImageResizer calls it 'Quality', if only there was some kind of standard...

But this can be easily fixed in a variety of different ways, my super lazy approach is below.

How it works

The Slimmage.js / ImageResizer approach comes with a HttpModule called 'SlimResponse' https://github.com/imazen/slimresponse (you're following all this right ?) it's job is to look at the html page being served up, and if it contains an image tag, and that image has a class of 'slimmage' or the querystring has &slimmage-true then the image tag is hijacked and the html markup that slimmage.js works with is written out instead. Then slimmage.js looks at the browser width and varies the parameters sent to the serverside resizing tool based on the current screen width. So for small screens, a smaller image is dynamically resized and compressed, because slimmage.js has sent smaller parameters for width and quality via querystring.

Super lazy

So my super lazy approach to making this work with the non-RIAPI compliant Imagegen was to open up slimmage.js, and globally replace the word 'quality' with 'compression'.

et voila

slimmagen.js !!

it seems to work, I have smaller images !!

Originally
Some description
Desktop + slimmagen
Some description
Small Screen + slimmagen
Some description

What's good about slimmage.js is you can cms control which images should or shouldn't get slimmage'd (with a checkbox in mediatype, and write out class="slimmage" accordingly) I'm working on a project for a client, and I'm using cropup, and the ability to turn off cropping/compression for certain images has suddenly become very important.

The other approach that I like, was proposed sometime ago by OffRoadCode, basically you set a cookie in javascript on first page load that reports the max width screen of the device, and then a httpmodule uses this, coupled to imagegen to serve appropriate images to appropriate devices, if they're in the media folder, you can read about it here: https://offroadcode.com/blog/1540/mobile-friendly-images,-creating-responsiveadaptive-images-with-imagegen/ I might have a play with this too at some point. (be great if devices announced their max width size via user agent string: http://www.bigbossmas.com/web-development/list-of-mobile-device-sizes/)

For completeness I should also point out uAdaptiveImages exists http://our.umbraco.org/projects/developer-tools/uadaptiveimages a port of the Adaptive images project for responsive websites, but I haven't used it.

Be great to linkup the cropup 'suggest a crop' functionality and interface with ImageResizer cropping and ImageGen disc caching, and some kind of successful responsive approach: Umbraco 7 is a good opportunity to rethink and tweak the data types, (property editors) we know and love.

Wonder what it looks like on a retina display...


Ladies and gentlemen we are now floating on Umbraco 7.0.0 RC Release Candidate

Written by @marcemarc on Friday, 15 November 2013

I'm not really one of those people who are able to 'just have a play' with something, to try out something new or to learn it, I have to have something real to build, and usually a small amount of time to build it in, to motivate.

So with a full release of Umbraco 7, pretty imminent, and the need for me to update my blog now that I am no longer migrating things from tridion to umbraco, I thought I would maybe build a bit of a blog on Umbraco 7, and get a feel for it, and see how far I got, and report anything funky along the way.

So the blog isn't polished, the idea is to tidy bits (well everything up really) as I go along, and I can blog about Belle related discoveries as I do so;

But hey first impressions! - Umbraco Belle 7.0.0 is really lovely to use, the main thing that hits you is the speed of the thing in the backend, it's really really fast.  (It's just the client doing all the work).  Additionally shifting the sections to the left hand side from the bottom, makes perfect sense, your eyes read left to right, is is natural to start from that part of the screen than the bottom, and your eyes are in the right place to dive into what you are about to do.

Some description

Anyhow I've got this far in a few hours.

All I've done is throw some basic doc types on, and templates, and I'm using the new container option for the blog posts.

More details as I try new things out. Some things aren't working exactly as expected, but it is a release candidate so that's expected, the more people who can use fresh eyes now to spot and report things though the better, so if you have a moment, download the release candidate and 'have a play' or build something with it.


Umbraco Belle and Sebastian

Written by @marcemarc on Thursday, 14 November 2013

At the Umbraco UK festival last week, each time I heard 'Umbraco Belle' and @cultiv mentioned in the same sentence; I immediately got the following song spinning around in my head.

 


Anthony Gormley's Another Place

Written by @marcemarc on Wednesday, 13 November 2013
anthonygormley.jpg

Another Place is a piece of modern sculpture by Antony Gormley.

The sculpture consists of 100 cast iron figures which face out to sea, spread over a 2 mile (3.2 km) stretch of the beach. Each figure is 189 cm tall (nearly 6 feet 2½ inches) and weighs around 650 kg (over 1400 lb).

In common with most of Gormley's work, the figures are cast replicas of the artist's own body. As the tides ebb and flow, the figures are revealed and submerged by the sea. The figures were cast by Joseph and Jesse Siddons Foundry in West Bromwich.

Another Place was first exhibited on the beach of Cuxhaven, Germany in 1997 and after that in Stavanger in Norway and De Panne in Belgium.