Skip to content

Commit

Permalink
FEATURE: Omit srcset and sizes if imageSource is non-scalable
Browse files Browse the repository at this point in the history
  • Loading branch information
manuelmeister authored and mficzel committed Aug 29, 2023
1 parent dab3160 commit 95244e5
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
14 changes: 13 additions & 1 deletion Resources/Private/Fusion/Prototypes/Image.fusion
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
}
}

Expand All @@ -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}
Expand All @@ -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}
Expand Down
4 changes: 3 additions & 1 deletion Resources/Private/Fusion/Prototypes/Source.fusion
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down

0 comments on commit 95244e5

Please sign in to comment.