Acquia Copilot

Get Answers

With Copilot

Acquia Copilot is a conversational AI connected into our product documentation and knowledge base. Ask Copilot about product features, technical details, troubleshooting and how to get started with Acquia products.

Loading search...

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.