Merge pull request #790 from UN-OCHA/berliner/HPC-9191

HPC-9191: First working draft on manual cropping of local and remote images with new letterbox image styles

composer.json

@@ -82,6 +82,7 @@
         "drupal/gin_lb": "^1.0@beta",
         "drupal/gin_toolbar": "^1.0",
         "drupal/google_tag": "^1.5",
+        "drupal/image_widget_crop": "^2.4",
         "drupal/imageapi_optimize": "^4.0",
         "drupal/imagecache_external": "^3.0",
         "drupal/imagemagick": "^3.3",

config/core.entity_form_display.node.article.default.yml

@@ -78,6 +78,7 @@ third_party_settings:
       children:
         - field_display_hero_image
         - field_crop_hero_image
+        - image_crop
         - field_inherit_section_image
       label: Display
       region: content
@@ -147,7 +148,7 @@ content:
     third_party_settings: {  }
   field_inherit_section_image:
     type: boolean_checkbox
-    weight: 29
+    weight: 30
     region: content
     settings:
       display_label: true
@@ -176,6 +177,11 @@ content:
       size: 60
       placeholder: ''
     third_party_settings: {  }
+  image_crop:
+    weight: 29
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   langcode:
     type: language_select
     weight: 1

config/core.entity_form_display.node.section.default.yml

@@ -50,7 +50,7 @@ content:
     third_party_settings: {  }
   field_summary:
     type: text_textarea
-    weight: 26
+    weight: 15
     region: content
     settings:
       rows: 5
@@ -79,6 +79,11 @@ content:
     settings:
       placeholder: ''
     third_party_settings: {  }
+  image_crop:
+    weight: 14
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   langcode:
     type: language_select
     weight: 4
@@ -137,7 +142,7 @@ content:
       placeholder: ''
     third_party_settings: {  }
   url_redirects:
-    weight: 50
+    weight: 16
     region: content
     settings: {  }
     third_party_settings: {  }

config/core.entity_view_display.node.document.search_result.yml

@@ -84,6 +84,8 @@ content:
     settings:
       responsive_image_style: card_hero
       image_link: content
+      image_loading:
+        attribute: eager
     third_party_settings: {  }
     weight: 0
     region: content

config/core.extension.yml

@@ -23,6 +23,7 @@ module:
   config_split: 0
   config_translation: 0
   contextual: 0
+  crop: 0
   ctools: 0
   datetime: 0
   datetime_range: 0
@@ -61,6 +62,7 @@ module:
   hpc_downloads: 0
   hpc_security: 0
   image: 0
+  image_widget_crop: 0
   imageapi_optimize: 0
   imagecache_external: 0
   imagemagick: 0

config/crop.settings.yml

@@ -0,0 +1,3 @@
+_core:
+  default_config_hash: 7eGOTSG7bRv_AAqu-Ls8CSnob7zPF1ez-lD2OLZgBHs
+flush_derivative_images: true

config/crop.type.14x5.yml

@@ -0,0 +1,12 @@
+uuid: 14c68939-0df4-4319-b4c6-14c3d62e9763
+langcode: en
+status: true
+dependencies: {  }
+label: 14x5
+id: 14x5
+description: 'Letterbox size for hero images'
+aspect_ratio: '14:5'
+soft_limit_width: null
+soft_limit_height: null
+hard_limit_width: null
+hard_limit_height: null

config/crop.type.16x9.yml

@@ -0,0 +1,12 @@
+uuid: 0990d642-014f-438c-8f6a-e13c90907019
+langcode: en
+status: true
+dependencies: {  }
+label: 16x9
+id: 16x9
+description: 'Card size for galleries'
+aspect_ratio: '16:9'
+soft_limit_width: null
+soft_limit_height: null
+hard_limit_width: null
+hard_limit_height: null

config/image.style.14x5_1200.yml

@@ -0,0 +1,27 @@
+uuid: 6a532d5d-188b-4db7-8dd5-d80b826cea06
+langcode: en
+status: true
+dependencies:
+  config:
+    - crop.type.14x5
+  module:
+    - crop
+name: 14x5_1200
+label: '14x5 @ 1200'
+effects:
+  008b1c5c-01d6-47bf-b2bd-f70779634358:
+    uuid: 008b1c5c-01d6-47bf-b2bd-f70779634358
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: 14x5
+      automatic_crop_provider: null
+  f88a76bc-5c91-45aa-a610-5e006b297dc8:
+    uuid: f88a76bc-5c91-45aa-a610-5e006b297dc8
+    id: image_scale_and_crop
+    weight: 3
+    data:
+      width: 1200
+      height: 429
+      anchor: center-center
+pipeline: __default__

config/image.style.14x5_1400.yml

@@ -0,0 +1,27 @@
+uuid: 8e8f8166-c401-4db1-bc55-06494c651c06
+langcode: en
+status: true
+dependencies:
+  config:
+    - crop.type.14x5
+  module:
+    - crop
+name: 14x5_1400
+label: '14x5 @ 1400'
+effects:
+  5d65da5e-155a-484b-b9ba-f49bce3a3229:
+    uuid: 5d65da5e-155a-484b-b9ba-f49bce3a3229
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: 14x5
+      automatic_crop_provider: null
+  08b16975-bc30-4039-9d47-9da8523fe896:
+    uuid: 08b16975-bc30-4039-9d47-9da8523fe896
+    id: image_scale_and_crop
+    weight: 3
+    data:
+      width: 1400
+      height: 500
+      anchor: center-center
+pipeline: __default__

config/image.style.14x5_240.yml

@@ -0,0 +1,27 @@
+uuid: e0c4d833-fbb0-4d59-a0ff-70c20a764f5c
+langcode: en
+status: true
+dependencies:
+  config:
+    - crop.type.14x5
+  module:
+    - crop
+name: 14x5_240
+label: '14x5 @ 240'
+effects:
+  4f3595eb-fd24-4222-812f-cc444eaf4f98:
+    uuid: 4f3595eb-fd24-4222-812f-cc444eaf4f98
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: 14x5
+      automatic_crop_provider: null
+  423f30ef-eb01-416b-81ed-c8348e065ca6:
+    uuid: 423f30ef-eb01-416b-81ed-c8348e065ca6
+    id: image_scale_and_crop
+    weight: 3
+    data:
+      width: 240
+      height: 85
+      anchor: center-center
+pipeline: __default__

config/image.style.14x5_480.yml

@@ -0,0 +1,27 @@
+uuid: fa5b4717-906e-4a53-a06b-5c51dd53c266
+langcode: en
+status: true
+dependencies:
+  config:
+    - crop.type.14x5
+  module:
+    - crop
+name: 14x5_480
+label: '14x5 @ 480'
+effects:
+  525800f5-e090-435a-9d53-19d16bdbaac9:
+    uuid: 525800f5-e090-435a-9d53-19d16bdbaac9
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: 14x5
+      automatic_crop_provider: null
+  44c42d9e-5d34-4f5d-ae32-a1c1a9f3265f:
+    uuid: 44c42d9e-5d34-4f5d-ae32-a1c1a9f3265f
+    id: image_scale_and_crop
+    weight: 3
+    data:
+      width: 480
+      height: 171
+      anchor: center-center
+pipeline: __default__