<standard:image>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image
ATTRIBUTES
EXAMPLES
standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<standard:image />`

Standard Image extends the functionality of the native HTML <img> tag. Notable features include automatic reduction of the size of the image served to the client, and the ability for images to maintain their original aspect ratio.

Related Tutorials

Attributes

- `alt`
string
Alt

Alternative text description of the image used for screen readers and SEO.
- `height`
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `maintainAspect`
string
Maintain Aspect

How the image should respond if the width and height set are a different ratio to the image's natural size.
  • true - The image will shrink to avoid distortion.
  • false - The image will obey the width and height, and possibly distort.
  • "crop" - The image will obey the width and height, and will allow cropping to avoid distortion.

Default = true.
- `src`
string
Image Source

The source / location of the image.
- `width`
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `float`
string
Whether to float the image left or right. Default = "". Possible other values: "left", "right".
- `floatOffset`
string
If this image is floating inside a paragraph, by using the float attribute, floatoffset controls the distance of the image from the top of the paragraph.
- `lazy`
string
Delays the loading of this image until other resources have finished loading.
- `modalCaptionDescription`
string
Modal Caption Description

Description that will be revealed when the image is included in a modal.
- `modalCaptionTitle`
string
Modal Caption Title

Caption Title that will be revealed when the image is included in a modal.

Tutorials

Examples

MaintainAspect Attribute

Demonstrates the different possible values of the MaintainAspect attribute.

HTML:

<table cellpadding="4" cellspacing="0" style="width: 100%;"> <tr> <td valign="top"><span style="font-family: monospace;">MaintainAspect=&quot;true&quot;</span><br />The image is scaled down proportionally.</td> <td valign="top"><span style="font-family: monospace;">MaintainAspect=&quot;false&quot;</span><br />The image is squished to both dimensions.</td> <td valign="top"><span style="font-family: monospace;">MaintainAspect=&quot;crop&quot;</span><br />The larger dimension is cropped.</td> </tr> <tr> <td width="33%" valign="top"><standard:image src="/media/website_pages/developer/tutorials/galleries-and-images/controlling-image-resizing/boat.jpg" alt="" width="300" height="300" maintainaspect="true" /></td> <td width="33%" valign="top"><standard:image src="/media/website_pages/developer/tutorials/galleries-and-images/controlling-image-resizing/boat.jpg" alt="" width="300" height="300" maintainaspect="false" /></td> <td width="33%" valign="top"><standard:image src="/media/website_pages/developer/tutorials/galleries-and-images/controlling-image-resizing/boat.jpg" alt="" width="300" height="300" maintainaspect="crop" /></td> </tr> </table>

Run Example

Image with Modal

When a user clicks an image, the image title and description are displayed.

HTML:

<standard:image width="717" height="444" maintainaspect="crop" src="https://images.unsplash.com/photo-1550355291-bbee04a92027?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8MTN8fGNhcnxlbnwwfHx8fDE2Nzk2NDM0NzM&" modalTheme="light" modalCaptionTitle="Image Title here" modalCaptionDescription="Image description here" />

Run Example