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

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.