I’m not sure if everyone who reads my blog knows that I’m the trainer for the official Swedish Umbraco courses. I was after CodeGarden 2013 that I was asked to help out with the education of developers and designers here in Sweden and I’ve had a lot of fun and made a lot of new friends during these events!

IMG_4170

 

Over the years I’ve had a lot of really smart people attending my courses – but I’ve never had any student regretting that they attended. It does not matter which skill-level you have before you come – there is always something new to learn and to try. A lot of people think of different courses as a way to get certified  and yes – that’s really good and very important. At the same time I really want to point out the greatest value about the courses, that’s all the knowledge  that you can take home and use in all new projects.

 

When I attended the trainings I’ve been working with Umbraco for about 4 years and still I decided to go to the Fundamentals training just to make sure that I haven’t missed anything important. It was some repetition but I got away after these to days with about 10 things did I did not know before – big features in the core that I’ve never used or small tips and tricks that made some tasks trivial compared to how I’ve solved them before.

 

This week the Norwegian developer Lars-Erik Aabech pointed out this with a nice tweet about something as simple as the “Alt Template”-feature of Umbraco.

 

 

A lot of experienced Umbraco developers that have not attended the trainings have probably missed out on this and on stuff like “Recursive properties”. These to thing are just small examples of stuff from the Fundamentals-training that self-thought developers never get to know.

 

So why does the trainings matters?

  • Fastest way to get a compact “smorgasbord” of up-to-date knowledge about Umbraco
  • Don’t miss any details or fundamentals
  • Official certification –  comforting for clients

 

If your in Sweden and thinks about attending a course, have e look here for the next training event!

Today my blog post for 24 days in Umbraco was released. The topic is “The code that changes my life”.

 

24days

 

This is a great Christmas tradition where the community posts one article per day up until Christmas! Head over to the site and read about some really interesting topics for example:

 

 

You’ll find all the articles here: http://24days.in/umbraco/2015/

 

 

uhang-585

 

I finished of last week by participating in Warren Buckley's lovely uHangout. This time I showed my latest package “The Dashboard” which also won this years package competition on CodeGarden 15. The package is a really simple dashboard that can be used to give both editors and developers a better first experience when the log on to their Umbraco backoffice. This is how it looks:

 

635698726453441911_thedasboardpng

 

Please Download The Dashboard and give it a spin! If you would like to contribute (or just leverage the source code) the project is hosted on GitHub: https://github.com/enkelmedia/TheDashboard

 

Our conversation also evolved into an overall discussion about the editor experience in Umbraco CMS and how you as a developer can improve it.

 

If you want to watch the show it on http://uhangout.co.uk/ or on YouTube: https://www.youtube.com/watch?v=fNoHxYSuBXo

 

I’ll try to post a summery of the tips and tricks and the packages that I talk about in the upcoming days.

 

Cheers! =D

Since Visual Studio 2013 update 2 VS includes a nice Json editor that makes is easier to edit files containing json data. By default this editor is only used for .json-files and since the json-formated package.manifest-file used to create new plugins for Umbraco has the manifest-extention Visual Studio won’t add any syntax highlighting.

 

This is easy to fix.

 

1. Go to Tools / Options

2. I the left menu click on Text Editor and then File Extention.

3. Write “manifest” in the upper left text box, choose JSON Editor in the dropdown and click on Add.

4. Hi OK, open your manifest file and – ta da!

 

Vs -manifest -extention

 

PS. If you like the screen recorded GIF (I do) check out this awesome project: https://screentogif.codeplex.com/

 

swetugg

 

February 2-3 next year the Swedish .NET User Group (SWENUG) will host a two day .NET-conference in Stockholm, Sweden.

 

Topics varies around the .NET-space and  I’ve got the honor to speak about Umbraco CMS. I’m planning to do a very short basic intro about Umbraco and then dive into how to extend the editor environment using AngularJS. My experience from showing Umbraco to new users is that the Angular-based property editors really impresses people. My hope is that this session will help to further grow the Umbraco community here in Sweden.

 

If you would like to join, tickets only costs 500 SEK, read more at swetugg.se

 

swetugg-speaker

As long as I can remember Umbraco has shipped with a set of presets for the url replacing feature. This is the feature that takes the node name and turns it into a valid url. These presets lives in the /config/umbracoSettings.config-file and used to look something like this.

 

<urlReplacing removeDoubleDashes="true">
   <char org=" ">-</char>
   <char org="""></char>
   <char org="."></char>
   <char org=";"></char>
   <char org="/"></char>
   <char org=":"></char>
   <char org="+">plus</char>
   <char org="*">star</char>
   <char org="&"></char>
   <char org="?"></char>
   <char org="æ">ae</char>
   <char org="ø">oe</char>
   <char org="å">aa</char>
</urlReplacing>

 

In later versions of Umbraco (I think since Umbraco 7) the urlReplacing element has been removed from the default umbracoSettings.config-file and the presets are hidden. At CodeGarden14 this year I learned very much from Stephans session about the core internals of Umbraco (Slides: http://www.zpqrtbnk.net/CoreInternalsForWebsiteDevelopment.pdf) one thing was the toAscii-property of the urlReplacing-element. Since there is hundreds of different chars that you might want to replace and it’s very likely that you’ll miss some – that why they have included this great little flag. So all the configuration above can be replaced with this simple line:

 

<requestHandler>
  ....
    <urlReplacing toAscii="true" />
</requestHandler>



I had that question in mind when I was working with a new MVC-site using Umbraco 7 and wanted to share my conclusions. Well after some googling I found this great blogpost from the Umbraco core-developer Shannon Deminick. It’s related to Umbraco 5 (RIP) but the concept still applies to the MVC-implementation in Umbraco 7 (and 6), in one of the comments he explains the difference.

 

So. This is the thing.

Use return CurrentUmbracoPage()

When you just want to return the current page. Here you can use the ViewData and ViewBag object to pass data from the controller to the view and that will work just fine. Generally you want to return to the current page if you want to keep the POST-data that was sent to the controller.

Use return RedirectToCurrentUmbracoPage()

When you really want to redirect the user. Shannon’s writes: “If your POST is successful, you shouldn't just return a response, you should redirect to a page so you can avoid the aweful issue of having a user press refresh and have it resubmit the POST”. To pass data back to the view you’ll need to use the TempData-object that will “survive” the redirect.

 

So if you’re creating a form and the model state IS valid, you should perform your actions and RedirectToCurrentUmbracoPage(), if the model is not valid you should just return the CurrentUmbracoPage(). That’s why many examples looks like this:

 

if(!ModelState.IsValid)
   return CurrentUmbracoPage()
// do stuff here
return RedirectToCurrentUmbracoPage()

 

Another thing to notice about the routing is “Just FYI, when you POST to a SurfaceController, you are just posting to your own controller which is outside of the Umbraco process, it is just a very normal MVC post. So when you do a return CurrentUmbracoPage call, that then passes execution back to Umbraco to go lookup the page that was posted from and renders it. You could in theory just return your own View(model) which will be completely outside the umbraco process, because it is just an MVC normal controller.

 

Thanks Shannon for making this clear! #h5yr

I’m working on a web application where I’m using the great mirco orm PetaPoco for my data access. Is a really great and super fast ORM that works with SQL Server, SQLCE. MySQL and more.

I’m not gonna cover the basics of PetaPoco in this blog post so if you have not worked with it please read the introduction from TopTen Software.

Now. In this solution we where working with stored procedures (SP) in the SQL Server which is quite simple with PetaPoco, to execute a SP called OutputDemo with two parameters, just write

 

var sql = Sql.Builder.Append(";EXEC OutputDemo @0, @1, "Markus",29);

 

So that's easy. But what if we need to grab some output parametersfrom the sp as well? That took me some more work to figure out. I googled a lot on the subject and there was not really any good recourse so i figured i had to share my solution.

First, let’s look look at the stored procedure that I’ve created for this demo

 

CREATE PROCEDURE [dbo].[OutputDemo]
    @name varchar(50),
    @age int,
    @resName varchar(50) OUTPUT,
    @resAge int OUTPUT
AS
SET @resAge= @age + 10
SET    @resName = 'Name: ' + @name   


A super simple sp that will set the values of the output parameters depending in the value in the input parameters for name and age. So the resAge-output parameter will have the value of the inputted age plus 10, and the resName-output parameter will just be prefixed with “Name:”.

Now. To use this and to get the values back from the query there is couple of thing we need to do. First we need to create variables that holds the returning values from the output parameters.

 

var opName = new SqlParameter("@resName", SqlDbType.VarChar);
opName .Direction = ParameterDirection.Output;
opName .Size = 50;

var opAge= new SqlParameter("@resAge", SqlDbType.Int);
opAge.Direction = ParameterDirection.Output;
opAge.Size = 20;

 

This is regular SqlParameters – I’ve just ignored the fact that this would “tie” me to SQL Server since my SP’s are created in SQL Server is just don’t care about this dependency. The important thing to notice is the Direction and the Size-properties that both are mandatory. Next wee need to create the query:

 

var s = Sql.Builder.Append(";EXEC OutputDemo @0, @1, @2 OUTPUT, @3 OUTPUT",
           "Markus",
           29, 
           opName ,
           opAge
          );

 

As you see here I’m adding the word “OUTPUT” after each variable for the output parameters – this tells the ADO.NET and PetaPoco that these variables should be populated with the return values of the output parameters.

 

So with this code executed the value of opName should be “Name: Markus” and opAge should be 39. Here’s the complete code:

 

      var opName = new SqlParameter("@resName", SqlDbType.VarChar);
       opName .Direction = ParameterDirection.Output;
       opName .Size = 50;
       var opAge= new SqlParameter("@resAge", SqlDbType.Int);
       opAge.Direction = ParameterDirection.Output;
       opAge.Size = 20;
       var s = Sql.Builder.Append(";EXEC OutputDemo @0, @1, @2 OUTPUT, @3 OUTPUT",
          "Markus",
          29, 
          opName ,
          opAge
         );
       new Database().Execute(s);


     

Yesterday I was listening to my favorite podcast .NET-ROCKS and heard about Troy Hunts great Azure demo - not not just a great demo - it's The world's greatest Azure demo, just wanted to share it here as well:

 

Since version 7.1 of Umbraco was released the core now contains a great image cropper. Not only that. It also contains a great image processing library called ImageProcessor written by James South (@james_m_south).

 

The image cropper in Umbraco 7 is really a piece of art based on the CropUp-package from Umbraco-genius Niels Kühnel (@nielskuhnel). The big “news” with the cropper is something called a “focal point” that the editor can set. When this point is in place Umbraco is smart enough to figure out any crop based on this point. This means that you don’t have to force the editor to make 20 different crops, they can just set the focus point and the different crops will be generated. We’re going to explore this more in this post and I'll show you how to quickly set up the image cropper and render the cropped image on the front end of your website.

 

Newsletter Studio -banner -580x 250

Here is how you do

 

1. Set up the data type in the developer-section of Umbraco 7. Right click data types and create a new data type. Let's call it "Image Cropper".

 

2. Just as with the cropper from earlier versions of Umbraco we now need to set up one or more crops. Let's just use a simple crop of 120x120 px.

imagecropper-datatype

 

3. Next, we need to add this data type to one of our document types. Let’s go and do so in the settings-section. I’m giving my new property the name “image” but you can choose what ever name that suites you’re solution.

 

imagecropper-doctype

 

4. Now let’s upload an image and set the focus point by dragging the blue dot to the part of the image that we want to focus on. Let’s don’t create any special settings for the 120x120 crop that we created – just hit “Save and publish”.

 

imagecropper-image

 

5. Let’s go to the settings-section and open the view/template for the document type that we’ve added the image cropper to. To render the crop in on the page we need to use a method called GetCropUrl() from the IPublishedContent-type in Umbraco. Let’s add this code the view and load the page in the browser.

 

<img src="@Model.Content.GetCropUrl("image", "normal")" />

 

The first parameter is the alias of the property and the second is the name of the crop, this should look something like this.

 

imagecropper-croppedimage

 

6. As you can see Umbraco 7 created a crop based on the focus point that we provided. To prove that this really works, let’s ignore the “normal” crop and set the width and height in the method call.

 

<img src="@Model.Content.GetCropUrl(propertyAlias:"image", width:300, height:100)" />

 

This will generate an image that’s 300x100 pixels, still with the face in focus

imagecropper-croppedimage2

 

7. Now, let’s try to move the focal point and look at the resulting crop

imagecropper-movedpoint

 

 

8. But, if we don’t like the default crops that Umbraco generates we can of course change them to look exactly like we want. Update the view-code to use the “normal” crop again and open the node with the crop back to the content-section. Click on the little thumbnail under the big picture, in the dialog that appears. Drag the slider to zoom and drag in the picture to adjust the part that you want to keep in the crop – click the “cross” in the upper right corner to save the custom crop beforeyou click save and publish.

 

 

imagecropper-customcrop

 

 

9. Going back to our view and refreshing the page will show our new crop

 

imagecrop-customcropfrontend 

 

 

The GetCropUrl()-method has a lot of properties that’s optional like width, height, quality, useCropDimensions, cacheBusterValue, ratioMode, upScale – see the source code of Umbraco 7 for more info on what they all means.

 

Hope you enjoy the new image cropper in Umbraco 7, follow this blog for most posts about Umbraco and please also follow me on twitter: @enkelmedia.

Tip: Looking for a integrated newsletter solution for Umbraco? Check out Newsletter Studio - sends newsletter from directly from the Umbraco backoffice.

 
Newsletter Studio -banner -580x 250