<ev:img />
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.
Attributes
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.
alt
An empty alt attribute is added to <ev:img> by default.
|
fallback
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.
<ev:img src="{{ product.imageUrl }}" fallback="~/theme/images/placeholder.png" />
|
height
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.
|
maxheight
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.
|
maxwidth
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.
|
src
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:
<ev:img src="~/content/images/myimage.png" width="100" />
will render in development mode similar to:
<img src="/portal/public/1/content/images/100x_/myimage.png?v=123456" />
and will render in production mode similar to:
<img src="//cdn.evance.it/portal/public/1/content/images/100x_/myimage.png?v=123456" />
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.
|
width
Will resize the image provided to the given width using the Image Sizes & Resizing rules.
|