Merge pull request #48 from sitegeist/feature/lazyDefault

TASK: Enable lazy loading by default

.github/workflows/build.yml

@@ -13,8 +13,17 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                php-versions: ['7.3', '7.4']
-                neos-versions: ['5.3', '7.0', '7.1']
+                php-versions: ['7.4', '8.0']
+                neos-versions: ['7.3']
+                include:
+                  - php-versions: '7.3'
+                    neos-versions: '5.3'
+                  - php-versions: '7.3'
+                    neos-versions: '7.0'
+                  - php-versions: '7.3'
+                    neos-versions: '7.1'
+                  - php-versions: '7.3'
+                    neos-versions: '7.2'
 
         runs-on: ubuntu-latest
 

Classes/Controller/DummyImageController.php

@@ -48,7 +48,7 @@ class DummyImageController extends ActionController
     /**
      * @Flow\InjectConfiguration
      *
-     * @var array
+     * @var mixed[]
      */
     protected $settings;
 
@@ -57,7 +57,7 @@ class DummyImageController extends ActionController
      * with a static Imagick instance,
      * because Vips does not yet support draw
      */
-    public function initializeObject()
+    public function initializeObject(): void
     {
         if (isset($this->settings['dummyImage']['overrideImagineDriver']) && $this->settings['dummyImage']['overrideImagineDriver'] !== false) {
             $className = 'Imagine\\'.$this->settings['dummyImage']['overrideImagineDriver'].'\\Imagine';

README.md

@@ -84,7 +84,7 @@ Props:
 - `imageSource`: the imageSource to render
 - `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
 - `sizes`: sizes attribute of the default image (string ot array)
-- `loading`: (optional) loading attribute for the img tag 
+- `loading`: (optional, default "lazy") loading attribute for the img tag 
 - `format`: (optional) the image-format like `webp` or `png`, will be applied to the `imageSource`
 - `width`: (optional) the base width, will be applied to the `imageSource`    
 - `height`: (optional) the base height, will be applied to the `imageSource`    
@@ -140,7 +140,7 @@ Props:
 - `formats`: (optional) image formats that will be rendered as sources of separate type (string or array)
 - `width`: (optional) the base width, will be applied to the `imageSource`
 - `height`: (optional) the base height, will be applied to the `imageSource`   
-- `loading`: (optional) loading attribute for the img tag 
+- `loading`: (optional, default "lazy") loading attribute for the img tag 
 - `alt`: alt-attribute for the img tag
 - `title`: title attribute for the img tag
 - `class`: class attribute for the picture tag
@@ -249,6 +249,8 @@ prototype (Vendor.Site:Content.ResponsiveKevisual) < prototype(Neos.Neos:Content
     renderer = Vendor.Site:Component.ResponsiveKevisualImage {
         imageSource = Sitegeist.Kaleidoscope:AssetImageSource {
             asset = ${q(node).property('image')}
+            title = ${q(node).property('title')}
+            alt = ${q(node).property('alternativeText')}
         }
     }
 }
@@ -257,6 +259,29 @@ prototype (Vendor.Site:Content.ResponsiveKevisual) < prototype(Neos.Neos:Content
 This shows that integration-code dos not need to know the required image dimensions or wich
 variants are needed. This frontend know-how is now encapsulated into the presentational-component.
 
+## Dynamically enable/disable the lazy rendering
+
+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.
+
+```
+renderer = Neos.Neos:ContentCollection {
+    nodePath = 'main'
+
+    // configure seperate iterator for main content 
+    content.iterationName = 'mainContentIterator'
+
+    // enable lazynes for first items
+    prototype(Sitegeist.Kaleidoscope:Image) {
+        loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy'}
+    }
+    prototype(Sitegeist.Kaleidoscope:Picture) {
+        loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy'}
+    }
+}
+```
+
 ## ImageSource FusionObjects
 
 The package contains ImageSource-FusionObjects that encapsulate the intention to
@@ -284,6 +309,9 @@ Arguments:
 - `async`: Defer image-rendering until the image is actually requested by the browser (default true)
 - `thumbnailPreset`: `width` and `height` are supported as explained above
 - `variantPreset`: as explained above
+- `format`: Set the image output format, like webp (default null)
+- `alt`: The alt attribute if not specified otherwise (default null)
+- `title`: The title attribute if not specified otherwise (default null)
 
 ### `Sitegeist.Kaleidoscope:DummyImageSource`
 
@@ -298,15 +326,16 @@ Arguments:
 - `text`: The text that is rendered on the image (default = null, show size)
 - `thumbnailPreset`: `width` and `height` are supported as explained above
 - `variantPreset`: as explained above
-
+- `alt`: The alt attribute if not specified otherwise (default null)
+- `title`: The title attribute if not specified otherwise (default null)
 
 ### `Sitegeist.Kaleidoscope:UriImageSource`
 
 Arguments:
 - `uri`: The uri that will be rendered
-- !!! `thumbnailPreset`: `width` and `height` have no effect on this ImageSource
-- !!! `variantPreset`: has no effect on this ImageSource
-
+- `alt`: The alt attribute if not specified otherwise (default null)
+- `title`: The title attribute if not specified otherwise (default null)
+- 
 ### `Sitegeist.Kaleidoscope:ResourceImageSource`
 
 Arguments:

Resources/Private/Fusion/Prototypes/Image.fusion

@@ -72,7 +72,7 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
     alt = null
     title = null
     class = null
-    loading = null
+    loading = 'lazy'
     width = null
     height = null
     format = null

Resources/Private/Fusion/Prototypes/Picture.fusion

@@ -32,7 +32,7 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
     imageSource = null
     srcset = null
     sizes = null
-    loading = null
+    loading = 'lazy'
     sources = null
     formats = null
     width = null