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:
- Allow the browser to crop the image
- Allow the browser to scale the image
- 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
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.
