Image element

Use the Image element to add an image <img> to your layout.

The image <img> element does not support true responsive images. The image can be set to scale to each breakpoint but the same image file will be served to each. If you require a different image to be served to each breakpoint, use the Picture <picture> element.

Locating the Image element

To find the Image element:

Navigate to a component or a template with the Layout canvas
Click the + button on the Layout canvas
Within the Elements tab, look for the Image element.

The Image element includes the following fields:

Image

Image - Select the image to use
Title - Add a title attribute
Alt tag - Add an Alt tag
Lazy load - Set Lazy load to only load the image when required by the browser.

Image size and alignment

Image display size - Set the image to Responsive (Scale to its parent container) or Actual size
Image alignment - Set the alignment of the image. Only available to 'Actual size' images.
- Float left - Floats the image left. Other elements and text will wrap around the image
- Float right - Floats the image right. Other elements and text will wrap around the image
- Align left - Aligns the image to the left of the parent element
- Align centre - Aligns the image to the centre of the parent element
- Align right - Aligns the image to the right of the parent element

Image style

Drupal image style - Apply a Drupal image style to the image. For more information, see Drupal image styles here.
Image style - Apply an Image custom style to the image.

Match heights

Match heights - Match the height of the element using
- None - Removes the match heights at the specific breakpoint
- Class - Match the height of the element with another element with the same class name
- Children with class - Match the heights of any child elements with the same class name
- Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

Add comments - Add comments to the Element. For more information, see Adding comments to an element.