Merge pull request #79 from USEPA/IN-157

In 157

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

@@ -9,15 +9,18 @@ dependencies:
     - field.field.media.image.field_media_in_library
     - field.field.media.image.image
     - field.field.media.image.layout_builder__translation
-    - image.style.large
     - media.type.image
+    - responsive_image.styles.responsive_large
   module:
-    - image
     - layout_builder
+    - media_inline_embed
+    - responsive_image
 third_party_settings:
   layout_builder:
     allow_custom: false
     enabled: false
+  media_inline_embed:
+    embed_inline: false
 _core:
   default_config_hash: VLDxfMVPTkd2xvOjFMCh3kWmaOYnd03zggFXuUXQVEY
 id: media.image.full_width
@@ -26,11 +29,11 @@ bundle: image
 mode: full_width
 content:
   image:
-    type: image
+    type: responsive_image
     weight: 0
     label: hidden
     settings:
-      image_style: large
+      responsive_image_style: responsive_large
       image_link: ''
     third_party_settings: {  }
     region: content

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

@@ -9,15 +9,18 @@ dependencies:
     - field.field.media.image.field_media_in_library
     - field.field.media.image.image
     - field.field.media.image.layout_builder__translation
-    - image.style.medium
     - media.type.image
+    - responsive_image.styles.responsive_medium
   module:
-    - image
     - layout_builder
+    - media_inline_embed
+    - responsive_image
 third_party_settings:
   layout_builder:
     allow_custom: false
     enabled: false
+  media_inline_embed:
+    embed_inline: false
 _core:
   default_config_hash: VLDxfMVPTkd2xvOjFMCh3kWmaOYnd03zggFXuUXQVEY
 id: media.image.half_width
@@ -26,11 +29,11 @@ bundle: image
 mode: half_width
 content:
   image:
-    type: image
+    type: responsive_image
     weight: 0
     label: hidden
     settings:
-      image_style: medium
+      responsive_image_style: responsive_medium
       image_link: ''
     third_party_settings: {  }
     region: content

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

@@ -0,0 +1,49 @@
+uuid: 9579fd03-4337-4027-886c-b97478d1a30c
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.small
+    - field.field.media.image.field_caption
+    - field.field.media.image.field_keywords
+    - field.field.media.image.field_media_in_library
+    - field.field.media.image.image
+    - field.field.media.image.layout_builder__translation
+    - media.type.image
+    - responsive_image.styles.responsive_small
+  module:
+    - layout_builder
+    - media_inline_embed
+    - responsive_image
+third_party_settings:
+  media_inline_embed:
+    embed_inline: false
+  layout_builder:
+    allow_custom: false
+    enabled: false
+_core:
+  default_config_hash: VLDxfMVPTkd2xvOjFMCh3kWmaOYnd03zggFXuUXQVEY
+id: media.image.small
+targetEntityType: media
+bundle: image
+mode: small
+content:
+  image:
+    type: responsive_image
+    weight: 0
+    label: hidden
+    settings:
+      responsive_image_style: responsive_small
+      image_link: ''
+    third_party_settings: {  }
+    region: content
+hidden:
+  created: true
+  field_caption: true
+  field_keywords: true
+  field_media_in_library: true
+  layout_builder__translation: true
+  name: true
+  search_api_excerpt: true
+  thumbnail: true
+  uid: true

config/sync/core.entity_view_mode.media.full_width.yml

@@ -9,6 +9,6 @@ third_party_settings:
   lightning_core:
     description: ''
 id: media.full_width
-label: Full-width
+label: Large
 targetEntityType: media
 cache: true

config/sync/core.entity_view_mode.media.half_width.yml

@@ -9,6 +9,6 @@ third_party_settings:
   lightning_core:
     description: ''
 id: media.half_width
-label: Half-width
+label: Medium
 targetEntityType: media
 cache: true

config/sync/core.entity_view_mode.media.small.yml

@@ -0,0 +1,14 @@
+uuid: 0f7718a7-c76a-4f4b-b802-72b6ea6f02d1
+langcode: en
+status: true
+dependencies:
+  module:
+    - lightning_core
+    - media
+third_party_settings:
+  lightning_core:
+    description: ''
+id: media.small
+label: Small
+targetEntityType: media
+cache: true

config/sync/image.style.colossal.yml

@@ -0,0 +1,15 @@
+uuid: 29fdf894-26f4-4d7a-b442-a4d62f552526
+langcode: en
+status: true
+dependencies: {  }
+name: colossal
+label: 'Colossal (1920px)'
+effects:
+  be1a9404-a96f-471f-93cf-553031b8a74e:
+    uuid: be1a9404-a96f-471f-93cf-553031b8a74e
+    id: image_scale
+    weight: 1
+    data:
+      width: 1920
+      height: null
+      upscale: false

config/sync/image.style.huge.yml

@@ -0,0 +1,15 @@
+uuid: 9de35fe9-cf06-41c8-9751-62b0a22ca6b7
+langcode: en
+status: true
+dependencies: {  }
+name: huge
+label: 'Huge (1280px)'
+effects:
+  bf75d18c-21ff-4c0b-95ce-09f2942f429d:
+    uuid: bf75d18c-21ff-4c0b-95ce-09f2942f429d
+    id: image_scale
+    weight: 1
+    data:
+      width: 1280
+      height: null
+      upscale: false

config/sync/image.style.thumbnail.yml

@@ -5,13 +5,13 @@ dependencies: {  }
 _core:
   default_config_hash: cCiWdBHgLwj5omG35lsKc4LkW4MBdmcctkVop4ol5x0
 name: thumbnail
-label: 'Thumbnail (100×100)'
+label: 'Thumbnail (160px)'
 effects:
   1cfec298-8620-4749-b100-ccb6c4500779:
     uuid: 1cfec298-8620-4749-b100-ccb6c4500779
     id: image_scale
     weight: 0
     data:
-      width: 100
-      height: 100
+      width: 160
+      height: null
       upscale: false

config/sync/responsive_image.styles.responsive_large.yml

@@ -0,0 +1,27 @@
+uuid: b27e2fe4-97a1-4463-adea-6d881cefd844
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.colossal
+    - image.style.huge
+    - image.style.large
+    - image.style.medium
+    - image.style.small
+id: responsive_large
+label: 'Responsive Large'
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(max-width: 960px) calc(100vw - 4rem), 960px'
+      sizes_image_styles:
+        - colossal
+        - huge
+        - large
+        - medium
+        - small
+breakpoint_group: responsive_image
+fallback_image_style: large

config/sync/responsive_image.styles.responsive_medium.yml

@@ -0,0 +1,25 @@
+uuid: 11bd970d-0025-4388-ab2a-89dd30ba3e99
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.huge
+    - image.style.large
+    - image.style.medium
+    - image.style.small
+id: responsive_medium
+label: 'Responsive Medium'
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(max-width: 640px) calc(100vw - 4rem), 640px'
+      sizes_image_styles:
+        - huge
+        - large
+        - medium
+        - small
+breakpoint_group: responsive_image
+fallback_image_style: medium

config/sync/responsive_image.styles.responsive_small.yml

@@ -0,0 +1,21 @@
+uuid: a0f9b3f0-f865-4b98-9570-65659f17da74
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.medium
+    - image.style.small
+id: responsive_small
+label: 'Responsive Small'
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(max-width: 320px) calc(100vw - 2rem), 320px'
+      sizes_image_styles:
+        - medium
+        - small
+breakpoint_group: responsive_image
+fallback_image_style: small

config/sync/responsive_image.styles.responsive_thumbnail.yml

@@ -0,0 +1,21 @@
+uuid: 7f7e43dd-0870-4ecc-bd9e-3c4eb0385aec
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.small
+    - image.style.thumbnail
+id: responsive_thumbnail
+label: 'Responsive Thumbnail'
+image_style_mappings:
+  -
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+    image_mapping_type: sizes
+    image_mapping:
+      sizes: '(max-width: 160px) calc(100vw - 2rem), 160px'
+      sizes_image_styles:
+        - small
+        - thumbnail
+breakpoint_group: responsive_image
+fallback_image_style: thumbnail