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 typeFileDescriptor
, or an instance of a content model that implementsIContentModel
, in which case the mainFileDescriptor
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 awidth
attribute or CSS style on the tag.re-height
- sets the height for server-side resizing of the image. This does not render aheight
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 withre-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>