Skip to content

Instantly share code, notes, and snippets.

@gjstockham
Last active August 5, 2020 07:57
Show Gist options
  • Save gjstockham/1dba29e4af634c845704 to your computer and use it in GitHub Desktop.
Save gjstockham/1dba29e4af634c845704 to your computer and use it in GitHub Desktop.
Steps to install Blob storage and ImageProcessor in Umbraco

Steps to install:

  1. Default Umbraco installation (Empty Web + UmbracoCms nuget package), plus Azure blob storage containers called "media" and "cache", both with "blob" access rights

Set the media type -> Image -> Upload Image property to be "Image Cropper"

  1. Add the UmbracoFileSystemProviders.Azure nuget package Note, this is marked pre-release, so may not appear on a default search

  2. Configure config/filesystemproviders.config

  <!-- Media -->
  <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">
  	<Parameters>
  		<add key="containerName" value="media"/>
  		<add key="rootUrl" value="https://[AzureBlobStorageName].blob.core.windows.net/"/>
  		<add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=[AzureBlobStorageName];AccountKey=[AzureBlobStorageKey]"/>
  		<!--
        Optional configuration value determining the maximum number of days to cache items in the browser.
        Defaults to 365 days.
      -->
  		<add key="maxDays" value="365"/>
  	</Parameters>
  </Provider>
  1. Add the nuget package ImageProcessor.Web.Config, and add the following block to config/imageprocessor/security.config
<service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
  <settings>
    <setting key="MaxBytes" value="8194304"/>
    <setting key="Timeout" value="30000"/>
    <setting key="Host" value="https://[AzureBlobAccountName].blob.core.windows.net/media/"/>
  </settings>
</service>

Images should now be uploaded, stored to blob storage, and appear in the Umbraco Admin panel correctly

  1. Now install the ImageProcessor.Web.Plugins.AzureBlobCache nuget package. In the config/imageprocessor/cache.config file add the following block:
<cache name="AzureBlobCache" type="ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache, ImageProcessor.Web.Plugins.AzureBlobCache" maxDays="365">
    <settings>
      <setting key="CachedStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=[AzureBlobAccountName];AccountKey=[AzureBlobAccountKey]]" />
      <setting key="CachedBlobContainer" value="cache" />
      <setting key="UseCachedContainerInUrl" value="true" />
      <setting key="CachedCDNRoot" value="https://[AzureBlobAccountName].blob.core.windows.net" />
      <setting key="SourceStorageAccount" value="" />
      <setting key="SourceBlobContainer" value="" />
      <setting key="StreamCachedImage" value="false" />
    </settings>
  </cache

You will also need to set the "currentCache" attribute to use this new section

<caching currentCache="AzureBlobCache">
  1. To use a named crop in a page, where "TestImage" is the property name, and "cropname" is the name of the crop:
<img src='@Umbraco.Media(CurrentPage.TestImage).GetCropUrl("cropname")' />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment