Merge pull request #11 from sitegeist/feature/autoWebp

[FEATURE] add ext_conf to globally change formats
sitegeist · Jan 3, 2025 · 6641e4e · 6641e4e
2 parents f40fce2 + 6bb40c2
commit 6641e4e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/Classes/ViewHelpers/Image/Modify/FormatViewHelper.php b/Classes/ViewHelpers/Image/Modify/FormatViewHelper.php
@@ -4,6 +4,9 @@
 namespace Sitegeist\MediaComponents\ViewHelpers\Image\Modify;
 
 use Sitegeist\MediaComponents\Domain\Model\ImageSource;
+use SMS\FluidComponents\Interfaces\ProcessableImage;
+use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 
 class FormatViewHelper extends AbstractViewHelper
@@ -17,10 +20,27 @@ public function initializeArguments(): void
     public function render(): ImageSource
     {
         $imageSource = $this->arguments['imageSource'] ?? $this->renderChildren();
+
+        if (!$this->arguments['format']
+            && $imageSource->getOriginalImage() instanceof ProcessableImage
+            && in_array(
+                $imageSource->getOriginalImage()->getFile()->getExtension(),
+                $this->getAutoWebpConversionFormats()
+            )
+        ) {
+            $this->arguments['format'] = 'webp';
+        }
+
         if ($this->arguments['format']) {
             $imageSourceWithFormat = clone $imageSource;
             $imageSourceWithFormat->setFormat($this->arguments['format']);
         }
         return $imageSourceWithFormat ?? $imageSource;
     }
+
+    private function getAutoWebpConversionFormats(): array
+    {
+        $extensionConfiguration = GeneralUtility::makeInstance(ExtensionConfiguration::class);
+        return GeneralUtility::trimExplode(',', $extensionConfiguration->get('media_components', 'autoWebpConversionFormats'), true);
+    }
 }
diff --git a/README.md b/README.md
@@ -12,6 +12,12 @@ This extension provides ready-to-use [Fluid Components](https://github.com/siteg
 * Video files
     * [HTML5 video tag with support for subtitles](./Resources/Private/Components/Video/Video.html)
 
+
+## WebP conversion
+
+As these components are such basic atoms, you could use them to change the format of any image to WebP to reduce file sizes. The extension configuration contains a list of file extensions that will be converted to WebP if not explicitly defined with `format=`.
+You colud use `autoWebpConversionFormats` with `gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai` to get full conversion to WebP (without `svg` as it already has a smaller file size).
+
 ## Usage
 
 We use the public namespace from fluid-components.

diff --git a/Tests/Functional/ImageComponentTest.php b/Tests/Functional/ImageComponentTest.php
@@ -15,7 +15,8 @@ public static function imageComponentTestProvider(): array
         return [
             'Only mandatory data provided' => [
                 '<img src="fileadmin/test_files/image.png" height="3840" width="3840" />',
-                '<fc:image src="5" />'
+                '<fc:image src="5" />',
+                '',
             ],
             'All data provided' => [
                 '<img src="fileadmin/_processed_/3/8/csm_image_3c73179ad3.jpg" srcset="fileadmin/_processed_/3/8/csm_image_2fe057fbe4.jpg 400w, fileadmin/_processed_/3/8/csm_image_00a46099c0.jpg 800w, fileadmin/_processed_/3/8/csm_image_622ce9e0c0.jpg 1200w" height="100" width="100" alt="Alt text" title="Title text" loading="lazy" sizes="(min-width: 400px) 400px, (min-width: 800px) 800px, (min-width:1200px) 1200px, 100vw" />',
@@ -32,17 +33,33 @@ public static function imageComponentTestProvider(): array
                     title="Title text"
                     lazyload="true"
                     preload="true"
-                />'
-            ]
+                />',
+                '',
+            ],
+            'Active WebP auto conversion' => [
+                '<img src="fileadmin/_processed_/3/8/csm_image_4458ca8493.webp" height="3840" width="3840" />',
+                '<fc:image src="5" />',
+                'jpeg, png',
+            ],
+            'Forced Format WebP auto conversion' => [
+                '<img src="fileadmin/test_files/image.png" height="3840" width="3840" />',
+                '<fc:image src="5" format="png" />',
+                'jpeg, png',
+            ],
+            'Not applying WebP auto conversion' => [
+                '<img src="fileadmin/test_files/image.png" height="3840" width="3840" />',
+                '<fc:image src="5" />',
+                'jpeg, ai',
+            ],
         ];
     }
 
     #[Test]
     #[DataProvider('imageComponentTestProvider')]
-    public function imageComponentTest(string $expectedResult, string $input): void {
+    public function imageComponentTest(string $expectedResult, string $input, string $autoWebpConversionFormats): void {
+        $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['media_components']['autoWebpConversionFormats'] = $autoWebpConversionFormats;
         $view = $this->getTestView($input);
         $result = $this->cleanUpTestResult($view->render());
-
         $this->assertStringContainsString($expectedResult, $result);
     }
 }
diff --git a/ext_conf_template.txt b/ext_conf_template.txt
@@ -0,0 +1,2 @@
+# cat=Format/enable; type=string; label=Auto WebP conversion: for specific formats, "," separated;
+autoWebpConversionFormats =
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# cat=Format/enable; type=string; label=Auto WebP conversion: for specific formats, "," separated;
		autoWebpConversionFormats =