Mark Everard

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

Image resizing in EPiServer 7.5 CMS

with 10 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 http://imageresizing.net/. 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.


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

   [ScaffoldColumn(false)]
   [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 2 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.


   [UIHint(UIHint.Image)]
   [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 :)

imagevalidation

The source code is available at https://github.com/markeverard/Chief2moro.ImageDataExtensions

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 - http://nuget.episerver.com/ - search for CHIEF2MORO.ImageDataExtensions

Written by Mark

February 3rd, 2014 at 11:00 am

Posted in ASP.NET,C#,EPiServer

POSSIBLE.RobotsTxtHandler for EPiServer 7.5

with one comment

A few months back I put together a robots.txt handler for EPiServer CMS 7. Technology moves quickly and since then EPiServer have released CMS version 7.5

My generous ex-colleague Marcin (https://github.com/wma83) has forked and updated the package to work with version 7.5. This involved a few minor changes to handle the changes in how sites and site settings are defined.

Its on the Nuget feed already – http://nuget.episerver.com/ - search for POSSIBLE.RobotsTxtHandler version 2.0.1

The source code is available at https://github.com/markeverard/POSSIBLE.RobotsTxtHandler

Written by Mark

January 30th, 2014 at 9:17 pm

Posted in ASP.NET,EPiServer