11 votes

Azure CDN Toolkit for Umbraco

The AzureCDNToolkit package allows you to fully utilise and integrate the Azure CDN with your Umbraco powered website. There are three file types that should be served from CDN if you have one.

  • Assets - css, js & static images used by templates etc..
  • Images managed by Umbraco - cropped or not
  • Files - pdfs, docx etc

The toolkit depends on two packages being installed, these are the UmbracoFileSystemProviders.Azure and the ImageProcessor.Web Azure Blob Cache plugin

Once installed and setup the package provides UrlHelper methods to use for resolving url paths for assets and Image Cropper urls and also a value converter for the TinyMce editor so that images within the content are also resolved.

Some examples:

@Url.ResolveCdn("/css/style.css")

@Url.GetCropCdnUrl(Umbraco.TypedMedia(1084), width: 150)

<div class="brand" style="background-image: url('@Url.ResolveCdn(home.GetPropertyValue<string>("siteLogo") + "?height=65&width=205&bgcolor=000", false, false)')"></div>

When using these methods, the toolkit will attempt to resolve the urls to their absolute paths and crucially ensures that a cache busting querystring variable is added. Without the cache busting using the Azure CDN can become tricky when you want to update with new content. This has the added benefit of avoiding your site needing to handle any 301 redirects and also gets some optimisation benefit (PageSpeed etc).

Some examples:

  1. <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
  2. <img src="/media/1052/jan.jpg?anchor=center&mode=crop&width=150&rnd=131070397620000000"/>
  3. <a href="/media/1050/blank.docx">Download Word Doc</a>

Becomes:

  1. <link rel="stylesheet" type="text/css" href="https://azurecdntoolkitdemo.azureedge.net/assets/css/bootstrap.min.css?v=0.0.1">
  2. <img src="https://azurecdntoolkitdemo.azureedge.net/cloudcache/e/0/2/7/d/2/e027d2acab49ab523db3ece72c0651310dd3320c.jpg"/>
  3. <a href="https://azurecdntoolkitdemo.azureedge.net/assets/media/1050/blank.docx?rnd=131070387800000000">Download Word Doc</a>

Note: this package is not compatible with Slimsy v1 (it should work with the upcoming Slimsy v2 using img srcset)

NuGet

It is highly recommended that you install this package via NuGet:

Install-Package Our.Umbraco.AzureCDNToolkit -Pre

Documentation

  1. Azure Setup
  2. Umbraco Setup
  3. Umbraco Implementation
  4. Umbraco Dashboard
  5. Reference

 

Screenshots

Package owner

Jeavon Leopold

Jeavon Leopold

Jeavon has 13114 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
8.1.x (untested)
8.0.x (untested)
7.14.x (untested)
7.13.x (untested)
7.12.x (untested)
7.11.x (untested)
7.10.x (untested)
7.9.x (untested)
7.8.x (untested)
7.7.x (100%)
7.6.x (0%)
7.5.x (50%)
7.4.x (100%)
7.3.x (100%)
7.2.x (untested)
7.1.x (untested)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Package Information

  • Package owner: Jeavon Leopold
  • Created: 01/06/2016
  • Current version 0.1.2
  • .net Version 4.5
  • License Apache 2.0
  • Downloads: 709

External resources