Issue #3495584 by tonypaulbarker, pameeela, ckrina: Implement hero and...

Issue #3495584 by tonypaulbarker, pameeela, ckrina: Implement hero and featured images to match designs

recipes/drupal_cms_blog/config/core.entity_view_display.node.blog.default.yml

@@ -56,7 +56,7 @@ third_party_settings:
                 type: entity_reference_entity_view
                 label: hidden
                 settings:
-                  view_mode: 16_9_wide
+                  view_mode: hero
                 third_party_settings: {  }
             weight: 2
             additional: {  }

recipes/drupal_cms_case_study/config/core.entity_view_display.node.case_study.default.yml

@@ -43,7 +43,7 @@ third_party_settings:
                 type: entity_reference_entity_view
                 label: hidden
                 settings:
-                  view_mode: 16_9_wide
+                  view_mode: hero
                 third_party_settings: {  }
             weight: 1
             additional: {  }
@@ -173,7 +173,7 @@ content:
       rel: ''
       target: ''
     third_party_settings: {  }
-    weight: 5
+    weight: 6
     region: content
   field_case_study__client_logo:
     type: media_thumbnail
@@ -184,7 +184,7 @@ content:
       image_loading:
         attribute: lazy
     third_party_settings: {  }
-    weight: 4
+    weight: 5
     region: content
   field_case_study__client_name:
     type: string
@@ -192,25 +192,23 @@ content:
     settings:
       link_to_entity: false
     third_party_settings: {  }
-    weight: 3
+    weight: 4
     region: content
   field_content:
     type: text_default
     label: hidden
     settings: {  }
     third_party_settings: {  }
-    weight: 2
+    weight: 3
     region: content
   field_featured_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: ''
-      image_loading:
-        attribute: eager
+      view_mode: hero
+      link: false
     third_party_settings: {  }
-    weight: 0
+    weight: 1
     region: content
   field_tags:
     type: entity_reference_label
@@ -218,7 +216,7 @@ content:
     settings:
       link: true
     third_party_settings: {  }
-    weight: 1
+    weight: 2
     region: content
 hidden:
   field_description: true

recipes/drupal_cms_events/config/core.entity_view_display.node.event.default.yml

@@ -29,7 +29,7 @@ content:
     label: hidden
     settings: {  }
     third_party_settings: {  }
-    weight: 0
+    weight: 1
     region: content
   field_event__date:
     type: smartdate_default
@@ -51,16 +51,14 @@ content:
         decimals: 2
         suffix: h
     third_party_settings: {  }
-    weight: 2
+    weight: 3
     region: content
   field_featured_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: ''
-      image_loading:
-        attribute: eager
+      view_mode: hero
+      link: false
     third_party_settings: {  }
     weight: 0
     region: content
@@ -71,7 +69,7 @@ content:
       view_mode: default
       link: false
     third_party_settings: {  }
-    weight: 5
+    weight: 6
     region: content
   field_event__link:
     type: link
@@ -83,7 +81,7 @@ content:
       rel: ''
       target: ''
     third_party_settings: {  }
-    weight: 6
+    weight: 7
     region: content
   field_geofield:
     type: leaflet_formatter_default
@@ -180,14 +178,14 @@ content:
       map_lazy_load:
         lazy_load: true
     third_party_settings: {  }
-    weight: 3
+    weight: 4
     region: content
   field_event__location_address:
     type: address_default
     label: above
     settings: {  }
     third_party_settings: {  }
-    weight: 3
+    weight: 4
     region: content
   field_tags:
     type: entity_reference_label
@@ -195,7 +193,7 @@ content:
     settings:
       link: true
     third_party_settings: {  }
-    weight: 7
+    weight: 8
     region: content
   field_when:
     type: smartdate_default
@@ -224,7 +222,7 @@ content:
               target: ''
           augmenter_settings:
             fields__field_when__settings_edit_form__third_party_settings__date_augmenter__augmenter_settings__active_tab: ''
-    weight: 1
+    weight: 2
     region: content
   field_where:
     type: entity_reference_entity_view
@@ -233,7 +231,7 @@ content:
       view_mode: teaser
       link: false
     third_party_settings: {  }
-    weight: 2
+    weight: 3
     region: content
   links:
     settings: {  }

recipes/drupal_cms_image/config/core.entity_view_display.media.image.hero.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.hero
+    - field.field.media.image.field_media_image
+    - media.type.image
+    - responsive_image.styles.hero_large
+  module:
+    - responsive_image
+id: media.image.hero
+targetEntityType: media
+bundle: image
+mode: hero
+content:
+  field_media_image:
+    type: responsive_image
+    label: visually_hidden
+    settings:
+      responsive_image_style: hero_large
+      image_link: ''
+      image_loading:
+        attribute: eager
+    third_party_settings: {  }
+    weight: 1
+    region: content
+hidden:
+  created: true
+  langcode: true
+  name: true
+  thumbnail: true
+  uid: true

recipes/drupal_cms_image/config/core.entity_view_display.media.image.hero_wide.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.hero_wide
+    - field.field.media.image.field_media_image
+    - media.type.image
+    - responsive_image.styles.hero_wide
+  module:
+    - responsive_image
+id: media.image.hero_wide
+targetEntityType: media
+bundle: image
+mode: hero_wide
+content:
+  field_media_image:
+    type: responsive_image
+    label: visually_hidden
+    settings:
+      responsive_image_style: hero_wide
+      image_link: ''
+      image_loading:
+        attribute: eager
+    third_party_settings: {  }
+    weight: 1
+    region: content
+hidden:
+  created: true
+  langcode: true
+  name: true
+  thumbnail: true
+  uid: true

recipes/drupal_cms_image/config/core.entity_view_mode.media.hero.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.hero
+label: Hero
+description: ''
+targetEntityType: media
+cache: true

recipes/drupal_cms_image/config/core.entity_view_mode.media.hero_wide.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.hero_wide
+label: 'Hero Wide'
+description: ''
+targetEntityType: media
+cache: true

recipes/drupal_cms_image/config/image.style.5_2_1000x400_focal_point_webp.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: 5_2_1000x400_focal_point_webp
+label: '5:2 | 1000x400 | Focal Point | WebP'
+effects:
+  495c8364-5de0-4791-a779-1132eac38656:
+    uuid: 495c8364-5de0-4791-a779-1132eac38656
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 1000
+      height: 400
+      crop_type: focal_point
+  813f987a-dda6-417e-a257-fc33cc18bdd0:
+    uuid: 813f987a-dda6-417e-a257-fc33cc18bdd0
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/image.style.5_2_1300x520_focal_point_webp.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: 5_2_1300x520_focal_point_webp
+label: '5:2 | 1300x520 | Focal Point | WebP'
+effects:
+  e3359c49-f775-4f01-9316-ed07f061dafa:
+    uuid: e3359c49-f775-4f01-9316-ed07f061dafa
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 1300
+      height: 520
+      crop_type: focal_point
+  d564bc71-f6ad-4a31-b9c5-4c0acdedd9bf:
+    uuid: d564bc71-f6ad-4a31-b9c5-4c0acdedd9bf
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/image.style.5_2_1800x720_focal_point_webp.yml

+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: 5_2_1800x720_focal_point_webp
+label: '5:2 | 1800x720 | Focal Point | WebP'
+effects:
+  9701146b-1531-467b-b7e8-65ce1088635b:
+    uuid: 9701146b-1531-467b-b7e8-65ce1088635b
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 1800
+      height: 720
+      crop_type: focal_point
+  3722b6c8-9616-4507-bd7e-0c5e6b0e7887:
+    uuid: 3722b6c8-9616-4507-bd7e-0c5e6b0e7887
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/responsive_image.styles.hero_large.yml

@@ -2,9 +2,10 @@ langcode: en
 status: true
 dependencies:
   config:
-    - image.style.16_9_960x540_focal_point_webp
-    - image.style.3_4_504x672_focal_point_webp
-    - image.style.3_4_708x944_focal_point_webp
+    - image.style.16_9_512x288_focal_point_webp
+    - image.style.16_9_704x396_focal_point_webp
+    - image.style.5_2_1000x400_focal_point_webp
+    - image.style.5_2_1300x520_focal_point_webp
   theme:
     - olivero
 id: hero_large
@@ -12,13 +13,18 @@ label: 'Hero Large'
 image_style_mappings:
   -
     image_mapping_type: image_style
-    image_mapping: 16_9_960x540_focal_point_webp
+    image_mapping: 5_2_1300x520_focal_point_webp
+    breakpoint_id: olivero.lg
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: 5_2_1000x400_focal_point_webp
     breakpoint_id: olivero.md
     multiplier: 1x
   -
     image_mapping_type: image_style
-    image_mapping: 3_4_708x944_focal_point_webp
+    image_mapping: 16_9_704x396_focal_point_webp
     breakpoint_id: olivero.sm
     multiplier: 1x
 breakpoint_group: olivero
-fallback_image_style: 3_4_504x672_focal_point_webp
+fallback_image_style: 16_9_512x288_focal_point_webp

recipes/drupal_cms_image/config/responsive_image.styles.hero_wide.yml

@@ -2,11 +2,11 @@ langcode: en
 status: true
 dependencies:
   config:
-    - image.style.16_9_1008x567_focal_point_webp
-    - image.style.16_9_1312x738_focal_point_webp
-    - image.style.16_9_1800x1080_focal_point_webp
-    - image.style.3_4_504x672_focal_point_webp
-    - image.style.3_4_708x944_focal_point_webp
+    - image.style.16_9_512x288_focal_point_webp
+    - image.style.16_9_704x396_focal_point_webp
+    - image.style.5_2_1000x400_focal_point_webp
+    - image.style.5_2_1300x520_focal_point_webp
+    - image.style.5_2_1800x720_focal_point_webp
   theme:
     - olivero
 id: hero_wide
@@ -14,23 +14,23 @@ label: 'Hero Wide'
 image_style_mappings:
   -
     image_mapping_type: image_style
-    image_mapping: 16_9_1800x1080_focal_point_webp
+    image_mapping: 5_2_1800x720_focal_point_webp
     breakpoint_id: olivero.xl
     multiplier: 1x
   -
     image_mapping_type: image_style
-    image_mapping: 16_9_1312x738_focal_point_webp
+    image_mapping: 5_2_1300x520_focal_point_webp
     breakpoint_id: olivero.lg
     multiplier: 1x
   -
     image_mapping_type: image_style
-    image_mapping: 16_9_1008x567_focal_point_webp
+    image_mapping: 5_2_1000x400_focal_point_webp
     breakpoint_id: olivero.md
     multiplier: 1x
   -
     image_mapping_type: image_style
-    image_mapping: 3_4_708x944_focal_point_webp
+    image_mapping: 16_9_704x396_focal_point_webp
     breakpoint_id: olivero.sm
     multiplier: 1x
 breakpoint_group: olivero
-fallback_image_style: 3_4_504x672_focal_point_webp
+fallback_image_style: 16_9_512x288_focal_point_webp

recipes/drupal_cms_news/config/core.entity_view_display.node.news.default.yml

@@ -39,7 +39,7 @@ third_party_settings:
                 type: entity_reference_entity_view
                 label: hidden
                 settings:
-                  view_mode: 16_9_wide
+                  view_mode: hero
                 third_party_settings: {  }
             weight: 1
             additional: {  }
@@ -116,14 +116,12 @@ content:
     weight: 2
     region: content
   field_featured_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: ''
-      image_loading:
-        attribute: eager
-    third_party_settings: {  }
+      view_mode: hero
+      link: false
+    third_party_settings: { }
     weight: 1
     region: content
   field_tags:

recipes/drupal_cms_page/config/core.entity_view_display.node.page.default.yml

@@ -73,7 +73,7 @@ third_party_settings:
                 type: entity_reference_entity_view
                 label: hidden
                 settings:
-                  view_mode: 16_9_wide
+                  view_mode: hero
                 third_party_settings: {  }
             weight: 0
             additional: {  }
@@ -95,6 +95,15 @@ content:
     third_party_settings: {  }
     weight: 100
     region: content
+  field_featured_image:
+    type: entity_reference_entity_view
+    label: hidden
+    settings:
+      view_mode: hero
+      link: false
+    third_party_settings: { }
+    weight: 1
+    region: content
   links:
     settings: {  }
     third_party_settings: {  }
@@ -102,7 +111,6 @@ content:
     region: content
 hidden:
   field_description: true
-  field_featured_image: true
   field_tags: true
   langcode: true
   layout_builder__layout: true

recipes/drupal_cms_project/config/core.entity_view_display.node.project.default.yml

@@ -44,7 +44,7 @@ third_party_settings:
                 type: entity_reference_entity_view
                 label: hidden
                 settings:
-                  view_mode: 16_9_wide
+                  view_mode: hero
                 third_party_settings: {  }
             weight: 0
             additional: {  }
@@ -172,14 +172,12 @@ content:
     weight: 2
     region: content
   field_featured_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: ''
-      image_loading:
-        attribute: eager
-    third_party_settings: {  }
+      view_mode: hero
+      link: false
+    third_party_settings: { }
     weight: 0
     region: content
   field_project__client_link: