Use the Image element to add an image <img> to your layout. See an example.
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 page or 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 - Select the image to use
- Title - Add a title attribute
- Alt tag - Add an Alt tag.
- 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
- 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 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.
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.