Image

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Code

HTML Twig SCSS

<div class="image-wrapper">    
                
                  <picture>
                  <source srcset="/sites/default/files/styles/component_1366x768_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=WQE68rFD 1x" media="all and (max-width: 1366px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/component_1024x576_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=mSzaQv22 1x" media="all and (max-width: 1024px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/component_768x432_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=LzVrqBxC 1x" media="all and (max-width: 768px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/component_480x270_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=iJQRoelB 1x" media="all and (max-width: 480px)" type="image/jpeg">
                  <img src="/sites/default/files/styles/component_1366x768_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=WQE68rFD" alt="" typeof="foaf:Image">

  </picture>
      
        
  </div>

{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}
{% block paragraph %}
  <div {% if paragraph.field_full_width.value == 1 %}class="image-wrapper"{% endif %}>    
    {% if content.field_link.0['#url'] is not empty %}
    <a href="{{ content.field_link.0['#url'] }}" {% if content.field_link.0['#title'] is not empty %} title="{{ content.field_link.0['#title'] }}" {% endif %}>
    {% endif %}
      
      {{ content.field_image }}
      
    {% if content.field_link.0['#url'] is not empty %}
    </a>
    {% endif %}    
  </div>
{% endblock paragraph %}

.image-wrapper {
  position: relative;

  img {
    width: 100%;
    height: 100%;
    margin-bottom: var(--spacing-1);
    object-fit: cover;
    display: block;
  }
}

Design Files

Figma

Fields

Label	Machine name	Field type	Character Limit	Required
Full Width	field_full_width	Boolean	N/A	No
Image	field_image	Image	N/A	Yes
Link	field_link	Link	N/A	No

Component Options

Full Width

This will make the image full width to its container or remain the size it was uploaded at.

Component

Image