Ben Wong is a Web/iOS Developer from Brisbane, Australia. When he's working he is usually coding in HTML, CSS, Javascript, ASP.NET (C#/VB.NET) or SQL. He enjoys working with Umbraco CMS. When he's not coding he's probably on a basketball court.

Using Content Picker Type for Macro Parameter in Umbraco

Umbraco 7.6 introduced the new property editor ContentPicker2 to replace ContentPicker. ContentPicker2 returns IPublishedContent instead of Node ID. When updating old content picker partial view macro parameters to the new content picker type, you will need to make some changes to your partial view

For example, if you have a parameter called Widget that currently uses the original content picker the following would return an integer node id.

Model.MacroParameters["widget"]

But a parameter using the new content picker would return an identifier in UDI format similar to the following.

umb://document/4fed18d8c5e34d5e88cfff3a5b457bf2

To convert the UDI string into an IPublishedContent object, it needs to be parsed and then passed into the Umbraco.TypedContent() method as follows.

var widget = Umbraco.TypedContent(Udi.Parse(Model.MacroParameters["widget"].ToString()));

How to move the Visual Studio Code extensions folder on Windows

I recently started using Visual Studio Code at work. We have a size limit on our profile and VS Code’s extensions folder chews up space very quickly. So I had to work out how to move the extensions folder from the default location to stop it from counting against my quota.

To change the location of the extensions folder there’s a command line parameter –extensions-folder you can use. You will need to update all the Visual Studio Code shortcuts (taskbar, start menu, etc) as well as context menu “Open in Code” options for folders and background in Windows Explorer.

How to update shortcuts

  • Open the properties dialog for the Visual Studio Code shortcut
  • Append –extensions-folder=[alternative path for extensions folder]  to Target

For example, 

"C:\Program Files\Microsoft VS Code\Code.exe" --extensions-folder="C:\vscode-extensions"

Visual Studio Code shortcut properties dialog

How to update context menu “Open with Code” options

  • Open Regedit as Administrator
  • Navigate to Computer\HKEY_CLASSES_ROOT\directory\shell\VSCode\command
  • Append –extensions-folder=[alternative path for extensions folder] the value (Default)
  • Navigate to Computer\HKEY_CLASSES_ROOT\directory\background\shell\VSCode\command
  • Append –extensions-folder=[alternative path for extensions folder] the value (Default)

Visual Studio Code context menu option

Visual Studio Code Regedit

How to configure Umbraco ModelsBuilder to generate models in a separate project

When you first install Umbraco, Models Builder is configured by default to run in PureLive models mode and generates the model classes in the ~/App_Data/Models folder in the Umbraco.Web.PublishedContentModels namespace.

If you’re like me and want more control over namespacing and location of your classes, it’s possible. I’ve worked out 2 different ways of to make Models Builder generate the models in a separate project in a custom namespace.

Changing the namespace is the same for both – set the namespace in an web.config app setting with key Umbraco.ModelsBuilder.ModelsNamespace.

<add key="Umbraco.ModelsBuilder.ModelsNamespace" value="MyUmbracoApp.Core.Models" />

The first method uses the Models Builder API and will require you to manually update the models using a custom tool in Visual Studio whenever you update your document types. So you will need to install the Umbraco.ModelsBuilder.API NuGet package and the Umbraco Models Builder Custom Tool

Dave Woestenborghs has a good description of how to set this up in his article about Models Builder.

The second method uses LiveAppData models mode. I had to work this method out for myself because there weren’t any articles specifically about setting up LiveAppData to generate models in a separate project. I pieced it together by reading the Install and Configure documentation for Models Builder.

The trick is to set the ModelsDirectory and the AcceptUnsafeModelsDirectory app settings. The directory will need to be set relative to the path of the project that has UmbracoCms installed. The AcceptUnsafeModelsDirectory setting needs to be set to true to allow the models directory to be set to a folder outside of the Umbraco website project.

<add key="Umbraco.ModelsBuilder.ModelsMode" value="LiveAppData" />
<add key="Umbraco.ModelsBuilder.ModelsDirectory" value="~/../MyUmbracoApp.Core/Models" />
<add key="Umbraco.ModelsBuilder.ModelsNamespace" value="MyUmbracoApp.Core.Models" />
<add key="Umbraco.ModelsBuilder.AcceptUnsafeModelsDirectory" value="true" />

Both methods have their merits, but I think if you’re document types are changing frequently you’ll want to use the LiveAppData method.

How to set up Gulp to optimise PNG images using Zopfli

Jeff Atwood posted about using Zopfli to optimise PNG images. Here’s how to set up Gulp to do it. I’m assuming you already have a project with Gulp set up that uses gulp-imagemin.

  1. Install imagemin-zopfli by running the following on the command line in the project folder. 
    npm install imagemin-zopfli --save-dev
  2. In the project’s gulpfile.js, update the task that runs gulp-imagemin to use imagemin-zopfli by setting the use option. 
    var imagemin = require('gulp-imagemin');
var zopfli = require('imagemin-zopfli');

gulp.task('imagemin', function() {
    return gulp.src('./src/images/*')
        .pipe(imagemin({
            use: [zopfli()]
        }))
        .pipe(gulp.dest('./build/images/'));
});

I did a quick comparison between the default imagemin PNG optimiser and Zopfli. Zopfli compressed my sample PNG better (59.8% vs 53.8%), but took longer to do it (866ms vs 101ms).

terminal screenshot