Picture element

    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 page or 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. 


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


    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket