Render a SingleImage property

1. Render with default settings

The following renders the image, compliant with any Size and Proportions constraints, as an img element with the alt attribute set to the image description specified for the property, if any.

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

2. Render with optional settings

The following will render the image with a specific width while maintaining original proportions and cropping.

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.

Setting quality to 100 minimizes compression, potentially resulting in a higher quality image at the cost of increased bandwidth.

@Html.PropertyFor(m => m.MyImage, new { 
    width = 1920,
    cssClass = "my-image",
    altText = "This is my image",
    role = "presentation",
    lazyLoad = true,
    quality = 100
})

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

@using AdaptiveImages.Rendering

@Html.RenderSingleImage(m => m.MyImage, 1920, null, false, "This is my image", "my-image", true, 100)

3. Render cropped to specific dimensions

The following crops the original image at its native resolution to the specified dimensions.

@using AdaptiveImages.Core

@Html.PropertyFor(x => x.MyImage, new {
    cropToSize = new Dimensions(900, 600)
})

4. Render cropped to specific proportions

The following crops the original image to the specified proportions and scales the image proportionally to the specified width.

@using AdaptiveImages.Core

@Html.PropertyFor(x => x.MyImage, new {
    cropToProportions = new Proportions(16,9),
    width = 600
})

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 using ImageRenderSettings

The following creates a 300x300 square image by explicitly cropping the image to square proportions and scaling it to a width of 300 pixels.

@using AdaptiveImages.Core
@using AdaptiveImages.Rendering

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

@Html.RenderSingleImage(renderSettings)

Note: GetImageRenderSettings resolves Size and Proportions constraints, if any, from the parent instance, e.g. Model in this case, which is the content type where the MyImage property and its constraints attributes are declared.

6. Render 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.MyImage)
                        .ResetCropping()
                        .Crop(new Proportions(4,3))
                        .ResizeToWidth(960)
                        .GetUrl();
}

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