Use the Picture <picture> element to display images at different sizes by breakpoint.

Locating the picture element

To find the Picture 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 Picture element.

The Picture element includes the following fields:

Image attributes

• 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. 

Images

• Image - Select the image to use
• Image display size  - Set the image to Responsive (Scale to its parent container) or Actual size
• Drupal image style - Apply a Drupal image style to the image. For more information, see Drupal image styles here.

Image style

• Custom 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.

Picture element

You're viewing version 8.1 of this page. View latest () documentation.

Use the Picture <picture> element to display images at different sizes by breakpoint.

Locating the picture element

To find the Picture 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 Picture element.

The Picture element includes the following fields:

Image attributes

• 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. 

Images

• Image - Select the image to use
• Image display size  - Set the image to Responsive (Scale to its parent container) or Actual size
• Drupal image style - Apply a Drupal image style to the image. For more information, see Drupal image styles here.

Image style

• Custom 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.