DFE 2.3.0 - 3 Validating Asset Selection

When you are designing and developing web sites solutions where you have many different editors, you can't always be sure of the skill level they have - and often that can have consequences. It is not uncommon to see images used on web sites that are either larger than needed, in an aspect ratio not fitting the design, or where the original was too small to be used in that location and hence has been stretched to a point where it's pixelated.

In order to overcome some of these challenges, the Digizuite DAM for Episerver integration comes with a few useful validation attributes you can use in your content models to ensure that the editors are limited to using images that fit the purpose intended.

RequireCrop attribute

If you put the Require Crop attribute on a property, it will ensure that the image or images referenced in that property will only be of the crop, which crop type you have specified.

The Crop Types are defined in the DAM center, and you only have to provide part of the name of the crop for this to work.

        [UIHint(UIHint.Image)]
        [RequireCrop("Banner")]
        public virtual ContentReference BannerImage { get; set; }

You can use the attribute either on a ContentReference property - or to a list of content references in order to ensure that all of them adhere to the standard. This can be useful for example in carousels/sliders.

Should an editor accidentally use an image that is not the right Crop, they will be met with a friendly error message - and will have to remove it again to publish the content.

RequireHasCrop Attribute

Sometimes you will have only one reference to an image, but use different crops of the image in your code (https://digizuite.atlassian.net/wiki/spaces/DD/pages/799637605/DFE+1.0.0+-+4+Rendering+Assets). Maybe you will use a square crop when a handheld device is in vertical, but a widescreen when it's horizontal. In those cases you can ensure that at least a crop of the required type exists in an editor validation as seen here:

        [UIHint(UIHint.Image)]
        [RequireHasCrop("WideScreen")]
        public virtual ContentReference ImageWithWidescreen { get; set; }

ImageSize Attribute

Finally, sometimes you want to impose restrictions on what kind of source image is used. This is typically to ensure a minimum width or a minimum height - cause even though Digizuite automatically creates varies sizes of media formats, the resolution can never get better than the original. Using the ImageSize validation attribute you can set both minwidth, min height and a required orientation of the source image, as seen below.

   public class JumbotronBlock : SiteBlockData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 1
            )]
        [CultureSpecific]
        [ImageSize(MinWidth =1200, Orientation =ImageOrientation.Landscape)]
        [UIHint(UIHint.Image)]
        public virtual ContentReference Image { get; set; }

		//...
	}