sitegeist / lazybones
Lazy loading for sitegeist/kaleidoscope
Installs: 104 237
Dependents: 2
Suggesters: 0
Security: 0
Stars: 6
Watchers: 5
Forks: 2
Open Issues: 0
Type:neos-package
Requires
- neos/fusion-afx: ^1.2 || ^7.0 || ^8.0 || dev-master
- sitegeist/kaleidoscope: ^6.1 || dev-master
- dev-master
- v3.1.2
- v3.1.1
- v3.1.0
- v3.0.2
- v3.0.1
- v3.0.0
- 2.x-dev
- v2.1.1
- v2.1.0
- v2.0.1
- v2.0.0
- v1.0.1
- v1.0.0
- dev-bugfix/applyWidthAnHeightAlsoWhenFormatsOptionIsUsed
- dev-feature/controlLazynessViaSetting
- dev-feature/supportAltAndTitleFromImageSources
- dev-bugfix/emptyAltTagByDefault
- dev-task/alwaysRenderSizesInSource
- dev-feature/supportFormatInLazybones
- dev-bugfix/preserveAspectRatioForLazyImages
This package is auto-updated.
Last update: 2022-09-07 09:05:42 UTC
README
!!! With the general availability of loading="lazy" for images in webbrowsers this package is obsolete. Please use Sitegeist.Kaleidoscope directly !!!
Responsive Images for Neos - with Atomic.Fusion & Monocle in mind
This package implements Lazy Loading for Responsive Images from the Sitegeist.Kaleidoscope package.
This is implemented by rendering the src
, srcset
and sizes
attributes as data-src
, data-srcset
and data-sizes
. The img- or pPicture-tag is then marked with the class lazyload
to
be replaced via js once the image comes into view. If you like you can render a very lowres
src-attribute or leave the src attribute empty (default).
Authors & Sponsors
- Martin Ficzel - ficzel@sitegeist.de
The development and the public-releases of this package is generously sponsored by our employer http://www.sitegeist.de.
Installation
Sitegeist.Lazybones is available via packagist run composer require sitegeist/lazybones
.
We use semantic-versioning so every breaking change will increase the major-version number.
Settings
The default-lazyness is controlled by the setting 'Sitegeist.Lazybones.default.lazyEnabled'
and is active by default except in FLOW_CONTEXT=Development/VisualRegressionTesting
.
Sitegeist:
Lazybones:
default:
lazyEnabled: true
Usage
LazyloadJS
To enable lazy loading you have to integrate a script that will detect the lazyload
class
and convert data-src
, data-srcset
and data-sizes
to the correct attributes once they come
into view.
This package includes the lazysizes
library from https://github.com/aFarkas/lazysizes
but it is probably better to include the js into your own fe-build.
To include the bundled js you can use the following snippet:
lazyloadJS = Neos.Fusion:Tag {
tagName = 'script'
attributes.async = true
attributes.src = Neos.Fusion:ResourceUri {
path = 'resource://Sitegeist.Lazybones/Public/JavaScript/lazysizes.min.js'
}
}
Sitegeist.Lazybones:Image
Render an img-tag with optional srcset based on sizes or resolutions.
This prototype is a drop in replacement for Sitegeist.Kaleidoscope:Image
with
optional props to control the lazy loading.
See: https://github.com/sitegeist/Sitegeist.Kaleidoscope#sitegeistkaleidoscopeimage
Props:
lazy
: Enable lazy loading (boolean, defaults toSitegeist.Lazybones:Lazy.Enabled
)lazyClass
: The class to attach to the img-tags (string, defaults toSitegeist.Lazybones:Lazy.ClassName
)lazyWidth
: The width of the thumbnail-src that is loaded first (string, defaults toSitegeist.Lazybones:Lazy.Width
)
Props from Sitegeist.Kaleidoscope:Image
:
imageSource
: the imageSource to rendersrcset
: media descriptors like '1.5x' or '600w' of the default image (string or array)sizes
: sizes attribute of the default image (string or array)format
: (optional) the image-format likewebp
orpng
, will be applied to theimageSource
width
: (optional) the base width, will be applied to theimageSource
height
: (optional) the base height, will be applied to theimageSource
alt
: alt-attribute for the img tagtitle
: title attribute for the img tagclass
: class attribute for the img tagrenderDimensionAttributes
: render width/height attributes if data is available from theimageSource
(boolean)
Sitegeist.Lazybones:Picture
Render a picture-tag with various sources.
This prototype is a drop in replacement for Sitegeist.Kaleidoscope:Picture
with
optional props to control the lazy loading.
See: https://github.com/sitegeist/Sitegeist.Kaleidoscope#sitegeistkaleidoscopepicture
Props:
lazy
: Enable lazy loading (boolean, defaults toSitegeist.Lazybones:Lazy.Enabled
)lazyClass
: The class to attach to the img-tags (string, defaults toSitegeist.Lazybones:Lazy.ClassName
)lazyWidth
: The width of the thumbnail-src that is loaded first (string, defaults toSitegeist.Lazybones:Lazy.Width
)
Props from Sitegeist.Kaleidoscope:Picture
:
imageSource
: the imageSource to rendersources
: an array of source definitions that supports the following keysmedia
: the media query of this sourcetype
: the type of this sourceimageSource
: alternate image-source for art direction purposesrcset
: media descriptors like '1.5x' or '600w' (string or array)sizes
: sizes attribute (string or array)width
: (optional) the base width, will be applied to theimageSource
height
: (optional) the base height, will be applied to theimageSource
format
: (optional) the image-format for the source likewebp
orpng
, is applied toimageSource
andtype
srcset
: media descriptors like '1.5x' or '600w' of the default image (string or array)sizes
: sizes attribute of the default image (string or array)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 theimageSource
height
: (optional) the base height, will be applied to theimageSource
alt
: alt-attribute for the picture tagtitle
: title attribute for the picture tagclass
: class attribute for the picture tagrenderDimensionAttributes
: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource
Sitegeist.Lazybones:Source
Render a source-tag with optional srcset based on sizes or resolutions.
This prototype is a drop in replacement for Sitegeist.Kaleidoscope:Source
with
optional props to control the lazy loading.
Props:
lazy
: Enable lazy loading (boolean, defaults toSitegeist.Lazybones:Lazy.Enabled
)
Props from Sitegeist.Kaleidoscope:Source
:
imageSource
: the imageSource to rendersrcset
: media descriptors like '1.5x' or '600w' of the default image (string or array)sizes
: sizes attribute of the default image (string or array)media
: the media query of this sourcetype
: the type of this sourcewidth
: (optional) the base width, will be applied to theimageSource
height
: (optional) the base height, will be applied to theimageSource
format
: the image-format for the source likewebp
orpng
, is applied toimageSource
andtype
Sitegeist.Lazybones:Lazy.Enabled
Boolean value prototype with default value true
that defines whether lazyness is enabled or not.
Override the value
of this prototype globally or for specific parts of your fusion.
NOTE: The default value comes from the configuration 'Sitegeist.Lazybones.default.lazyEnabled' and is active by default
except in FLOW_CONTEXT=Development/VisualRegressionTesting
.
Sitegeist.Lazybones:Lazy.ClassName
String value prototype with default value lazyload
to define the class that marks lazyloaded images.
Override the value
of this prototype globally or for specific parts of your fusion.
Sitegeist.Lazybones:Lazy.Width
Integer value prototype with default value null
to define the size of lowres images that are loaded as
placeholders. Override zhe value
of this prototype globally or for specific parts of your fusion.
Dynamically enable/disable the lazy rendering
To optimize the intial load time lazy loading should be disabled for the first contents but be enabled for others. This can be implemented by enabeling the lazy
in the ContentCase
prototype depending on wether or not the curent node
is the first content in the main collection.
content = Neos.Neos:ContentCollection {
nodePath = 'main'
content.iterationName = 'mainContentIterator'
// enable lazynes for all but first content
prototype(Sitegeist.Lazybones:Lazy.Enabled) {
value = ${!mainContentIterator.isFirst}
}
}
Contribution
We will gladly accept contributions. Please send us pull requests.