Issue #3349447 by mherchel, markconroy, catch, heddn, andy-blum: Improve...

Issue #3349447 by mherchel, markconroy, catch, heddn, andy-blum: Improve Largest Contentful Paint in Umami front page

core/profiles/demo_umami/config/install/core.entity_view_display.media.image.scale_crop_7_3_large.yml

@@ -4,11 +4,11 @@ dependencies:
   config:
     - core.entity_view_mode.media.scale_crop_7_3_large
     - field.field.media.image.field_media_image
-    - image.style.scale_crop_7_3_large
     - media.type.image
+    - responsive_image.styles.hero
   module:
-    - image
     - layout_builder
+    - responsive_image
 third_party_settings:
   layout_builder:
     enabled: false
@@ -19,13 +19,13 @@ bundle: image
 mode: scale_crop_7_3_large
 content:
   field_media_image:
-    type: image
+    type: responsive_image
     label: hidden
     settings:
-      image_style: scale_crop_7_3_large
+      responsive_image_style: hero
       image_link: ''
       image_loading:
-        attribute: lazy
+        attribute: eager
     third_party_settings: {  }
     weight: 1
     region: content

core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_large.yml

@@ -12,3 +12,9 @@ effects:
       width: 1440
       height: 617
       anchor: center-center
+  7108ef83-c308-4a0f-b877-e85d4995243b:
+    uuid: 7108ef83-c308-4a0f-b877-e85d4995243b
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_medium.yml

+langcode: en
+status: true
+dependencies: {  }
+name: scale_crop_7_3_medium
+label: 'Scale crop 7:3 medium'
+effects:
+  34ef7c6a-06e4-4d71-bdaa-718ccd6056cc:
+    uuid: 34ef7c6a-06e4-4d71-bdaa-718ccd6056cc
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 1200
+      height: 514
+      anchor: center-center
+  d83dd527-8378-4a47-9b0c-8c7a753cc89a:
+    uuid: d83dd527-8378-4a47-9b0c-8c7a753cc89a
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_small.yml

+langcode: en
+status: true
+dependencies: {  }
+name: scale_crop_7_3_small
+label: 'Scale crop 7:3 small'
+effects:
+  566727ce-59a0-4078-88dc-4f0fe7badd16:
+    uuid: 566727ce-59a0-4078-88dc-4f0fe7badd16
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 800
+      height: 342
+      anchor: center-center
+  d5eb26a0-f961-4ba4-9f01-94a44440b4fa:
+    uuid: d5eb26a0-f961-4ba4-9f01-94a44440b4fa
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_tiny.yml

+langcode: en
+status: true
+dependencies: {  }
+name: scale_crop_7_3_tiny
+label: 'Scale crop 7:3 tiny'
+effects:
+  8af5175d-65fe-4ca8-9582-d3719de80854:
+    uuid: 8af5175d-65fe-4ca8-9582-d3719de80854
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 500
+      height: 214
+      anchor: center-center
+  18643b2d-f1ee-4dd6-ad72-84b67023d3cf:
+    uuid: 18643b2d-f1ee-4dd6-ad72-84b67023d3cf
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_wide.yml

+langcode: en
+status: true
+dependencies: {  }
+name: scale_crop_7_3_wide
+label: 'Scale crop 7:3 wide'
+effects:
+  4f1587ba-8629-4007-9521-90cae1c041cf:
+    uuid: 4f1587ba-8629-4007-9521-90cae1c041cf
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 3000
+      height: 1285
+      anchor: center-center
+  d88116a5-6a1a-40ba-8a47-c635b2536de9:
+    uuid: d88116a5-6a1a-40ba-8a47-c635b2536de9
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

core/profiles/demo_umami/config/install/responsive_image.styles.hero.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.scale_crop_7_3_large
+    - image.style.scale_crop_7_3_medium
+    - image.style.scale_crop_7_3_tiny
+    - image.style.scale_crop_7_3_wide
+  theme:
+    - umami
+id: hero
+label: Hero
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: scale_crop_7_3_wide
+    breakpoint_id: umami.hero_wide
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: scale_crop_7_3_large
+    breakpoint_id: umami.hero_large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: scale_crop_7_3_medium
+    breakpoint_id: umami.hero_medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: scale_crop_7_3_tiny
+    breakpoint_id: umami.hero_tiny
+    multiplier: 1x
+breakpoint_group: umami
+fallback_image_style: scale_crop_7_3_medium

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

@@ -3,15 +3,12 @@
  * This file is used to style the banner block.
  */
 
-.block-type-banner-block {
-  background-size: 0 0;
-}
-
-.block-type-banner-block .summary {
+.banner-block__content {
   margin: 1rem 4%;
+  font-size: 1.188em;
 }
 
-.block-type-banner-block .field--name-field-title {
+.banner-block .field--name-field-title {
   margin: 0 0 0.5em 0;
   font-family: "Scope One", Georgia, serif;
   font-size: 1.777em;
@@ -19,12 +16,7 @@
   line-height: 1.2em;
 }
 
-.block-type-banner-block .field--name-field-summary {
-  margin-bottom: 1.28em;
-  font-size: 1.188em;
-}
-
-.block-type-banner-block .field--name-field-content-link a {
+.banner-block .field--name-field-content-link a {
   display: inline-block;
   padding: 0.7em 1.3em;
   cursor: pointer;
@@ -40,8 +32,8 @@
   font-weight: 400;
 }
 
-.block-type-banner-block .field--name-field-content-link a:focus,
-.block-type-banner-block .field--name-field-content-link a:hover {
+.banner-block .field--name-field-content-link a:focus,
+.banner-block .field--name-field-content-link a:hover {
   color: #000;
   border-color: #d93760;
   outline-color: #fff;
@@ -50,25 +42,23 @@
 }
 /* Medium */
 @media screen and (min-width: 48rem) { /* 768px */
-  .block-type-banner-block {
+  .banner-block {
+    position: relative; /* Anchor absolutely positioned background image. */
     background-color: #464646;
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: cover;
-    /* Image ratio 7:3 */
   }
 
-  .block-type-banner-block .block-inner {
+  .banner-block__inner {
     display: flex;
     align-items: center;
     max-width: 1200px;
     min-height: 54vw;
-    margin: 0 auto;
+    margin: auto;
     padding: 0 4%;
   }
 
-  .block-type-banner-block .summary {
-    flex: 0 0 50%;
+  .banner-block__content {
+    position: relative; /* Establish stacking context to appear above absolutely positioned background image. */
+    max-width: 50%;
     margin: 0;
     padding: 1.777em;
     color: #fff;
@@ -76,32 +66,27 @@
     background: rgba(0, 0, 0, 0.42);
   }
 
-  .block-type-banner-block .field--name-field-media-image {
-    /**
-     * We need to ensure that the alt text on the image is accessible to
-     * screenreaders, so, when on large screens, let's give this the same CSS
-     * as the .visually-hidden class has.
-     */
-    position: absolute !important;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    width: 1px;
-    height: 1px;
-    word-wrap: normal;
+  .banner-block__image img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
 /* Large */
 @media screen and (min-width: 60rem) { /* 960px */
-  .block-type-banner-block .summary {
-    flex: 0 0 41%;
+  .banner-block__content {
+    max-width: 41%;
   }
-  .block-type-banner-block .block-inner {
+  .banner-block__inner {
     min-height: 43vw;
   }
 }
 /* Extra large + side margins */
 @media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
-  .block-type-banner-block .block-inner {
+  .banner-block__inner {
     padding: 0;
   }
 }

core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig

@@ -28,25 +28,25 @@
 #}
 {%
   set classes = [
+    'banner-block',
     'block',
     'block-' ~ configuration.provider|clean_class,
     'block-' ~ plugin_id|clean_class,
-    'cover-image',
   ]
 %}
 
-{% set background_image = file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value) %}
-
-<div{{ attributes.addClass(classes) }} style="background-image: url({{ background_image }})">
-  <div class="block-inner">
+<div{{attributes.addClass(classes)}}>
+  <div class="banner-block__inner">
     {{ title_prefix }}
     {% if label %}
-      <h2{{ title_attributes }}>{{ label }}</h2>
+      <h2{{title_attributes}}>{{ label }}</h2>
     {% endif %}
     {{ title_suffix }}
     {% block content %}
-      {{ content.field_media_image }}
-      <div class="summary">
+      <div class="banner-block__image">
+        {{ content.field_media_image }}
+      </div>
+      <div class="banner-block__content">
         {{ content|without('field_media_image') }}
       </div>
     {% endblock %}

core/profiles/demo_umami/themes/umami/templates/content/media--scale-crop-7-3-large.html.twig

+{#
+/**
+ * @file
+ * Theme override to display a hero media item for the Umami theme.
+ *
+ * Wrapping elements are intentionally removed because the attributes can add
+ * `position: relative`, which interferes with absolutely positioned image.
+ *
+ * Available variables:
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if content %}
+  {{ content }}
+{% endif %}

core/profiles/demo_umami/themes/umami/umami.breakpoints.yml

@@ -19,3 +19,19 @@ umami.wide:
   multipliers:
     - 1x
     - 2x
+umami.hero_tiny:
+  label: Hero tiny
+  mediaQuery: 'all'
+  weight: 0
+umami.hero_medium:
+  label: Hero medium
+  mediaQuery: 'all and (min-width: 500px) and (max-width: 800px)'
+  weight: 1
+umami.hero_large:
+  label: Hero large
+  mediaQuery: 'all and (min-width: 800px) and (max-width: 1400px)'
+  weight: 2
+umami.hero_wide:
+  label: Hero wide
+  mediaQuery: 'all and (min-width: 1400px)'
+  weight: 3