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

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.

Image element

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

Important

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.