Merge pull request #68 from b13/bugfix/issue-52

[BUGFIX] svg and sources

Classes/Domain/Model/PictureConfiguration.php

@@ -79,7 +79,7 @@ public function getSourceConfiguration(): array
     {
         $configuration = [];
         foreach ($this->sources as $sourceType => $sourceAttributes) {
-            $configuration[$sourceType] = $this->arguments;
+            $configuration[$sourceType] = [];
             // At first check if given type exists in TypoScript settings and use the given media query.
             if ($this->breakPointsShouldBeAdded()) {
                 foreach ($this->getBreakPoints() as $breakpointName => $breakpointValue) {

Classes/ViewHelpers/ImageViewHelper.php

@@ -158,28 +158,27 @@ public function render(): string
         if ($this->pictureConfiguration->sourcesShouldBeAdded()) {
             foreach ($this->pictureConfiguration->getSourceConfiguration() as $sourceConfiguration) {
                 $sourceOutputs = [];
-
                 // use src from sourceConfiguration, if set, otherwise use the main image
                 if ((string)($sourceConfiguration['src'] ?? '') !== '' || isset($sourceConfiguration['image'])) {
                     $imageSrc = $this->imageService->getImage(
-                        (string)$sourceConfiguration['src'],
-                        $sourceConfiguration['image'],
-                        (bool)$sourceConfiguration['treatIdAsReference']
+                        (string)($sourceConfiguration['src'] ?? ''),
+                        $sourceConfiguration['image'] ?? null,
+                        (bool)($sourceConfiguration['treatIdAsReference'] ?? false)
                     );
                 } else {
                     $imageSrc = $image;
                 }
 
                 // Force webp rendering if onlyWebp is set
-                if ($this->pictureConfiguration->webpShouldBeAddedOnly()) {
+                if ($this->pictureConfiguration->webpShouldBeAddedOnly() && $imageSrc->getExtension() !== 'svg') {
                     $sourceConfiguration['fileExtension'] = 'webp';
                 }
                 $tag = $this->buildSingleTag('source', $sourceConfiguration, $imageSrc);
                 $sourceOutputs[] = $tag->render();
 
                 // Build additional source with type webp if attribute addWebp is set and previously build tag is not type of webp already.
                 $type = htmlspecialchars_decode($tag->getAttribute('type') ?? '');
-                if ($type !== 'image/webp' && $this->pictureConfiguration->webpShouldBeAdded()) {
+                if ($type !== 'image/webp' && $this->pictureConfiguration->webpShouldBeAdded() && $imageSrc->getExtension() !== 'svg') {
                     $tag = $this->addWebpImage($sourceConfiguration, $imageSrc);
                     array_unshift($sourceOutputs, $tag->render());
                 }
@@ -232,7 +231,7 @@ protected function buildVariantsIfNeeded(array $configuration, FileInterface $im
                     'minHeight' => null,
                     'maxWidth' => $useMaxWidth ? $srcsetWidth : null,
                     'maxHeight' => null,
-                    'crop' => $processingInstructions['crop'],
+                    'crop' => $processingInstructions['crop'] ?? null,
                 ];
                 if (!empty($configuration['fileExtension'] ?? '')) {
                     $srcsetProcessingInstructions['fileExtension'] = $configuration['fileExtension'];
@@ -438,12 +437,12 @@ protected function getProcessingInstructions(array $configuration, FileInterface
         $cropVariant = $configuration['cropVariant'] ?? $this->getImageCropVariant();
         $cropArea = $cropVariantCollection->getCropArea($cropVariant);
         $processingInstructions = [
-            'width' => $configuration['width'],
-            'height' => $configuration['height'],
-            'minWidth' => $configuration['minWidth'],
-            'minHeight' => $configuration['minHeight'],
-            'maxWidth' => $configuration['maxWidth'],
-            'maxHeight' => $configuration['maxHeight'],
+            'width' => $configuration['width'] ?? null,
+            'height' => $configuration['height'] ?? null,
+            'minWidth' => $configuration['minWidth'] ?? null,
+            'minHeight' => $configuration['minHeight'] ?? null,
+            'maxWidth' => $configuration['maxWidth'] ?? null,
+            'maxHeight' => $configuration['maxHeight'] ?? null,
             'crop' => $cropArea->isEmpty() ? null : $cropArea->makeAbsoluteBasedOnFile($image),
         ];
         if (!empty($configuration['fileExtension'] ?? '')) {

Tests/Functional/Frontend/Fixtures/Templates/ImageWithSourceKeepsOriginalSource.html

@@ -0,0 +1,11 @@
+<html
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    xmlns:i="http://typo3.org/ns/B13/Picture/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:spaceless>
+  <i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" alt="Testimage 400px width"
+           sources="{md: {src: 'EXT:picture/Resources/Public/Test/Picture_alt.png'}}"
+  />
+</f:spaceless>
+</html>

Tests/Functional/Frontend/Fixtures/Templates/SvgAsSourceWithWebp.html

@@ -0,0 +1,13 @@
+<html
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    xmlns:i="http://typo3.org/ns/B13/Picture/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:spaceless>
+  <i:image
+      src="EXT:picture/Resources/Public/Test/Picture.png" width="400" alt="Testimage 400px width"
+      addWebp="1"
+      sources="{md: {src: 'EXT:picture/Resources/Public/Icons/Extension.svg', width: '100'}}"
+  />
+</f:spaceless>
+</html>

Tests/Functional/Frontend/Fixtures/image_with_source_keeps_original_source.csv

@@ -0,0 +1,13 @@
+"pages"
+,"uid","pid","title","slug"
+,1,0,"root","/"
+"sys_template"
+,"uid","pid","root","constants","config"
+,1,1,1,styles.content.image.lazyLoading=lazy,"@import 'EXT:picture/Configuration/TypoScript/test.typoscript'
+page = PAGE
+page.config.disableAllHeaderCode = 1
+page.10 = FLUIDTEMPLATE
+page.10.templateRootPaths.10 = EXT:picture/Tests/Functional/Frontend/Fixtures/Templates
+page.10.templateName = ImageWithSourceKeepsOriginalSource.html
+config.absRefPrefix = /
+"

Tests/Functional/Frontend/Fixtures/svg_as_source_with_webp.csv

@@ -0,0 +1,13 @@
+"pages"
+,"uid","pid","title","slug"
+,1,0,"root","/"
+"sys_template"
+,"uid","pid","root","constants","config"
+,1,1,1,styles.content.image.lazyLoading=lazy,"@import 'EXT:picture/Configuration/TypoScript/test.typoscript'
+page = PAGE
+page.config.disableAllHeaderCode = 1
+page.10 = FLUIDTEMPLATE
+page.10.templateRootPaths.10 = EXT:picture/Tests/Functional/Frontend/Fixtures/Templates
+page.10.templateName = SvgAsSourceWithWebp.html
+config.absRefPrefix = /
+"

Tests/Functional/Frontend/TagRenderingTest.php

@@ -261,6 +261,33 @@ public function imageWithMultipleSourcesWithWebPOption(): void
         self::assertStringContainsString($this->anonymouseProcessdImage($expected), $this->anonymouseProcessdImage($body));
     }
 
+    /**
+     * @test
+     */
+    public function svgAsSourceWithWebpDoNotAddWebp(): void
+    {
+        $this->importCSVDataSet(__DIR__ . '/Fixtures/svg_as_source_with_webp.csv');
+        $response = $this->executeFrontendSubRequest(new InternalRequest('http://localhost/'));
+        $body = (string)$response->getBody();
+        // svg source not as webp (media="(min-width: 1024px)")
+        self::assertStringNotContainsString('.webp" media="(min-width: 1024px)" type="image/webp" />', $body);
+        // src as webp
+        self::assertStringContainsString('.webp" type="image/webp" />', $body);
+        // svg source as source
+        self::assertStringContainsString('Icons/Extension.svg" media="(min-width: 1024px)" />', $body);
+    }
+
+    /**
+     * @test
+     */
+    public function imageWithSourceKeepsOriginalSource(): void
+    {
+        $this->importCSVDataSet(__DIR__ . '/Fixtures/image_with_source_keeps_original_source.csv');
+        $response = $this->executeFrontendSubRequest(new InternalRequest('http://localhost/'));
+        $body = (string)$response->getBody();
+        self::assertStringContainsString('Test/Picture_alt.png" media="(min-width: 1024px)" />', $body);
+    }
+
     protected function anonymouseProcessdImage(string $content): string
     {
         $content = preg_replace('/Picture_[0-9a-z]+\./', 'Picture_xxx.', $content);