umbraco 7.4.1 and azure blob storage

DISCLAIMER: BEFORE YOU MAKE ANY CHANGES TO cmsPropertyData TABLE IN THE DATABASE. DO A BACK UP. I HOLD NO RESPONSIBILITY FOR A FAILED UPDATE.

Azure Blob storage Module

https://our.umbraco.org/projects/backoffice-extensions/azure-blob-storage-provider

As part of the 7.4.1 upgrade, Umbraco have changed the way in which images are stored in the database. In previous version of the Core, images were served as absolute URLs to the media item, however, these are now stored as a JSON object.

Stored without image focus points

{"src": "http://www.mywebsite.com/myimage.jpg", crops: []}

Stored with image focus points

{
  "focalPoint": {
    "left": 0.5,
    "top": 0.5
  },
  "src": "http://www.mywebsite.com/myimage.jpg"
}

After upgrading there maybe instances where your local image library has lost the image thumbnails when trying to attach an image using the media picker. This is due to the upgrade process not modifying the old data to the new column. In the cmsPropertyData table, DataNvarchar was still populated with a physical URL to the image an

If the image wasn’t in the correct URL format, it would fall back to using http://www.yoursite.com/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=http://www.mywebsite.com/myimage.jpg

As the image isn’t local to the project, the url could not be used to generate a thumbnail.

Settings > Media Types > Image > Upload Image > change type to Image Cropper

Running the SQL below, should format the urls into the required format to be able to view the images.

UPDATE cmsPropertyData 
SET cmsPropertyData.dataNtext = Formatted.dataNtextCol
FROM (
	SELECT TOP(1000) cmsPropertyData.id,cmsPropertyData.propertytypeid, cmsPropertyData.contentNodeId, '{"src": "' + cmsPropertyData.dataNvarchar  + '", crops: []}' as dataNtextCol
	FROM cmsPropertyData
	WHERE (cmsPropertyData.propertytypeid = 135 AND cmsPropertyData.dataNvarchar is not null AND cmsPropertyData.dataNvarchar  '' AND dataNtext is null) 
	   OR (cmsPropertyData.propertytypeid = 6 AND cmsPropertyData.dataNvarchar is not null AND cmsPropertyData.dataNvarchar  '' and dataNtext is null)
	   ORDER BY cmsPropertyData.contentNodeId
) as Formatted
WHERE cmsPropertyData.id = Formatted.id


UPDATE cmsPropertyData 
SET cmsPropertyData.dataNvarchar = NULL
FROM (
	SELECT TOP(1000) cmsPropertyData.id, cmsPropertyData.propertytypeid, cmsPropertyData.contentNodeId, '{"src": "' + cmsPropertyData.dataNvarchar  + '", crops: []}' as dataNtextCol
	FROM cmsPropertyData
	WHERE (cmsPropertyData.propertytypeid = 135 AND cmsPropertyData.dataNvarchar is not null AND cmsPropertyData.dataNvarchar  '' AND dataNtext is not null) 
	   OR (cmsPropertyData.propertytypeid = 6 AND cmsPropertyData.dataNvarchar is not null AND cmsPropertyData.dataNvarchar  '' and dataNtext is not null)
	    ORDER BY cmsPropertyData.contentNodeId
) as Formatted
WHERE cmsPropertyData.id = Formatted.id

Umbraco image library and SVG images

In previous versions of the CMS core, all links to images have been stored as a single text string which would mean that developers wouldn’t have to check for a type of media image that was consumed on an Umbraco page.

With the introduction of the image cropper type, the way in which images are stored in umbraco have changed.

There are two ways in which images are stored in the cmsPropertyData table
With no focus points

{ "src": "http://www.mysite.com/images.jpg", crops: [] }

With focus points

{ "focalPoint": { "left": 0.5, "top": 0.5 }, "src": "http://www.mysite.com/images.jpg" }

If you look in the cmsPropertyType table, this should effect types Upload image (6) and Thumbnail Image (135)

In your umbraco project, you would use the following code to extract the new image.

UmbracoHelper umbracoHelper = new Umbraco.Web.UmbracoHelper(Umbraco.Web.UmbracoContext.Current);
var mediaItem = umbracoHelper.Media(content.GetPropertyValue(fieldName));
Var imageSrc = mediaItem.umbracoFile.src

This works fine as long as you are not consuming any media item that falls under the .jpg, .png, .gif. Umbraco detects the SVG format as a file type and sets the cmsPropertyData Upload file(24) to a physical URL of the file that needs to be used.

This now depending on how you serve your images to your templates. I use an extension method for the IPublishedContent and a fieldName, which I can call in my views.

Here I need to check the type of object that is being brought back via the IPublishedContent. The new image cropper images will return an object of Umbraco.Web.Models.ImageCropDataSet and an SVG will return a string.
Calling the src field name on an mediaItem.umbracoFile when returning an SVG will throw an exception.

I have chosen to check the type of what is being returned. Check out this great post to get a good example of looking up a type in a switch that doesnt use heavy reflection.
http://stackoverflow.com/questions/7252186/switch-case-on-type-c-sharp/7301514#7301514

We have added the following code to the extension method.

var ts = new TypeSwitch()
    .Case((Umbraco.Web.Models.ImageCropDataSet x) => result = mediaItem.umbracoFile.src)
   .Case((string x) => result = mediaItem.umbracoFile);

ts.Switch(mediaItem.umbracoFile);

We can now pick either an SVG or an image from the media library, it wont throw an exception as you will be returning either the src of the image cropper object, or the URL of the uploaded file type.