Issue #3502046 by phenaproxima, annmarysruthy, greg boggs: Update image styles...

Issue #3502046 by phenaproxima, annmarysruthy, greg boggs: Update image styles to add convert to webp

recipes/drupal_cms_image/config/image.style.3_4_225x300_focal_point_webp.yml

@@ -14,3 +14,9 @@ effects:
       width: 225
       height: 300
       crop_type: focal_point
+  9345aea6-53fb-43ca-8f3e-a0bd87a4e796:
+    uuid: 9345aea6-53fb-43ca-8f3e-a0bd87a4e796
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/image.style.3_4_450x600_focal_point_webp.yml

@@ -14,3 +14,9 @@ effects:
       width: 450
       height: 600
       crop_type: focal_point
+  bdd5bd8e-4cd7-4a1f-9c9f-b95cbe9c7138:
+    uuid: bdd5bd8e-4cd7-4a1f-9c9f-b95cbe9c7138
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/image.style.4_3_300x225_focal_point_webp.yml

@@ -14,3 +14,9 @@ effects:
       width: 300
       height: 225
       crop_type: focal_point
+  6f7b215b-1907-472f-8f78-33e30a5c1956:
+    uuid: 6f7b215b-1907-472f-8f78-33e30a5c1956
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/config/image.style.uncropped_300w_webp.yml

@@ -12,3 +12,9 @@ effects:
       width: 300
       height: null
       upscale: false
+  edf92b44-e86e-4b5c-b11c-fd6e44ebda67:
+    uuid: edf92b44-e86e-4b5c-b11c-fd6e44ebda67
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_image/tests/src/Functional/ComponentValidationTest.php

@@ -5,6 +5,7 @@ declare(strict_types=1);
 namespace Drupal\Tests\drupal_cms_image\Functional;
 
 use Drupal\FunctionalTests\Core\Recipe\RecipeTestTrait;
+use Drupal\image\Entity\ImageStyle;
 use Drupal\Tests\BrowserTestBase;
 
 /**
@@ -26,6 +27,12 @@ class ComponentValidationTest extends BrowserTestBase {
     $this->applyRecipe($dir);
     // Apply it again to prove that it is idempotent.
     $this->applyRecipe($dir);
+
+    // Ensure all image styles convert to WebP.
+    $image_styles = ImageStyle::loadMultiple();
+    foreach ($image_styles as $id => $image_style) {
+      $this->assertSame('webp', $image_style->getDerivativeExtension('png'), "The '$id' image style does not convert to WebP.");
+    }
   }
 
 }

recipes/drupal_cms_seo_tools/config/image.style.social_media_facebook.yml

@@ -14,3 +14,9 @@ effects:
       width: 1200
       height: 630
       crop_type: focal_point
+  8ddd479d-03db-45d3-8591-a7b72e13bb21:
+    uuid: 8ddd479d-03db-45d3-8591-a7b72e13bb21
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_seo_tools/config/image.style.social_media_x.yml

@@ -14,3 +14,9 @@ effects:
       width: 1600
       height: 900
       crop_type: focal_point
+  94553ea6-7659-4f21-b586-3dd07fb21e88:
+    uuid: 94553ea6-7659-4f21-b586-3dd07fb21e88
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

recipes/drupal_cms_seo_tools/tests/src/Functional/ContentMetaTagsTest.php

@@ -122,7 +122,7 @@ class ContentMetaTagsTest extends BrowserTestBase {
       $assert_session->elementAttributeContains('css', 'meta[property="og:image:alt"]', 'content', $alt_text);
       $assert_session->elementAttributeContains('css', 'meta[property="og:image:width"]', 'content', (string) $facebook_dimensions['width']);
       $assert_session->elementAttributeContains('css', 'meta[property="og:image:height"]', 'content', (string) $facebook_dimensions['height']);
-      $assert_session->elementAttributeContains('css', 'meta[property="og:image:type"]', 'content', $file->getMimeType());
+      $assert_session->elementAttributeContains('css', 'meta[property="og:image:type"]', 'content', 'image/webp');
       $assert_session->elementAttributeContains('css', 'meta[name="twitter:image"]', 'content', $name);
       $assert_session->elementAttributeContains('css', 'meta[name="twitter:image:alt"]', 'content', $alt_text);
     };