Mark Everard

Hello, I'm Mark – a PhD physicist turned technologist / architect.

Archive for February, 2014

Image resizing in EPiServer 7.5 CMS

with 13 comments

Dynamic image scaling is an often sought after feature for interface designers and content editors. Whilst not natively supporting this feature; EPiServer 7.5 CMS contains a neat hidden feature (Thanks @athraen for the heads up) that allows a limited but useful ability to automatically scale your images.

True dynamic scaling, and by that I mean that your http request for an image also contains your requested height, width and cropping options, is a complex operation to perform successfully, just check out the interesting blog posts at Note there is a community integration of ImageResizer.Net with EPiServer 7.5.

The new media editing interface allows in-line preview of uploaded images via a scaled thumbnail representation of the image. These are created automatically by EPiServer for any ImageData content types that are created.  This is achieved via a ImageDescriptor attribute which can be placed on any ‘routed’ blob property (i.e those on ImageData content types).

Thumbnails in the media edit interface

The ImageDescriptor is pretty cool, but not so helpful when you start working with real images with differing aspect ratios.

A simple use case could be that for every uploaded image you want to create a version that has a maximum width of 300 px, which could be used in a site sidebar. The ImageDescriptor as-is forces you to define a height and width at compile time meaning that all uploaded images will be resized to the same width and height specified in the attribute. Any additional height or width will be filled with white-space.

The CHIEF2MORO.ImageDataExtensions nuget package I blogged about previously also contains a couple of additional attributes to help overcome this limitation. Extend your ImageData content object (ImageFile in Alloy) with a few Blob properties for the different sizes and mark up with the attributes. The blob routing feature in EPiServer means that these scaled images are available publically (<imagename>.jpg/image250 and <imagename>.jpg/half). Behind the scenes both of these descriptors use the underlying ThumbnailManager class contained in the EPiServer API.

   [ImageWidthDescriptor(Width = 250)]
   public virtual Blob image250 { get; set; }

   [ImageScaleDescriptor(Percent = 50)]
   public virtual Blob half { get; set; }

The ImageWidthDescriptor only requires you to specify the scaled width and will calculate the height at content publish time from the originally uploaded image dimensions to ensure that the aspect ratio is maintained (so you get no padding / whitespace)

The ImageScaleDescriptor allows you to specify a scale and will calculate the desired height and width from the original image.

Written by mark

February 13th, 2014 at 10:00 am

Posted in ASP.NET,C#,EPiServer

Validating image dimensions in EPiServer 7.5 CMS

with 3 comments

EPiServer 7.5 delivers a completely new digital media management system offering a host of editor enhancements, including integration into the new editing interface, multiple file drag and drop file upload, inline media preview, and drag and drop placement of media into ContentAreas and the Rich-Text-Editor.

From a developer perspective, much has changed too. Media files are not stored through a Virtual Path Provider but as a Blob (Binary Large OBject). This allows media assets to be stored and used in true elastic cloud scenarios, though the default blob provider still saves media files to disk (just as the old VPP system did).

Also new, is that media assets are now treated as first class content items. That is; they inherit from the IContent interface and have code definable properties allowing better definition of media meta data. This is now defined in a strongly typed manner just as you do for other IContent items such as pages, blocks and catalogue nodes and items in Commerce.

Image size validation

A media item has a one-to-many mapping to a file extension, so EPiServer will only associate one IContent class with a particular file extension or collections of extensions. A basic content handling of media data is included in the Alloy Templates demo site, and includes three new IContent classes, inheriting from the core VideoData, ImageData and MediaData objects.

This one-to-many mapping means you have to take a slightly different approach to content modelling media items than you do for page or block types. For example, you may want to have banner images that must have a particular size, or a photo image that requires additional meta data than a standard image. For now you can’t do this. All files of a particular extension have to contain the same metadata.

This means that you cannot validate images for size when you upload them (as you’d restrict every single image with that extension to be that size). Although this feels restricting, it is perhaps the correct decision as media size only matters when you display your content (and although it hasn’t has much love recently, EPiServer does offer an online image editor). It is only when you use your image within a particular presentation layer (page /block) that you really need to constrain it to a definite size.

Validating an image used in context

You can apply validation to any property used within a page or block type via a validation attribute. Media assets are stored as content references in a page or block; with a specific UIHint attribute to allow the editing system to know that you require an IContent inheriting from ImageData.

I’ve put togther a validation attribute that you can add to a ContentReference property which will validate the size of any ImageData content referenced in that property.

   [Display(GroupName = SystemTabNames.Content,Order = 3)]
     [RequiredImageSize(Width = 300, Height = 100)]
     public virtual ContentReference Image { get; set; }

You can specify a height and or a width in pixels. Currently you can only apply this to ContentReference properties but I can see it would also be useful to apply it to ContentAreas – I’ve just not got round to that yet 🙂


The source code is available at

A package containing this validation attribute, along with some other image related goodies that I’ll blog about soon, is available in the EPiServer Nuget Feed – – search for CHIEF2MORO.ImageDataExtensions

Written by mark

February 3rd, 2014 at 11:00 am

Posted in ASP.NET,C#,EPiServer