✨ Add srcset for persistent images

jonnitto · Apr 4, 2020 · 5d3fd1c · 5d3fd1c
1 parent 0beb6fe
commit 5d3fd1c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/Resources/Private/Fusion/Component/Vimeo.fusion b/Resources/Private/Fusion/Component/Vimeo.fusion
@@ -34,6 +34,7 @@ prototype(Jonnitto.PrettyEmbedVimeo:Component.Vimeo) < prototype(Neos.Fusion:Com
     id = null
 
     poster = null
+    poster2x = null
     alternativeText = null
 
     playButton = Jonnitto.PrettyEmbedHelper:Button.Play
@@ -83,7 +84,7 @@ prototype(Jonnitto.PrettyEmbedVimeo:Component.Vimeo) < prototype(Neos.Fusion:Com
         }
         content = afx`
             {props.playButton}
-            <img alt={props.alternativeText} src={props.thumbnail} loading='lazy' />
+            <img alt={props.alternativeText} src={props.thumbnail} srcset={props.poster && props.poster2x ? props.poster + ' 1x,' + props.poster2x + ' 2x' : null} loading='lazy' />
         `
 
         @process.wrapper = Jonnitto.PrettyEmbedHelper:Wrapper {

diff --git a/Resources/Private/Fusion/Content/Vimeo.fusion b/Resources/Private/Fusion/Content/Vimeo.fusion
@@ -9,6 +9,7 @@ prototype(Jonnitto.PrettyEmbedVimeo:Content.Vimeo) < prototype(Jonnitto.PrettyEm
     imageFromVimeo = ${q(node).property('metadataImage')}
     ratio = ${q(node).property('metadataRatio')}
     maximumWidth = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.maximumWidth')}
+    async = true
 
     force16to9 = Jonnitto.PrettyEmbedHelper:GetProperty {
         property = 'force16to9'
@@ -44,11 +45,11 @@ prototype(Jonnitto.PrettyEmbedVimeo:Content.Vimeo) < prototype(Jonnitto.PrettyEm
     renderer = Neos.Fusion:Component {
         @apply.props = ${props}
         poster = Neos.Fusion:Case {
-            hasCustomImage {
+            hasPersisantResource {
                 condition = ${props.image}
                 renderer = Neos.Neos:ImageUri {
                     asset = ${props.image}
-                    async = true
+                    async = ${props.async}
                     maximumWidth = ${props.maximumWidth}
                 }
             }
@@ -57,6 +58,15 @@ prototype(Jonnitto.PrettyEmbedVimeo:Content.Vimeo) < prototype(Jonnitto.PrettyEm
                 renderer = ${props.imageFromVimeo || Jonnitto.PrettyEmbedHelper.vimeoThumbnail(props.videoID)}
             }
         }
+        poster2x = Neos.Neos:ImageUri {
+            @if {
+                hasAsset = ${this.asset}
+                hasEnoughPixel = ${this.asset.width >= props.maximumWidth * 2}
+            }
+            asset = ${props.image}
+            async = ${props.async}
+            maximumWidth = ${props.maximumWidth * 2}
+        }
         renderer = Neos.Fusion:Case {
             noVideoID {
                 condition = ${!props.videoID}