Responsive Image Cropping for Episerver is Here!

SCORE for Episerver – New Image Crop Tool

Responsive Web Design (RWD) offers a cost-effective, high quality and easily managed delivery of content to a variety of devices.

Many teams build sites in RWD by using custom or popular responsive frameworks like Twitter Bootstrap or Foundation Zurb. But how can we combine the responsive design goodness with an intuitive content authoring experience in Episerver?

The Problem

There is a HUGE difference in the resolution and physical size of a desktop monitor and a mobile phone or tablet.

When adding images to the website, we wish to take advantage of the “real-estate” of the desktop system to add beautiful images that help tell our story.  These images can be large, and they set a focal point – a position in the image that is meant to focus the viewer’s attention to a concept or meaning of the depiction.

When we scale the screen down to a smaller device, we really have 3 choices:

1. Allow the browser to crop the image
2. Allow the browser to scale the image
3. Use CSS or Javascript to replace the image with another one

Scaling or Cropping the Image

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

Options #1 and #2 do some good in some cases, however, they can easily distort the image or the message of the image by changing its focal point.

Let’s take an example from EpiJuice – here’s a full resolution image for the desktop

Image Crop Steps

Key Features

• Upload High resolution image (Supports Retina displays)
• Set focal point for each breakpoint and device
• Locking focal point feature
• Supports drag and drop to replace an image for each device
• Can have unique images per device
• Use built in zoom in/out controls
• Toggle Crop mode to get your image just right

Check out this video to see the Responsive Image Cropping in action!

Brainjocks SCORE: Responsive Image Cropping

Custom Blocks – Picture Field

In your custom blocks, you can use a new field type called a PictureField. Simply give it the ResponsivePictureEditorDescriptor, and a number of CropPoint attributes. Each CropPoint has a width, height, device key, and media query. this is CSharp and usually the language key in code formatters is ‘csharp’

 [EditorDescriptor(EditorDescriptorType = typeof(ResponsivePictureEditorDescriptor))]
        [CropPoint(768, 512, "Desktop", "(min-width: 992px)")]
        [CropPoint(512, 480, "Tablet", "(min-width: 768px) and (max-width: 991px)")]
        [CropPoint(512, 256, "Mobile", "(max-width: 767px)")]
        public virtual PictureField Image { get; set; }

We provide the field rendering for you, all you need to do is use @Html.PropertyFor(x => x.Image) within your block’s View file.

This will result in an HTML5 <picture> tag to be rendered with the appropriate croppings.

When cropping is complete, we save a physically cropped version of the asset for each device viewport specified by the CropPoint attribute back to Episerver’s media library. This means that the optimal image size is delivered to each device, as specified by each crop point’s media query. 

You can associate different CropPoint attributes with different instances of PictureField across your blocks. This means each block can have it’s own crop sizes defined. You can also define as many CropPoint attributes as you need.

If you attempt to crop an image that already has existing croppings for this block type, you’ll be prompted to adopt and reuse them. Otherwise, you have the option of regenerating croppings.

Optimal image size is delivered to each device, as specified by each crop point’s media query.