PHPackages sitegeist/lazybones - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. sitegeist/lazybones Abandoned → [sitegeist/kaleidoscope](/?search=sitegeist%2Fkaleidoscope)Neos-package sitegeist/lazybones =================== Lazy loading for sitegeist/kaleidoscope v3.1.2(3y ago)6120.9k↓27.8%22GPL-3.0-or-later Since Feb 15Pushed 3y ago3 watchersCompare [ Source](https://github.com/sitegeist/Sitegeist.Lazybones)[ Packagist](https://packagist.org/packages/sitegeist/lazybones)[ RSS](/packages/sitegeist-lazybones/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (21)Used By (2) Sitegeist.Lazybones =================== [](#sitegeistlazybones) !!! With the general availability of loading="lazy" for images in webbrowsers this package is obsolete. Please use Sitegeist.Kaleidoscope directly !!! ------------------------------------------------------------------------------------------------------------------------------------------------------ [](#-with-the-general-availability-of-loadinglazy-for-images-in-webbrowsers-this-package-is-obsolete-please-use-sitegeistkaleidoscope-directly-) ### Responsive Images for Neos - with Atomic.Fusion & Monocle in mind [](#responsive-images-for-neos---with-atomicfusion--monocle-in-mind) This package implements Lazy Loading for Responsive Images from the [Sitegeist.Kaleidoscope](https://github.com/sitegeist/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 [](#authors--sponsors) - Martin Ficzel - *The development and the public-releases of this package is generously sponsored by our employer .* Installation ------------ [](#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 -------- [](#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 ----- [](#usage) ### LazyloadJS [](#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 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` [](#sitegeistlazybonesimage) 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: Props: - `lazy`: Enable lazy loading (boolean, defaults to `Sitegeist.Lazybones:Lazy.Enabled`) - `lazyClass`: The class to attach to the img-tags (string, defaults to `Sitegeist.Lazybones:Lazy.ClassName`) - `lazyWidth`: The width of the thumbnail-src that is loaded first (string, defaults to `Sitegeist.Lazybones:Lazy.Width`) Props from `Sitegeist.Kaleidoscope:Image`: - `imageSource`: the imageSource to render - `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) - `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` - `alt`: alt-attribute for the img tag - `title`: title attribute for the img tag - `class`: class attribute for the img tag - `renderDimensionAttributes`: render width/height attributes if data is available from the `imageSource` (boolean) ### `Sitegeist.Lazybones:Picture` [](#sitegeistlazybonespicture) 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: Props: - `lazy`: Enable lazy loading (boolean, defaults to `Sitegeist.Lazybones:Lazy.Enabled`) - `lazyClass`: The class to attach to the img-tags (string, defaults to `Sitegeist.Lazybones:Lazy.ClassName`) - `lazyWidth`: The width of the thumbnail-src that is loaded first (string, defaults to `Sitegeist.Lazybones:Lazy.Width`) Props from `Sitegeist.Kaleidoscope:Picture`: - `imageSource`: the imageSource to render - `sources`: an array of source definitions that supports the following keys - `media`: the media query of this source - `type`: the type of this source - `imageSource`: alternate image-source for art direction purpose - `srcset`: 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 the `imageSource` - `height`: (optional) the base height, will be applied to the `imageSource` - `format`: (optional) the image-format for the source like `webp` or `png`, is applied to `imageSource` and `type` - `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 the `imageSource` - `height`: (optional) the base height, will be applied to the `imageSource` - `alt`: alt-attribute for the picture tag - `title`: title attribute for the picture tag - `class`: class attribute for the picture tag - `renderDimensionAttributes`: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource ### `Sitegeist.Lazybones:Source` [](#sitegeistlazybonessource) 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 to `Sitegeist.Lazybones:Lazy.Enabled`) Props from `Sitegeist.Kaleidoscope:Source`: - `imageSource`: the imageSource to render - `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) - `media`: the media query of this source - `type`: the type of this source - `width`: (optional) the base width, will be applied to the `imageSource` - `height`: (optional) the base height, will be applied to the `imageSource` - `format`: the image-format for the source like `webp` or `png`, is applied to `imageSource` and `type` ### `Sitegeist.Lazybones:Lazy.Enabled` [](#sitegeistlazyboneslazyenabled) 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` [](#sitegeistlazyboneslazyclassname) 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` [](#sitegeistlazyboneslazywidth) 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 --------------------------------------------- [](#dynamically-enabledisable-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 ------------ [](#contribution) We will gladly accept contributions. Please send us pull requests. ### Health Score 39 — LowBetter than 86% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity36 Limited adoption so far Community17 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 97.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~108 days Recently: every ~157 days Total 13 Last Release 1350d ago Major Versions v1.0.1 → v2.0.02019-09-12 v2.1.0 → v3.0.02020-10-26 v2.1.1 → v3.0.12020-12-16 ### Community Maintainers ![](https://www.gravatar.com/avatar/1159e78bff9c03cc5ed626447ca5072097107f58af459a9b8bac8d933ba8298c?d=identicon)[wilhelm.behncke](/maintainers/wilhelm.behncke) ![](https://www.gravatar.com/avatar/829b4ccb51e8cff3c1e4b59d60cfe8d1b86f6d77fc31a6b3fc99227f432542ca?d=identicon)[mficzel](/maintainers/mficzel) --- Top Contributors [![mficzel](https://avatars.githubusercontent.com/u/1309380?v=4)](https://github.com/mficzel "mficzel (37 commits)")[![rolandschuetz](https://avatars.githubusercontent.com/u/735982?v=4)](https://github.com/rolandschuetz "rolandschuetz (1 commits)") --- Tags imageslazy-loadingneoscms ### Embed Badge ![Health badge](/badges/sitegeist-lazybones/health.svg) ``` [![Health](https://phpackages.com/badges/sitegeist-lazybones/health.svg)](https://phpackages.com/packages/sitegeist-lazybones) ``` ### Alternatives [neos/neos An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users. 116989.0k674](/packages/neos-neos)[sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[neos/fusion-form Fusion Form 19724.3k31](/packages/neos-fusion-form)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[neos/googleanalytics Google Analytics integration for Neos CMS 15125.7k](/packages/neos-googleanalytics)[sandstorm/neostwofactorauthentication 1223.6k](/packages/sandstorm-neostwofactorauthentication) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)