Merge pull request #62 from manuelmeister/feature/non-scalable

FEATURE: Omit srcset and sizes if imageSource is non-scalable
sitegeist · Aug 29, 2023 · cb267d9 · cb267d9
2 parents dab3160 + 95244e5
commit cb267d9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -96,6 +96,16 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
                 srcset = '320w, 400ww, 600w, 800w, 1000w, 1200w, 1600'
                 sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'
             }
+
+            nonScalabelSource {
+                imageSource = Sitegeist.Kaleidoscope:UriImageSource {
+                    uri = "https://dummyimage.com/600x400/000/fff"
+                    alt = 'Alternate assigned to source'
+                    title = 'Title assigned to source'
+                }
+                srcset = '320w, 400ww, 600w, 800w, 1000w, 1200w, 1600'
+                sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'
+            }
         }
     }
 
@@ -119,6 +129,7 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
 
     renderer = Neos.Fusion:Component {
         @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
@@ -139,8 +150,9 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
             <img
                 src={props.imageSource.src()}
                 srcset={props.imageSource.srcset(props.srcset)}
-                srcset.@if.has={props.srcset}
+                srcset.@if.isScalable={props.isScalableSource && props.srcset}
                 sizes={props.sizes}
+                [email protected]={props.isScalableSource && props.sizes}
                 [email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
                 loading={props.loading}
                 class={props.class}

diff --git a/Resources/Private/Fusion/Prototypes/Source.fusion b/Resources/Private/Fusion/Prototypes/Source.fusion
@@ -26,6 +26,7 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
         }
 
         @if.hasImageSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        isScalableSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
         imageSource = ${imageSource}
         [email protected] = ${width ? value.withWidth(width) : value}
@@ -41,8 +42,9 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
         renderer = afx`
             <source @if.has={props.imageSource}
                 srcset={props.imageSource.srcset(props.srcset)}
-                srcset.@if.has={props.srcset}
+                srcset.@if.isScalable={props.srcset && props.isScalableSource}
                 sizes={props.sizes}
+                [email protected]={props.sizes && props.isScalableSource}
                 [email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
                 type={props.type}
                 media={props.media}