Image rendering

Image rendering with the html helper @Html.ImageFor that using ImageModel.

Litium provides an ImageModel that contains information for an image with the file name, alt-text for the image and a method to generate the image url in different sizes.

@Html.ImageFor

The html helper ImageFor takes the ImageModel and multiple attributes if width and height should be rendered and the min and max size the image should have. If entering the max size the image will be scaled down to max of this size with aspect ratio depending on the real image size.

Example usage

@Html.ImageFor(x => x.ProductItem.Images[0], 
    maxSize: new Size(840, 1200), 
    htmlAttributes: new { itemprop = "image", @class = "product-detail__image--main" }, 
    renderSizeAttributes: true)

Will generate the follwoing image tag

<img 
    alt="Court Dress &#x2013; Northern Green" 
    class="product-detail__image--main" 
    height="1200" 
    itemprop="image" 
    src="/storage/B5ADE9F94AEAE26DF30BDD93B87563C495FA3537C00EDD63E04BEA0462BDDC79/cfcdc7bfc5d644acbc89ce38b034515c/840-1200-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png" 
    width="840" />

Responsive images

Introduced with Litium 8.5 the html helper ImageFor can render responsive images with the srcset and sizes attributes. When creating responsive images Litium need to know the sizes that should be used, then it's up to the browser to use the correct image for the displaying part.

The responsive definition contains of 2 different parts, the image size (srcset) and the container size in the viewport (sizes).

Image sizes (srcset)

The image sizes provided as SrcSets with a max width. The image url is generated based on this max width.

Viewport (sizes)

This is a collection of media queries that instruct the browser how big the image should be compared to the viewport.

Example usage

@{
    var responsiveDefinitionLarge = new ResponsiveImageDefinition
    {
        SrcSets = new SrcSetDefinition[]
        {
            new SrcSetDefinition(100),
            new SrcSetDefinition(200),
            new SrcSetDefinition(400),
            new SrcSetDefinition(600),
            new SrcSetDefinition(800),
            new SrcSetDefinition(1000),
        },
        Sizes = new SizeDefinition[]
        {
            new SizeDefinition("(min-width: 640px)", "50vw"),
            new SizeDefinition("100vw"),
        },
    };
}

@Html.ImageFor(x => x.ProductItem.Images[0], 
    maxSize: new Size(840, 1200), 
    htmlAttributes: new { itemprop = "image", @class = "product-detail__image--main" }, 
    renderSizeAttributes: true, 
    responsiveDefinition: responsiveDefinitionLarge)

Will generate the following html

<img 
    alt="Court Dress &#x2013; Northern Green" 
    class="product-detail__image--main" 
    height="1200" 
    itemprop="image" 
    sizes="(min-width: 640px) 50vw, 100vw" 
    src="/storage/B5ADE9F94AEAE26DF30BDD93B87563C495FA3537C00EDD63E04BEA0462BDDC79/cfcdc7bfc5d644acbc89ce38b034515c/840-1200-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png" 
    srcset="/storage/1548F87E239CD4F219175FC3E1C0296F7743B88C117AEC6A5ABC5805BAA9E8E8/cfcdc7bfc5d644acbc89ce38b034515c/100-143-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 100w, /storage/1CCC5640700A8B0AE675F4AF0E03464332378B329907D895F48759EE2DA49B1E/cfcdc7bfc5d644acbc89ce38b034515c/200-286-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 200w, /storage/0EBFF6D1D2DC64265557C89225A0C96AA01AE666748E4FEC030DC3340A9563E0/cfcdc7bfc5d644acbc89ce38b034515c/400-571-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 400w, /storage/3A6EFA446E5435412EA8530D017E650740CE835DC98008C0EC57D82B47A67D7D/cfcdc7bfc5d644acbc89ce38b034515c/600-857-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 600w, /storage/9A9F1A0CB65834AEF0A858E447B0327A857E072B1D164FA9DDA65F11237588D0/cfcdc7bfc5d644acbc89ce38b034515c/800-1143-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 800w, /storage/1466970BD22F2D77E101BD63FF3182062474E6BC1779F231EDF6823B49C03253/cfcdc7bfc5d644acbc89ce38b034515c/1000-1429-0-png.Png/media/50c612bd3ac441178c7cdbc36ce1871a/4-170.png 1000w" 
    width="840" />