Wildscreen pride themselves on finding photographers and film makers to take awe-inspiring snapshots of wildlife across the world and through the Wildscreen Festival they can be rewarded for their work.

Due to the nature of Wildscreen's work and what the Wildscreen Festival is all about, we knew that the festival website needed to bring imagery to the forefront of the site.

Blog (1)

When Wildscreen asked us about creating a site for them, we knew that Umbraco had the perfect tools to ensure the media heavy requirements were handled adequately and efficiently.

The design involved high quality images with the content overlayed on top of them. We had to ensure that these images scaled well for mobile devices but also try to reduce the workload for the content editors.

Mobile Blog Image

For this we simply implemented multiple image fields to ensure that the mobile site would serve up mobile optimised images at the correct dimensions instead of resizing full size images and requesting more data than required. This gives the user a visually complete page sooner, enriching the user experience.

However another challenge we encountered was how to effectively crop the same image for different purposes. For example we may want to use one image as a thumbnail, a banner or display it full size.

 Cropped Images

For this we implemented CropUp which allows us to determine different crops associated to a different key. So, using the example above, we would have a crop specified for thumbnails and banners. 

Not only is this beneficial to the content editor, as they can reuse they same image multiple times for multiple purposes, but it benefits the developer too.

From a development perspective, we can simply use the following markup to obtain the required crop:

CropUpModule.GetImageUrl("<image path>", new ImageSizeArguments {CropAlias = "<crop alias key>"})

This gives us the flexibility to show the exact crop specified by the content editor, dynamically.

You can visit the site at http://www.wildscreenfestival.org.uk.