FEATURE: Add preserveAspect property

Classes/Domain/AbstractImageSource.php

@@ -81,12 +81,12 @@ public function __construct(?string $title = null, ?string $alt = null)
     /**
      * @deprecated
      */
-    public function setWidth(int $targetWidth, bool $preserveAspect = false): ImageSourceInterface
+    public function setWidth(int $targetWidth): ImageSourceInterface
     {
-        return $this->withWidth($targetWidth, $preserveAspect);
+        return $this->withWidth($targetWidth);
     }
 
-    public function withWidth(int $targetWidth, bool $preserveAspect = false): ImageSourceInterface
+    public function withWidth(int $targetWidth): ImageSourceInterface
     {
         $newSource = clone $this;
         $newSource->targetWidth = $targetWidth;
@@ -97,12 +97,12 @@ public function withWidth(int $targetWidth, bool $preserveAspect = false): Image
     /**
      * @deprecated
      */
-    public function setHeight(int $targetHeight, bool $preserveAspect = false): ImageSourceInterface
+    public function setHeight(int $targetHeight): ImageSourceInterface
     {
-        return $this->withHeight($targetHeight, $preserveAspect);
+        return $this->withHeight($targetHeight);
     }
 
-    public function withHeight(int $targetHeight, bool $preserveAspect = false): ImageSourceInterface
+    public function withHeight(int $targetHeight): ImageSourceInterface
     {
         $newSource = clone $this;
         $newSource->targetHeight = $targetHeight;

Classes/Domain/AbstractScalableImageSource.php

@@ -36,44 +36,38 @@ abstract class AbstractScalableImageSource extends AbstractImageSource implement
 
     /**
      * @param int|null $targetWidth
-     * @param bool     $preserveAspect
      *
      * @return ImageSourceInterface
      */
-    public function withWidth(int $targetWidth = null, bool $preserveAspect = false): ImageSourceInterface
+    public function withWidth(int $targetWidth = null): ImageSourceInterface
     {
         $newSource = clone $this;
         $newSource->targetWidth = $targetWidth;
-        if ($preserveAspect === true) {
-            if ($this->targetWidth && $this->targetHeight) {
-                $aspect = $this->targetWidth / $this->targetHeight;
-            } else {
-                $aspect = $this->baseWidth / $this->baseHeight;
-            }
-            $newSource->targetHeight = (int) round($targetWidth / $aspect);
+        if ($this->targetWidth && $this->targetHeight) {
+            $aspect = $this->targetWidth / $this->targetHeight;
+        } else {
+            $aspect = $this->baseWidth / $this->baseHeight;
         }
+        $newSource->targetHeight = (int) round($targetWidth / $aspect);
 
         return $newSource;
     }
 
     /**
      * @param int|null $targetHeight
-     * @param bool     $preserveAspect
      *
      * @return ImageSourceInterface
      */
-    public function withHeight(int $targetHeight = null, bool $preserveAspect = false): ImageSourceInterface
+    public function withHeight(int $targetHeight = null): ImageSourceInterface
     {
         $newSource = clone $this;
         $newSource->targetHeight = $targetHeight;
-        if ($preserveAspect === true) {
-            if ($this->targetWidth && $this->targetHeight) {
-                $aspect = $this->targetWidth / $this->targetHeight;
-            } else {
-                $aspect = $this->baseWidth / $this->baseHeight;
-            }
-            $newSource->targetWidth = (int) round($targetHeight * $aspect);
+        if ($this->targetWidth && $this->targetHeight) {
+            $aspect = $this->targetWidth / $this->targetHeight;
+        } else {
+            $aspect = $this->baseWidth / $this->baseHeight;
         }
+        $newSource->targetWidth = (int) round($targetHeight * $aspect);
 
         return $newSource;
     }

Classes/Domain/ImageSourceInterface.php

@@ -15,9 +15,9 @@ public function withDimensions(int $targetWidth, int $targetHeight): ImageSource
 
     public function withFormat(string $format): ImageSourceInterface;
 
-    public function withWidth(int $targetWidth, bool $preserveAspect = false): ImageSourceInterface;
+    public function withWidth(int $targetWidth): ImageSourceInterface;
 
-    public function withHeight(int $targetHeight, bool $preserveAspect = false): ImageSourceInterface;
+    public function withHeight(int $targetHeight): ImageSourceInterface;
 
     public function withQuality(int $targetQuality): ImageSourceInterface;
 

Classes/EelHelpers/ImageSourceHelperInterface.php

@@ -16,12 +16,12 @@ interface ImageSourceHelperInterface
     /**
      * @deprecated use withWidth
      */
-    public function setWidth(int $width, bool $preserveAspect = false): ImageSourceInterface;
+    public function setWidth(int $width): ImageSourceInterface;
 
     /**
      * @deprecated use withHeight
      */
-    public function setHeight(int $height, bool $preserveAspect = false): ImageSourceInterface;
+    public function setHeight(int $height): ImageSourceInterface;
 
     /**
      * @deprecated use withDimension

README.md

@@ -20,7 +20,7 @@ renderer = afx`
 `
 ```
 
-By separating the aspects of image-definition, size-constraining and  rendering
+By separating the aspects of image-definition, size-constraining and rendering
 we enable the separation of those aspects into different fusion-components.
 
 We want to help implementing responsive-images in the context of atomic-fusion
@@ -241,7 +241,7 @@ prototype (Vendor.Site:Component.ResponsiveKevisualImage) < prototype(Neos.Fusio
     # Enforce the dimensions of the passed images by cropping to 1600 x 800
     #
     imageSource = null
-    imageSource.@process.enforeDimensions = ${value ? value.withWidth(1600).withHeight(900) : null}
+    imageSource.@process.enforceDimensions = ${value ? value.withDimensions(1600,900) : null}
 
     renderer = afx`
         <Sitegeist.Kaleidoscope:Image imageSource={props.imageSource} srcset="1x, 1.5x, 2x" />
@@ -274,7 +274,7 @@ variants are needed. This frontend know-how is now encapsulated into the present
 
 To optimize the initial load time lazy loading should be disabled for the first contents but be
 enabled for others. This can be implemented by enabling the `lazy`ness in the ContentCase prototype
-depending on whether or not the current node is the first content in the main collection.
+depending on whether the current node is the first content in the main collection.
 
 ```
 renderer = Neos.Neos:ContentCollection {
@@ -297,10 +297,10 @@ renderer = Neos.Neos:ContentCollection {
 
 The package contains ImageSource-FusionObjects that encapsulate the intention to
 render an image. ImageSource-Objects return Eel-Helpers that allow to
-enforcing the rendered dimensions later in the rendering process.
+enforce the rendered dimensions later in the rendering process.
 
 Note: The settings for `width`, `height`, `thumbnailPreset` and `variantPreset` can be defined
-via fusion but can also applied to the returned object which will override the fusion-settings.
+via fusion but can also apply to the returned object which will override the fusion-settings.
 
 ### `Sitegeist.Kaleidoscope:AssetImageSource`
 
@@ -354,9 +354,9 @@ dimensions and to render the `src` and `srcset`-attributes.
 
 Methods of ImageSource-Helpers that are accessible via Eel:
 
-- `withWidth( integer $width, bool $preserveAspect = false )`: Set the intend width modify height as well if
-- `withHeight( integer $height, bool $preserveAspect = false )`: Set the intended height
-- `withDimensions( integer, interger)`: Set the intended width and height
+- `withWidth( integer $width )`: Set the intended width & modify height to preserve the aspect ratio
+- `withHeight( integer $height )`: Set the intended height & modify width to preserve the aspect ratio
+- `withDimensions( integer $width, interger $height )`: Set the intended width and height
 - `withThumbnailPreset( string )`: Set width and/or height via named thumbnail preset from Settings `Neos.Media.thumbnailPresets`
 - `withVariantPreset( string, string )`: Select image variant via the named variant preset (parameters are "preset identifier" key and "preset variant name" key from Settings `Neos.Media.variantPresets`)
 - `withFormat( string )`: Set the image format to generate like  `webp`, `png` or `jpeg`
@@ -375,8 +375,8 @@ deprecated methods:
 
 - `applyThumbnailPreset( string )`: Set width and/or height via named thumbnail preset from Settings `Neos.Media.thumbnailPresets`
 - `useVariantPreset( string, string )`: Select image variant via the named variant preset (parameters are "preset identifier" key and "preset variant name" key from Settings `Neos.Media.variantPresets`)
-- `setWidth( integer $width, bool $preserveAspect = false )`: Set the intend width modify height as well if
-- `setHeight( integer $height, bool $preserveAspect = false )`: Set the intended height
+- `setWidth( integer $width )`: Set the intended width
+- `setHeight( integer $height )`: Set the intended height
 - `setDimensions( integer, interger)`: Set the intended width and height
 - `setFormat( string )`: Set the image format to generate like  `webp`, `png` or `jpeg`
 - `setQuality( integer )`: Set the image quality from 0 to 100

Resources/Private/Fusion/Prototypes/Image.fusion

@@ -134,8 +134,9 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
 
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        [email protected] = ${props.width ? value.withWidth(props.width) : value}
-        [email protected] = ${props.height ? value.withHeight(props.height) : value}
+        [email protected] = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        [email protected] = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        [email protected] = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
         [email protected] = ${props.format ? value.withFormat(props.format) : value}
         [email protected] = ${props.quality ? value.withQuality(props.quality) : value}
 

Resources/Private/Fusion/Prototypes/Picture.fusion

@@ -85,9 +85,10 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
 
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        [email protected] = ${props.width ? value.setWidth(props.width) : value}
-        [email protected] = ${props.height ? value.setHeight(props.height) : value}
-        [email protected] = ${props.format ? value.setFormat(props.format) : value}
+        [email protected] = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        [email protected] = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        [email protected] = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
+        [email protected] = ${props.format ? value.withFormat(props.format) : value}
         [email protected] = ${props.quality ? value.setQuality(props.quality) : value}
 
         srcset = ${props.srcset}

Resources/Private/Fusion/Prototypes/Source.fusion

@@ -31,8 +31,9 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
         isScalableSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
         imageSource = ${imageSource}
-        [email protected] = ${width ? value.withWidth(width) : value}
-        [email protected] = ${height ? value.withHeight(height) : value}
+        [email protected] = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        [email protected] = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        [email protected] = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
         [email protected] = ${format ? value.withFormat(format) : value}
         [email protected] = ${quality ? value.withQuality(quality) : value}