Renders an HTML <img> tag, but it's been designed for use in conjunction with any file in your theme or an account content folder and does a whole load of magical stuff to help with various issues.
<ev:img src="~/theme/images/myimage.png" />
The src in this example resolves to the current theme by using the ~/theme URL, which means you don't have to worry if the theme is renamed.
Whilst the images you include in your theme can be carefully honed to your design, that's not so clear with content within an account. So we have a selection of attributes to help you out.
An empty alt attribute is added to
An image to fall back to if the preferred src file does not exist or is empty - ideally used for database situations where the image may be missing. The url provided will be parsed by the URL parser and accepts URL helpers such as ~/theme.
Will resize the image provided to the given height using the Image Sizes & Resizing rules. If height is not supplied the image will be sized according to the width and height will be calculated according to original maintaining aspect ratio. If no width or height attributes are supplied the file will be rendered at its original size.
You should use the maxheight attribute in conjunction with width to set an image to a preferred width. Width is recalculated if the resized height maintaining aspect ratio is greater than the maxheight.
You should use the maxwidth attribute in conjunction with height to set an image to a preferred height. Height is recalculated if the resized width maintaining aspect ratio is greater than the maxwidth.
The original file url (this should be the original image url NOT using the Image Sizes & Resizing rules). The url provided will be parsed by the URL parser and accepts URL helpers such as ~/theme.
The src of the file will alter depending on whether you are in development mode or in production mode. For example, the following:
will render in development mode similar to:
and will render in production mode similar to:
This means you do not need to worry about converting asset URLs either from content or theme into CDN URLs as they are done for you using this tag.
Will resize the image provided to the given width using the Image Sizes & Resizing rules.