WIP

.ecrc

@@ -8,7 +8,6 @@
         ".Build",
         ".cache",
         ".git",
-        ".DS_Store",
         ".xsd"
     ],
     "AllowedContentTypes": [],

.editorconfig

@@ -1,16 +1,64 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
 root = true
 
+# Unix-style newlines with a newline ending every file
 [*]
+charset = utf-8
+end_of_line = lf
 indent_style = space
 indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
+
+# TS/JS-Files
+[*.{ts,js,mjs}]
+indent_size = 2
+
+# JSON-Files
+[*.json]
+indent_style = tab
 
+# ReST-Files
+[*.{rst,rst.txt}]
+indent_size = 4
+max_line_length = 80
+
+# Markdown-Files
 [*.md]
-trim_trailing_whitespace = false
-indent_style = unset
+max_line_length = 80
+
+# YAML-Files
+[*.{yaml,yml}]
+indent_size = 2
+
+# NEON-Files
+[*.neon]
+indent_size = 2
+indent_style = tab
+
+# stylelint
+[.stylelintrc]
+indent_size = 2
+
+# package.json
+[package.json]
+indent_size = 2
+
+# TypoScript
+[*.{typoscript,tsconfig}]
+indent_size = 2
+
+# XLF-Files
+[*.xlf]
+indent_style = tab
+
+# SQL-Files
+[*.sql]
+indent_style = tab
+indent_size = 2
 
-[LICENSE]
-indent_style = unset
+# .htaccess
+[{_.htaccess,.htaccess}]
+indent_style = tab

Classes/Domain/Model/ImageSource.php

@@ -6,13 +6,14 @@
 use Sitegeist\MediaComponents\Domain\Model\CropArea;
 use Sitegeist\MediaComponents\Domain\Model\SourceSet;
 use Sitegeist\MediaComponents\Interfaces\ConstructibleFromImage;
-use SMS\FluidComponents\Domain\Model\FalImage;
 use SMS\FluidComponents\Domain\Model\Image;
 use SMS\FluidComponents\Interfaces\ConstructibleFromArray;
 use SMS\FluidComponents\Interfaces\ConstructibleFromExtbaseFile;
 use SMS\FluidComponents\Interfaces\ConstructibleFromFileInterface;
 use SMS\FluidComponents\Interfaces\ConstructibleFromInteger;
 use SMS\FluidComponents\Interfaces\ConstructibleFromString;
+use SMS\FluidComponents\Interfaces\ImageWithDimensions;
+use SMS\FluidComponents\Interfaces\ProcessableImage;
 use SMS\FluidComponents\Utility\ComponentArgumentConverter;
 use TYPO3\CMS\Core\Resource\FileInterface;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -58,7 +59,7 @@ public static function fromArray(array $value): ImageSource
         $argumentConverter = GeneralUtility::makeInstance(ComponentArgumentConverter::class);
 
         try {
-            $image = $argumentConverter->convertValueToType($value['originalImage'], Image::class);
+            $image = $argumentConverter->convertValueToType($value['originalImage'] ?? $value, Image::class);
         } catch (\SMS\FluidComponents\Exception\InvalidArgumentException) {
             // TODO better error handling here:
             // Image is not required, but invalid combination of parameters should
@@ -193,11 +194,17 @@ public function getDescription(): ?string
 
     public function getHeight(): ?int
     {
+        if (!($this->getImage() instanceof ImageWithDimensions)) {
+            return null;
+        }
         return $this->getImage()->getHeight();
     }
 
     public function getWidth(): ?int
     {
+        if (!($this->getImage() instanceof ImageWithDimensions)) {
+            return null;
+        }
         return $this->getImage()->getWidth();
     }
 
@@ -246,23 +253,18 @@ protected function processImage(): void
     {
         $originalImage = $this->getOriginalImage();
 
-        if ($originalImage) {
-            $crop = null;
-            if ($this->getCrop()) {
-                $cropArea = $this->getCrop()->getArea();
-                if (!$cropArea->isEmpty()) {
-                    $crop = $cropArea->makeAbsoluteBasedOnFile($originalImage->getFile());
-                }
-            }
-
-            $processingInstructions = [
-                'width' => round($originalImage->getWidth() * $this->getScale()),
-                'height' => round($originalImage->getHeight() * $this->getScale()),
-                'fileExtension' => $this->getFormat(),
-                'crop' => $crop
-            ];
+        if (!($originalImage instanceof ImageWithDimensions) || !($originalImage instanceof ProcessableImage)) {
+            $this->image = $originalImage;
+            return;
+        }
 
-            $this->image = new FalImage($this->imageService->applyProcessingInstructions($originalImage->getFile(), $processingInstructions));
+        if ($originalImage) {
+            $this->image = $originalImage->process(
+                (int) round($originalImage->getWidth() * $this->getScale()),
+                (int) round($originalImage->getHeight() * $this->getScale()),
+                $this->getFormat(),
+                $this->getCrop()->getArea(),
+            );
         }
     }
 }

Classes/ViewHelpers/Image/CropVariantViewHelper.php

@@ -4,8 +4,9 @@
 namespace Sitegeist\MediaComponents\ViewHelpers\Image;
 
 use TYPO3\CMS\Core\Imaging\ImageManipulation\Area;
-use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3\CMS\Core\Imaging\ImageManipulation\CropVariantCollection;
+use TYPO3\CMS\Core\Resource\FileInterface;
+use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithContentArgumentAndRenderStatic;
 
 class CropVariantViewHelper extends \TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper

Classes/ViewHelpers/Image/Modify/ScaleViewHelper.php

@@ -4,6 +4,7 @@
 namespace Sitegeist\MediaComponents\ViewHelpers\Image\Modify;
 
 use Sitegeist\MediaComponents\Domain\Model\ImageSource;
+use SMS\FluidComponents\Interfaces\ImageWithDimensions;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithContentArgumentAndRenderStatic;
 
@@ -26,6 +27,10 @@ public static function renderStatic(
     ): ImageSource {
         $imageSource = $arguments['imageSource'] ?? $renderChildrenClosure();
 
+        if (!($imageSource->getOriginalImage() instanceof ImageWithDimensions)) {
+            return $imageSource;
+        }
+
         if ($arguments['height'] || $arguments['width']) {
             $heightFactor = $arguments['height'] ? $arguments['height'] / $imageSource->getOriginalImage()->getHeight() : 1;
             $widthFactor = $arguments['width'] ? $arguments['width'] / $imageSource->getOriginalImage()->getWidth() : 1;

Classes/ViewHelpers/Image/SrcsetViewHelper.php

@@ -5,6 +5,7 @@
 
 use Sitegeist\MediaComponents\Domain\Model\ImageSource;
 use Sitegeist\MediaComponents\Domain\Model\SourceSet;
+use SMS\FluidComponents\Domain\Model\PlaceholderImage;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Service\ImageService;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
@@ -44,6 +45,12 @@ public static function generateSrcsetString(ImageSource $imageSource, SourceSet
 
         foreach ($widths as $widthDescriptor => $width) {
             $localImageSource->setScale($width / $imageSource->getOriginalImage()->getWidth());
+
+            if ($localImageSource->getImage() instanceof PlaceholderImage) {
+                $output[] = $localImageSource->getImage() . ' ' . $widthDescriptor;
+                continue;
+            }
+
             $output[] = $imageService->getImageUri($localImageSource->getImage()->getFile()) . ' ' . $widthDescriptor;
         }
 

Resources/Private/Components/Image/Image.html

@@ -32,8 +32,8 @@
         <ft:img
             src="{fallbackImage.publicUrl}"
             srcset="{croppedImage -> mvh:image.srcset(srcset: srcset, base: fallbackImage)}"
-            height="{fallbackImage.height}"
-            width="{fallbackImage.width}"
+            height="{f:if(condition: fallbackImage.height, then: fallbackImage.height, else: height)}"
+            width="{f:if(condition: fallbackImage.width, then: fallbackImage.width, else: width)}"
             alt="{f:if(condition: alt, then: alt, else: fallbackImage.alternative)}"
             title="{f:if(condition: title, then: title, else: fallbackImage.title)}"
             loading="{f:if(condition: lazyload, then: 'lazy')}"

Tests/Functional/ImageComponentTest.php

@@ -39,7 +39,8 @@ public static function imageComponentTestProvider(): array
 
     #[Test]
     #[DataProvider('imageComponentTestProvider')]
-    public function imageComponentTest(string $expectedResult, string $input): void {
+    public function imageComponentTest(string $expectedResult, string $input): void
+    {
         $view = $this->getTestView($input);
         $result = $this->cleanUpTestResult($view->render());
 

Tests/Functional/PictureComponentTest.php

@@ -36,7 +36,8 @@ public static function pictureComponentTestProvider(): array
 
     #[Test]
     #[DataProvider('pictureComponentTestProvider')]
-    public function pictureComponentTest(string $expectedResult, string $input): void {
+    public function pictureComponentTest(string $expectedResult, string $input): void
+    {
         $view = $this->getTestView($input);
         $result = $this->cleanUpTestResult($view->render());
 

Tests/Functional/VideoComponentTest.php

@@ -40,7 +40,8 @@ public static function videoComponentTestProvider(): array
 
     #[Test]
     #[DataProvider('videoComponentTestProvider')]
-    public function videoComponentTestMinimal(string $expectedResult, string $input): void {
+    public function videoComponentTestMinimal(string $expectedResult, string $input): void
+    {
         $view = $this->getTestView($input);
         $result = $this->cleanUpTestResult($view->render());
 

composer.json

@@ -24,10 +24,10 @@
     },
     "require": {
         "php": "^8.2",
-        "sitegeist/fluid-components": "^3.7.0",
-        "typo3fluid/fluid": "<=2.14.1",
+        "sitegeist/fluid-components": "^3.7",
+        "typo3fluid/fluid": "^4.0",
         "sitegeist/fluid-tagbuilder": "^1",
-        "typo3/cms-core": "13.2.*"
+        "typo3/cms-core": "^13.3 || dev-master"
     },
     "require-dev": {
         "typo3/testing-framework": "^8.2",