Merge pull request #645 from UN-OCHA/RW-803

[RW-803] Webp and responsive images

PATCHES/imageapi_optimize_webp-imagemagick-toolkit.patch

@@ -0,0 +1,60 @@
+diff --git a/src/Plugin/ImageAPIOptimizeProcessor/WebP.php b/src/Plugin/ImageAPIOptimizeProcessor/WebP.php
+index 070c6fe..20d8bd5 100644
+--- a/src/Plugin/ImageAPIOptimizeProcessor/WebP.php
++++ b/src/Plugin/ImageAPIOptimizeProcessor/WebP.php
+@@ -6,6 +6,8 @@ use Drupal\Core\Form\FormStateInterface;
+ use Drupal\imageapi_optimize\ConfigurableImageAPIOptimizeProcessorBase;
+
+ /**
++ * WebP conversion processor.
++ *
+  * @ImageAPIOptimizeProcessor(
+  *   id = "imageapi_optimize_webp",
+  *   label = @Translation("WebP Deriver"),
+@@ -18,14 +20,31 @@ class WebP extends ConfigurableImageAPIOptimizeProcessorBase {
+    * {@inheritdoc}
+    */
+   public function applyToImage($image_uri) {
+-    $source_image = $this->imageFactory->get($image_uri, 'gd');
++    if (!in_array('webp', $this->imageFactory->getSupportedExtensions())) {
++      return FALSE;
++    }
++    $toolkit_id = $this->imageFactory->getToolkitId();
++    $source_image = $this->imageFactory->get($image_uri, $toolkit_id);
+     if ($source_image) {
+       $destination = $image_uri . '.webp';
+-      // @todo: Add try/catch.
+-      imagewebp($source_image->getToolkit()->getResource(), $destination, $this->configuration['quality']);
+-      // Fix issue where sometimes image fails to generate.
+-      if (filesize($destination) % 2 == 1) {
+-        file_put_contents($destination, "\0", FILE_APPEND);
++      try {
++        if ($toolkit_id == 'imagemagick') {
++          $source_image->convert('webp');
++          $source_image->save($destination);
++        }
++        elseif ($toolkit_id == 'gd') {
++          imagewebp($source_image->getToolkit()->getResource(), $destination, $this->configuration['quality']);
++        }
++        else {
++          return FALSE;
++        }
++        // Fix issue where sometimes image fails to generate.
++        if (filesize($destination) % 2 == 1) {
++          file_put_contents($destination, "\0", FILE_APPEND);
++        }
++      }
++      catch (\Exception $exception) {
++        return FALSE;
+       }
+       return TRUE;
+     }
+@@ -45,7 +64,7 @@ class WebP extends ConfigurableImageAPIOptimizeProcessorBase {
+    * {@inheritdoc}
+    */
+   public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+-    // @todo: Add ability to pick which image types allow derivatives.
++    // @todo Add ability to pick which image types allow derivatives.
+     $form['quality'] = [
+       '#type' => 'number',
+       '#title' => $this->t('Image quality'),

PATCHES/imageapi_optimize_webp-webp-source-image.patch

@@ -0,0 +1,23 @@
+diff --git a/src/Controller/ImageStyleDownloadController.php b/src/Controller/ImageStyleDownloadController.php
+index c8c9d67..3bb45af 100644
+--- a/src/Controller/ImageStyleDownloadController.php
++++ b/src/Controller/ImageStyleDownloadController.php
+@@ -25,9 +25,17 @@ class ImageStyleDownloadController extends CoreImageStyleDownloadController {
+    */
+   public function lookupSourceImage($image_uri) {
+     $source_image = substr($image_uri, 0, strrpos($image_uri, "."));
+-    if($source_image . '.webp' === $image_uri) {
++    // Handle image URI in the form `name.webp` in which case it is already
++    // the source image.
++    if (pathinfo($source_image, \PATHINFO_EXTENSION) === '') {
++      return $image_uri;
++    }
++    // Handle image URI in the form `name.ext.webp` in which case  `name.ext` is
++    // the source image.
++    elseif ($source_image . '.webp' === $image_uri) {
+       return $source_image;
+     }
++    return NULL;
+   }
+
+   /**

PATCHES/stage_file_proxy-webp-support-fix-3171559.patch

@@ -0,0 +1,26 @@
+diff --git a/src/EventSubscriber/StageFileProxySubscriber.php b/src/EventSubscriber/StageFileProxySubscriber.php
+index 63061b7..daedfbc 100644
+--- a/src/EventSubscriber/StageFileProxySubscriber.php
++++ b/src/EventSubscriber/StageFileProxySubscriber.php
+@@ -144,10 +144,9 @@ class StageFileProxySubscriber implements EventSubscriberInterface {
+     $paths = [$relative_path];
+
+     // Webp support.
+-    $is_webp = FALSE;
+-    if (strpos($relative_path, '.webp')) {
++    if (str_ends_with($relative_path, '.webp')) {
+       $paths[] = str_replace('.webp', '', $relative_path);
+-      $is_webp = TRUE;
++      $paths = array_reverse($paths);
+     }
+
+     foreach ($paths as $relative_path) {
+@@ -163,7 +162,7 @@ class StageFileProxySubscriber implements EventSubscriberInterface {
+       // Is this imagecache? Request the root file and let imagecache resize.
+       // We check this first so locally added files have precedence.
+       $original_path = $this->manager->styleOriginalPath($relative_path, TRUE);
+-      if ($original_path && !$is_webp) {
++      if ($original_path) {
+         if (file_exists($original_path)) {
+           // Imagecache can generate it without our help.
+           return;

composer.json

@@ -25,7 +25,7 @@
         "cweagans/composer-patches": "^1.7",
         "drupal/admin_denied": "^2.0",
         "drupal/allowed_formats": "^2.0",
-        "drupal/ckeditor": "*",
+        "drupal/ckeditor": "^1.0",
         "drupal/classy": "^1.0",
         "drupal/components": "^3.0@beta",
         "drupal/config_filter": "^2.2",
@@ -38,6 +38,7 @@
         "drupal/google_tag": "^1.6",
         "drupal/guidelines": "^1.0",
         "drupal/imageapi_optimize_binaries": "^1.0@beta",
+        "drupal/imageapi_optimize_webp": "^2.0",
         "drupal/imagemagick": "^3.4",
         "drupal/inline_entity_form": "^1.0@rc",
         "drupal/mailsystem": "^4.4",

composer.patches.json

@@ -9,12 +9,19 @@
         "drupal/guidelines": {
             "Drupal 10 compatibility": "PATCHES/guidelines-drupal-10-compatibility.patch"
         },
+        "drupal/imageapi_optimize_webp": {
+            "Fix derivatives for webp source images": "PATCHES/imageapi_optimize_webp-webp-source-image.patch",
+            "Support imagemagick toolkit": "PATCHES/imageapi_optimize_webp-imagemagick-toolkit.patch"
+        },
         "drupal/maintenance200": {
             "Drupal 10 compatibility": "PATCHES/maintenance200-drupal-10-compatibility.patch"
         },
         "drupal/pathauto": {
             "PHP 8.2 compatibility": "PATCHES/pathauto-php-82-compatibility.patch"
         },
+        "drupal/stage_file_proxy": {
+            "Webp support fix": "PATCHES/stage_file_proxy-webp-support-fix-3171559.patch"
+        },
         "drupal/username_enumeration_prevention": {
             "Avoid leaking the path via Drupal.settings json": "PATCHES/username_enumeration_prevention-user-login-block-form-3312288.patch"
         },

config/core.extension.yml

@@ -28,6 +28,8 @@ module:
   image: 0
   imageapi_optimize: 0
   imageapi_optimize_binaries: 0
+  imageapi_optimize_webp: 0
+  imageapi_optimize_webp_responsive: 0
   imagemagick: 0
   inline_entity_form: 0
   inline_form_errors: 0

config/imageapi_optimize.pipeline.webp.yml

@@ -0,0 +1,26 @@
+uuid: f73a800f-44db-46f4-b6e8-e2eff11e1e11
+langcode: en
+status: true
+dependencies:
+  module:
+    - imageapi_optimize_binaries
+    - imageapi_optimize_webp
+name: webp
+label: Webp
+processors:
+  17c18933-5d67-4a5b-8a1f-4666eb7acabf:
+    id: imageapi_optimize_webp
+    data:
+      quality: '75'
+    weight: 1
+    uuid: 17c18933-5d67-4a5b-8a1f-4666eb7acabf
+  e9fab1af-a730-4393-846b-5d254a40fde8:
+    id: pngquant
+    data:
+      manual_executable_path: ''
+      speed: 3
+      quality:
+        min: 90
+        max: 99
+    weight: 2
+    uuid: e9fab1af-a730-4393-846b-5d254a40fde8

config/imageapi_optimize.settings.yml

@@ -1,3 +1,3 @@
 _core:
   default_config_hash: MTm0uqe2B71zGYpOt10vRcS7pf9m92Yy2P4cnTXbSR0
-default_pipeline: local_binaries
+default_pipeline: webp

config/responsive_image.styles.announcement.yml

@@ -0,0 +1,18 @@
+uuid: 30afe701-645d-471b-a397-2e83987cb5e2
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.announcement
+  theme:
+    - common_design_subtheme
+id: announcement
+label: Announcement
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: announcement
+    breakpoint_id: common_design.small
+    multiplier: 1x
+breakpoint_group: common_design_subtheme
+fallback_image_style: announcement

config/responsive_image.styles.large.yml

@@ -0,0 +1,30 @@
+uuid: 457de771-4805-442d-a5c3-ce8463405ab9
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.large
+    - image.style.medium
+    - image.style.small
+  theme:
+    - common_design_subtheme
+id: large
+label: Large
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: large
+    breakpoint_id: common_design.large
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: medium
+    breakpoint_id: common_design.medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: small
+    breakpoint_id: common_design.small
+    multiplier: 1x
+breakpoint_group: common_design_subtheme
+fallback_image_style: small

config/responsive_image.styles.medium.yml

@@ -0,0 +1,24 @@
+uuid: a83c71ef-172d-43a4-b773-45ba58e7ec82
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.medium
+    - image.style.small
+  theme:
+    - common_design_subtheme
+id: medium
+label: Medium
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: medium
+    breakpoint_id: common_design.medium
+    multiplier: 1x
+  -
+    image_mapping_type: image_style
+    image_mapping: small
+    breakpoint_id: common_design.small
+    multiplier: 1x
+breakpoint_group: common_design_subtheme
+fallback_image_style: small

config/responsive_image.styles.small.yml

@@ -0,0 +1,18 @@
+uuid: f3c4de78-bed4-4964-bc12-374fb64fa7c2
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.small
+  theme:
+    - common_design_subtheme
+id: small
+label: Small
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: small
+    breakpoint_id: common_design.small
+    multiplier: 1x
+breakpoint_group: common_design_subtheme
+fallback_image_style: small

config/responsive_image.styles.thumbnail.yml

@@ -0,0 +1,18 @@
+uuid: 7976cfe7-bf51-46f2-b13a-b16d9d074534
+langcode: en
+status: true
+dependencies:
+  config:
+    - image.style.thumbnail
+  theme:
+    - common_design_subtheme
+id: thumbnail
+label: Thumbnail
+image_style_mappings:
+  -
+    image_mapping_type: image_style
+    image_mapping: thumbnail
+    breakpoint_id: common_design.small
+    multiplier: 1x
+breakpoint_group: common_design_subtheme
+fallback_image_style: thumbnail

html/modules/custom/reliefweb_entities/src/Entity/Report.php

@@ -183,7 +183,7 @@ public function getAttachments(?array $build = NULL) {
       $build['#attributes']['class'][] = 'rw-attachment--map';
       foreach ($build['#list'] as &$item) {
         if (isset($item['preview'])) {
-          $item['preview']['#style_name'] = 'large';
+          $item['preview']['#responsive_image_style_id'] = 'large';
         }
         $item['label'] = $label;
       }

html/modules/custom/reliefweb_entities/templates/reliefweb-entities-entity-image.html.twig

@@ -25,11 +25,11 @@
 }}>
   {% if style is not empty %}
     {{ render_var({
-      '#theme': 'image_style',
-      '#style_name': style,
+      '#theme': 'responsive_image',
+      '#responsive_image_style_id': style,
       '#uri': image.uri,
-      '#alt': image.alt,
       '#attributes': {
+        'alt': image.alt,
         'class': ['rw-entity-image__image'],
         'loading': image.loading is not empty ? image.loading : loading,
       },