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...
Hey, so have been working on a few different multi-lingual International sites in Umbraco over the last couple of months, and the common theme for these is that International Telephone Number input and validation either inside Umbraco or on front-end forms is a bit complicated. Mainly because different countries have different length telephone numbers, so with regex's you end up saying well smallest number possible is I think 9 digits (Sweden ?), and the longest is 15...
So it's inprecise.
One client was adamant they wanted to force users to provide a valid telephone number, which I did point out was difficult without actually calling the person up and asking them "is this your telephone number ? did you just type it in online ?" (although if pushed I'm sure we could build something with http://www.twilio.com/ to automate this, scary thought)
I was thinking out aloud, if the customer puts 0 in the telephone field, it's not because they don't understand what their telephone number is, or what a valid format for a telephone number is, it's well, because they don't want to give you their telephone number, because you are going to try and ring them and sell them something, and well people don't always like that, especially if they are filling in a form online, and if your business is solely based on these telephone leads, then you might perhaps want to rethink it slightly because in 5yrs, 10yrs... is that sort of business going to exist ?
and so it's pretty good at indicating what is a valid telephone number in a particular country or not, and the client is pleased because people have to fill in a valid telephone number and I don't point out: 'yes but they can still opt to put someone else's number in', and it's got flags.
Anyway such is the plugin's popularity, clients have begun asking for it within Umbraco for editing phone numbers, it's great for when the editor needs to specify the country code on a number from a country they're not familiar with, and so I've just had to wrap it up quite hastily today as an angular property editor, and I thought I'd put it up on our.umbraco as a package, in case someone else might make it better... or it may do for someone who is in a similar haste.
It's simple, there is one prevalue you can set on the property editor which is a json object as a string, that is any of the options provided for the International Telephone Input plugin (well I say any, I haven't tested them all, but you should be ok to set defaultCountry, preferredCountries and onlyCountries)
Then when a user fills in the number, there is a visual indication that the number is valid or invalid based on the selected Country flag,
it doesn't prevent the user saving an invalid telephone number, it just makes the editor aware that it is. I think it's possible now or will be soon, to have a property editor take responsibility for it's validation within Umbraco, and so it could be set that a valid telephone number was required, and the page couldn't be published without one, but I didn't need that today, so it doesn't, ok ? but it has got flags.
I also needed to have more than one telephone field on the page, and I realised in the past I've been thinking too Jquery like, falling into the trap of manipulating the Dom from the controller, binding a plugin via a jquery selector of an ID, which is just plain wrong in angular.
(ASIDE, you may have noticed if you ever have a problem working out how to do something in angular it is only a matter of time before someone suggests using a directive, it's a cool thing to say, you know, if you're still at that bluffing stage).
So I've created a directive. A directive and don't quote me on this, is like a thing you can register and use in the html, that when it gets rendered fires some javascript, kind of (see http://docs.angularjs.org/guide/directive). So I've created an intTelNumber directive, and in the html set this on my input element, when this is rendered my directive fires, and my 'link' code has a reference to the element the directive is on, and I use this to bind the plugin to the control, so I don't need to know the id of the element in the html to trigger the plugin.
Directive:
app.directive('intTelNumber', function() {
return { // Restrict it to being an attribute restrict: 'A', // responsible for registering DOM listeners as well as updating the DOM link: function (scope, element, attrs) {
scope.$watch('loaded', function () { if (scope.loaded == true) {
// apply plugin element.intlTelInput(scope.options); //validate loaded number var countryCode = element[0].nextSibling.children[0].children[0].className.split(" ")[1]; scope.validateTelephoneNumber(element[0].value, countryCode);
}});
} } });
Only problem was this was happening before the International Telephone Input plugin had loaded, so I put a $watch on property in scope called 'loaded' and changed this value to true when the assetservice concludes the libraries are there. it doesn't feel right, maybe I need to use a directive, oh..
The other tricky thing was I couldn't seem to access within the controller the IntTelInput plugin's existing 'isValidNumber' and 'GetCountryCode' properties and methods. Time was running out but I figured the way the plugin works is to store and retrieve the country code from a css class on an unrelated div element, just below the input element, so the hack to access this was:
Well if you've used the old uCssClassNameDropdown package in Umbraco 4/6 you'll be aware that bundled with the basic ability to create a dropdown data type from the values scrounged from the css stylesheet classnames that I also included a few usercontrols hard wired to work with font-awesome and bootstrap icons, and instead of the dropdown with lots of meaningless icon names the editor could actually see which icon to pick, and if we're honest it's probably this functionality that makes the whole thing a worthwhile endeavour rather than the basic dropdown thing, and I'm painfully aware of the dissappointed people have felt installing uCssClassNameDropdown for Umbraco 7 and the general constructive feedback has been "where are the *#?&!*+ icons ?"
So I could probably have rushed together a hardcoded font-awesome one relatively quickly, but times they-are-a-changin and there are lots of icons-as-a-font libraries out there, and I didn't really want to give the impression that uCssClassNameDropdown is just a font-awesome thing, (even if in that is all people use it with) and I didn't want to keep updating a hardcoded thing everytime a new font-icon thing was invented The only thing that seems to differ in these libraries is the pattern of the <i class="icon icon-classname ...
...So uCssClassNameIconPicker, is kind of the same as uCssClassNameDropdown except you can now set the 'Icon Pattern html' in the property editors configuration, that will render the necessary markup to display a version of the picked item
For the Controller I needed to make sure that in order to render the icons from the stylesheet that the stylesheet was available inside the umbraco backend. to do this with Umbraco 7 I added the 'assetsService' to the controller function:
function ($scope, $http, assetsService) {
and then in the function which retrieves the classnames from the stylesheet added:
// load the supplied css stylesheet using the umbraco assetsService assetsService.loadCss(cssPath);
Rendering the Icon
I created a helper method called 'renderIconPattern' to slot the matched classname into the specified iconpattern:
$scope.renderIconPattern = function (currentClassName) {
return $scope.iconpattern.replace("{0}", currentClassName)
}
In the view (as per the old usercontrols) The basic dropdown is there as a fallback, but above this the icons are rendered in a list:
<li ng-repeat="ccn in classnames">repeating stuff here</li>
to render the icon, I made a call to my helper method using ng-bind-html (because the pattern contains raw html and I didnt't want it encoded) eg.
<li ng-repeat="ccn in classnames"><span ng-bind-html="renderIconPattern(ccn)"></span><span>{{ccn}}</span></li>
Setting the value
This got me a list of lovely icons, but the editor needs to be able to select them, with the old control I'd used jquery to bind to the click event, to set the dropdown value, which was then used as the saved value; but here all we need to do is set model.value, and magically the dropdown will change and the correct selectedvalue will be saved.
$scope.setSelectedClass = function (selectedClassName) { $scope.model.value = selectedClassName; }
and in my view added a link with an ng-click attribute set to the new method:
<li ng-repeat="ccn in classnames"> <a ng-click="setSelectedClass(ccn)"><span ng-bind-html="renderIconPattern(ccn)"></span><span>{{ccn}}</span></a> </li>
Highlighting the selected icon
Determing if an icon is the selected one, again achieved by a helper method in the controller:
$scope.getSelectedClass = function (currentClassName, selectedClassName) {
if (currentClassName == selectedClassName) {
return "selected";
}
else {
return "";
}
}
and in the view, we use ng-class
<li ng-repeat="ccn in classnames" ng-class="getSelectedClass(ccn,model.value)" id="iconHolder-{{ccn}}"> <a ng-click="setSelectedClass(ccn)"><span ng-bind-html="renderIconPattern(ccn)"></span><span>{{ccn}}</span></a>
</li>
it's starting to make a bit of sense to me but...
.. the thing that is not quite right which has bugged me and prevented me uploading this to Our, or blogging about anything and taken more time the rest of the control is the scrolling. It's fine if a user scrolls and selects an icon; but if they use the dropdown the icon doesn't scroll and they can't see which icon is selected.
Angular has an $anchorScroll service which looks neat, but requires you to set the $location in order to scroll to a position, and that was mucking up Umbraco 7's routes, it may be the way to resolve it but in the end I just used animate, to sort of fake a scroll, and this sort of makes it usable, but it isn't perfect, and I've noticed that if the control is on another tab, and the edtior switches to that tab, they won't see the selected icon; so as a temporary workaround, the selected icon will appear next to the dropdown; and I'll think about it a bit more.
The interesting angular part of this, is I set up a 'watch' on the model.value so whenever it changes I can run code, and I have a function called 'goToIcon' which animates to the selected icon.
$scope.$watch('model.value', function (newValue, oldValue) {
$scope.goToIcon(newValue);
});
If you login after upgrade and you've got no left hand section Icons even though your account is admin, you just need to clear the cookies for your site on your machine.
Refreshing cache
Also if you are developing in Angular with Umbraco, and trying to get something to work, and you're not sure whether it's cached, (ctrl F5 doesn't appear to work etc) and you feel like you are going slightly mad then in Chrome if you are running in developer mode, when you hover over the refresh icon you get some extra options, one of which is 'Empty Cache and Hard reload' that does it! - and suddenly you have days of your life back to do something creative instead of seething at why 'Hello World' hasn't been alerted to the screen.
Disappearing Images
If you drag images into Umbraco to upload, and they tantilisingly stay in the window for a second before disappearing without any error message, and you've tried upping the maxrequestlength value in httpruntime; like you would in Umbraco 4 with no joy. If you try to create the media image without dragging and dropping you get the following error. about ContentDispositionHeader cannot be cast:
Then this is probably because you've upgraded or pulled Umbraco using Nuget, and it's made a change to the version of the System.Net.Http dependant assembly in web.config just change:
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 ?
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:
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;
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.
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,
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)
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.
Written by @marcemarc on Thursday, 21 November 2013
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...
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
Desktop + slimmagen
Small Screen + slimmagen
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.
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.
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.
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.
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.
Written by @marcemarc on Wednesday, 13 November 2013
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.
![CropperCapture[326].jpg](/imagegen.ashx?image=/media/1026/CropperCapture-326-.jpg&width=800&compression=90&slimmage=true)
