Render an AdaptiveImage property

1. Render with default settings

The following renders images, compliant with any Size and Proportions constraints, as a <picture> element. The embedded img element will have its alt attribute set to the image description specified for the property, if any.

@Html.PropertyFor(x => x.MyAdaptiveImage)

Note: See Configuration for details on how to customize settings such as default breakpoints.

2. Render with optional settings

The following will render images with specific breakpoints and widths while maintaining original proportions and croppings.

The resulting <img> element will have a class attribute with the specified CSS class.

The alt attribute will be set to the specified text, overriding any image description set for the property.

The loading attribute will be set to lazy.

The quality is set to 75, overriding the default, except for the Small form factor which will be rendered with minimal compression, potentially resulting in a higher quality image at the cost of increased bandwidth.

@Html.PropertyFor(m => m.MyAdaptiveImage, new { 
    
    // Breakpoints (small, or "mobile", is effectively 767 pixels and below)
    largeBreakpoint = 1280,
    mediumBreakpoint = 768,
    
    // Image widths to render
    largeWidth = 1920,
    mediumWidth = 1279,
    smallWidth = 767,
    
    // Override any image description set for the property
    altText = "An adaptive image",
    
    // Additional rendering settings
    cssClass = "my-adaptive-image",
    pictureCssClass = "my-picture-element",
    role = "presentation",
    lazyLoad = true,
    quality = 75,
    smallQuality = 100
})

Note: You may optionally use the RenderAdaptiveImage() HTML helper for an equivalent rendering.

@using AdaptiveImages.Rendering

@Html.RenderAdaptiveImage(m => m.MyAdaptiveImage, 1280, 768, 1920, 1279, 767, null, false, "An adaptive image", "my-adaptive-image", "my-picture-element", true, 75, 75, 100)

3. Render cropped to specific dimensions

The following crops the original image at its native resolution to the specified dimensions for each form factor.

@using AdaptiveImages.Core

@Html.PropertyFor(x => x.MyAdaptiveImage, new {
    largeCropToSize = new Dimensions(1280, 960),
    mediumCropToSize = new Dimensions(960, 640),
    smallCropToSize = new Dimensions(500, 500)
})

4. Render cropped to specific proportions

The following crops the original image to the specified proportions and scales each image proportionally to the specified width for each form factor.

@using AdaptiveImages.Core

@Html.PropertyFor(x => x.MyAdaptiveImage, new {
    // Proportions for each form factor
    largeCropToProportions = new Proportions(16,9),
    mediumCropToProportions = new Proportions(4,3),
    smallCropToProportions = new Proportions(1,1),

    // Rendering size for each form factor
    largeWidth = 1920,
    mediumWidth = 960,
    smallWidth = 760
})

Note: Specifying a crop setting ignores any crop area set by the user, but the cropping will gravitate towards focal point if explicitly set.

5. Render single form factor using PropertyFor

Each form factor of an AdaptiveImage is its own SingleImage. To render only a specific form factor image as an <img> element, you simply render one of the Large, Medium, or Small properties of an AdaptiveImage instance.

@Html.PropertyFor(x => x.MyAdaptiveImage.Large)

6. Render single form factor using ImageRenderSettings

The following creates a 300x300 square image based on the Large form factor by overriding any default proportions or cropping and scaling the image to a width of 300 pixels.

@using AdaptiveImages.Core
@using AdaptiveImages.Rendering

@{
    var renderSettings = Model.GetImageRenderSettings(x => x.MyAdaptiveImage.Large)
                              .ResetCropping()
                              .Crop(new Proportions(1, 1))
                              .ResizeToWidth(300);
}

@Html.RenderSingleImage(renderSettings)

Note: The lambda expression for GetImageRenderSettings must cover the parent instance, e.g. the block or page, with the AdaptiveImage property in order to be able to resolve any Size and Proportions constraints.

7. Render single form factor as a background image

You can get the URL of an image by invoking GetUrl() on an ImageRenderSettings instance.

@using AdaptiveImages.Core

@{
    var imageUrl = Model.GetImageRenderSettings(x => x.MyAdaptiveImage.Large)
                        .ResetCropping()
                        .Crop(new Proportions(4,3))
                        .ResizeToWidth(960)
                        .GetUrl();
}

<div style="background: url(@imageUrl); width: 960px; height:720px" />