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

Locating the Image element¶

To find the Image element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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.