Update display of media images in slides

config/sync/core.entity_form_display.media.image.default.yml

@@ -31,6 +31,7 @@ content:
       preview_image_style: media_library
       crop_preview_image_style: crop_thumbnail
       crop_list:
+        - extra_wide_5_1
         - extra_wide_rectangle
         - wide_rectangle
       crop_types_required: {  }

config/sync/core.entity_form_display.media.image.paragraph.yml

@@ -0,0 +1,67 @@
+uuid: 870f5f54-b5cc-4ad9-a7ba-d8cf0352282a
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.media.paragraph
+    - field.field.media.image.field_media_image
+    - image.style.drutopia_wide
+    - media.type.image
+  module:
+    - image_widget_crop
+    - path
+_core:
+  default_config_hash: v5qWuH4sE0OlCxD1-nK7_3VpLAN3Doi1y05Hvl-7Zwk
+id: media.image.paragraph
+targetEntityType: media
+bundle: image
+mode: paragraph
+content:
+  created:
+    type: datetime_timestamp
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_media_image:
+    type: image_widget_crop
+    weight: 0
+    region: content
+    settings:
+      progress_indicator: throbber
+      preview_image_style: drutopia_wide
+      crop_preview_image_style: wide
+      crop_list:
+        - extra_wide_5_1
+        - extra_wide_rectangle
+        - wide_rectangle
+      crop_types_required: {  }
+      warn_multiple_usages: true
+      show_crop_area: false
+      show_default_crop: true
+    third_party_settings: {  }
+  path:
+    type: path
+    weight: 30
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  status:
+    type: boolean_checkbox
+    weight: 100
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  uid:
+    type: entity_reference_autocomplete
+    weight: 5
+    region: content
+    settings:
+      match_operator: CONTAINS
+      match_limit: 10
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+hidden:
+  name: true

config/sync/core.entity_form_display.paragraph.slide.default.yml

@@ -33,7 +33,7 @@ content:
     region: content
     settings:
       media_types: {  }
-      form_mode: default
+      form_mode: paragraph
       check_selected: false
       replace_checkbox_by_order_indicator: false
       multi_edit_on_create: false

config/sync/core.entity_form_mode.media.paragraph.yml

@@ -0,0 +1,11 @@
+uuid: 3f6d7521-af7b-478a-8925-f14b8afd2a89
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.paragraph
+label: Paragraph
+description: ''
+targetEntityType: media
+cache: true

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

@@ -6,7 +6,7 @@ dependencies:
     - core.entity_view_mode.media.wide
     - field.field.media.image.field_media_image
     - media.type.image
-    - responsive_image.styles.drutopia_main
+    - responsive_image.styles.wide_and_flat
   module:
     - responsive_image
 _core:
@@ -20,10 +20,10 @@ content:
     type: responsive_image
     label: hidden
     settings:
-      responsive_image_style: drutopia_extra_wide
+      responsive_image_style: wide_and_flat
       image_link: ''
       image_loading:
-        attribute: eager
+        attribute: lazy
     third_party_settings: {  }
     weight: 1
     region: content

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

@@ -8,10 +8,8 @@ dependencies:
     - field.field.paragraph.slide.field_media_image
     - field.field.paragraph.slide.field_text
     - paragraphs.paragraphs_type.slide
-    - responsive_image.styles.drutopia_main
   module:
     - link
-    - media_responsive_thumbnail
     - text
 _core:
   default_config_hash: UAPQqmLqL09HJqncuKGUGYmYfBq2PFHcEOyes55hDek
@@ -20,14 +18,6 @@ targetEntityType: paragraph
 bundle: slide
 mode: default
 content:
-  field_image:
-    type: image_url
-    label: visually_hidden
-    settings:
-      image_style: focal_point_2600x1300
-    third_party_settings: {  }
-    weight: 0
-    region: content
   field_link:
     type: link
     label: hidden
@@ -41,13 +31,11 @@ content:
     weight: 2
     region: content
   field_media_image:
-    type: media_responsive_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      responsive_image_style: drutopia_main
+      view_mode: wide
-      image_link: ''
+      link: false
-      image_loading:
-        attribute: lazy
     third_party_settings: {  }
     weight: 0
     region: content

config/sync/crop.type.extra_wide_5_1.yml

@@ -0,0 +1,12 @@
+uuid: 9fffaa94-3acb-4cae-9759-dc0542d23d71
+langcode: en
+status: true
+dependencies: {  }
+label: 'Extra wide 5:1'
+id: extra_wide_5_1
+description: ''
+aspect_ratio: '5:1'
+soft_limit_width: 1000
+soft_limit_height: 200
+hard_limit_width: 50
+hard_limit_height: 10

config/sync/image.style.crop_1500x300.yml

@@ -0,0 +1,26 @@
+uuid: 2200bf93-a434-48bc-a4f4-b33096994dbe
+langcode: en
+status: true
+dependencies:
+  config:
+    - crop.type.extra_wide_5_1
+  module:
+    - crop
+name: crop_1500x300
+label: 'Crop (1500x300)'
+effects:
+  bdf1cb17-bef6-4a3d-a1d9-48934810166d:
+    uuid: bdf1cb17-bef6-4a3d-a1d9-48934810166d
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: extra_wide_5_1
+      automatic_crop_provider: null
+  16c611fa-d9ff-472e-8bc8-247d0864a18f:
+    uuid: 16c611fa-d9ff-472e-8bc8-247d0864a18f
+    id: image_scale
+    weight: 2
+    data:
+      width: 1500
+      height: 300
+      upscale: false

config/sync/responsive_image.styles.wide_and_flat.yml

@@ -0,0 +1,16 @@
+uuid: 26ffc89d-2091-451a-abab-b91e63f098f4
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.crop_1500x300
+id: wide_and_flat
+label: 'Wide and flat'
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: crop_1500x300
+    breakpoint_id: responsive_image.viewport_sizing
+    multiplier: 1x
+breakpoint_group: responsive_image
+fallback_image_style: crop_1500x300