standard:image
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column 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:audio 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