Use the Picture <picture> element to display images at different sizes by breakpoint.
Locating the picture element
To find the Picture 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 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.
Site Studio