Vote-1124: Confgure responsive Image for Hero component (#949)

config/local/config_split.patch.core.extension.yml

@@ -4,6 +4,5 @@ adding:
     devel: 0
     disable_language: 0
     field_ui: 0
-    responsive_image: 0
     views_ui: 0
 removing: {  }

config/sync/core.entity_view_display.media.image.scaled.yml

@@ -6,10 +6,10 @@ dependencies:
     - core.entity_view_mode.media.scaled
     - field.field.media.image.field_caption
     - field.field.media.image.field_media_image
-    - image.style.scaled_lg
     - media.type.image
+    - responsive_image.styles.scaled
   module:
-    - svg_image
+    - responsive_image
     - text
 id: media.image.scaled
 targetEntityType: media
@@ -24,17 +24,13 @@ content:
     weight: 1
     region: content
   field_media_image:
-    type: image
+    type: responsive_image
     label: visually_hidden
     settings:
+      responsive_image_style: scaled
       image_link: ''
-      image_style: scaled_lg
       image_loading:
         attribute: lazy
-      svg_attributes:
-        width: null
-        height: null
-      svg_render_as_image: true
     third_party_settings: {  }
     weight: 0
     region: content

config/sync/core.entity_view_display.paragraph.hero.default.yml

@@ -8,11 +8,9 @@ dependencies:
     - field.field.paragraph.hero.field_heading
     - field.field.paragraph.hero.field_link
     - field.field.paragraph.hero.field_media
-    - image.style.scaled_xl
     - paragraphs.paragraphs_type.hero
   module:
     - link
-    - media
     - options
     - text
 id: paragraph.hero.default
@@ -55,13 +53,11 @@ content:
     weight: 2
     region: content
   field_media:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: scaled_xl
-      image_loading:
-        attribute: lazy
+      view_mode: scaled
+      link: false
     third_party_settings: {  }
     weight: 3
     region: content

config/sync/core.extension.yml

@@ -61,6 +61,7 @@ module:
   path_alias: 0
   redirect: 0
   remove_http_headers: 0
+  responsive_image: 0
   rest: 0
   rest_views: 0
   robotstxt: 0

config/sync/responsive_image.styles.scaled.yml

@@ -0,0 +1,23 @@
+uuid: 41865dd0-e521-4e76-bdd8-51ff0a8230bf
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.scaled_lg
+    - image.style.scaled_sm
+    - image.style.scaled_xl
+id: scaled
+label: Scaled
+image_style_mappings:
+  -
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: 100vw
+      sizes_image_styles:
+        - scaled_lg
+        - scaled_sm
+        - scaled_xl
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+breakpoint_group: responsive_image
+fallback_image_style: scaled_sm

web/themes/custom/votegov/templates/media/media--image--scaled.html.twig

@@ -0,0 +1,14 @@
+{% extends 'media.html.twig' %}
+{#
+/**
+ * @file
+ * Theme override to display a media item: image.
+ */
+#}
+
+{# Caching the data in content object #}
+{% set savedCache = content | render %}
+
+{% block content %}
+  {{ content.field_media_image | field_value }}
+{% endblock %}

web/themes/custom/votegov/votegov.breakpoints.yml

@@ -0,0 +1,12 @@
+votegov.mobile:
+  label: 'Mobile'
+  mediaQuery: ''
+  weight: 1
+votegov.tablet:
+  label: 'Tablet'
+  mediaQuery: 'all and (min-width: 640px)'
+  weight: 2
+votegov.desktop:
+  label: 'Desktop'
+  mediaQuery: 'all and (min-width: 1024px)'
+  weight: 3