Skip to main content

Back-End Development

Responsive Image Cropping for Episerver is Here!

Episerver Score Image Crop Tool@1x

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

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

brainjocks SCore responsive image cropping for episerver

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. 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Dylan McCurry, Solutions Architect

I am a certified Sitecore developer, code monkey, and general nerd. I hopped into the .NET space 10 years ago to work on enterprise-class applications and never looked back. I love building things—everything from from Legos to software that solves real problems. Did I mention I love video games?

More from this Author

Follow Us