Image Tag Helper

The image tag helper extends a standard img tag with attributes based on an image reference in the content.

Usage

The following attributes can be added to the img tag. The re-src is the only attribute that is required for any of the other attributes to work.

  • re-src - renders the correct image source url on the tag based on the file reference. This must be either an object of type FileDescriptor, or an instance of a content model that implements IContentModel, in which case the main FileDescriptor property on the content will be selected if multiple file properties exists on the content model. If the source is empty, the image tag output will be suppressed completely.
  • re-width - sets the width for server-side resizing of the image. This does not render a width attribute or CSS style on the tag.
  • re-height - sets the height for server-side resizing of the image. This does not render a height attribute or CSS style on the tag.
  • re-mode - sets the server-side resize mode, used in combination with the width, height, or both. The following resize modes are available:
    • ResizeMode.Crop - crops the image to the provided width and height, possibly changing the aspect ratio of the image. The image is not stretched if the provided width or height exceeds the original image dimensions.
    • ResizeMode.Scale - scales the image to the provided width and/or height. The image is stretched if the provided width and/or height exceed the original image dimensions. If only width or height is provided, the original aspect ratio is maintained.
    • ResizeMode.Pad - resizes the image to the provided width and height. The image is padded to match the new aspect ratio. The padded background is transparent for image formats with alpha channel, or white otherwise. The background color can also be set explicitly with re-bg-color.
    • ResizeMode.Max - resizes the image to the maximum possible value in each direction while maintaining the original aspect ratio.
  • re-bg-color - sets the background color when using ResizeMode.Pad; must be a hexadecimal RGB value, with or without hash (#).

Examples

@{
    // MainImage is assumed to be a (shared) content model containing an image file
    var image = Model.Content.MainImage;
}
<div>
    <img re-src="image" re-width="400" re-height="300" re-mode="ResizeMode.Crop" alt="@image?.AlternateText" />

    <img re-src="image?.File" re-width="480" re-mode="ResizeMode.Scale" style="width: 240px;" />
</div>