PHPackages                             lekoala/silverstripe-lazysizes - 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. [Utility & Helpers](/categories/utility)
4. /
5. lekoala/silverstripe-lazysizes

AbandonedArchivedSilverstripe-module[Utility & Helpers](/categories/utility)

lekoala/silverstripe-lazysizes
==============================

Adds lazysizes in the SilverStripe CMS

161365PHP

Since Sep 2Pushed 4y ago4 watchersCompare

[ Source](https://github.com/lekoala/silverstripe-lazysizes)[ Packagist](https://packagist.org/packages/lekoala/silverstripe-lazysizes)[ RSS](/packages/lekoala-silverstripe-lazysizes/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Silverstripe Lazysizes module
=============================

[](#silverstripe-lazysizes-module)

Integrate  and to Silverstripe.

Code heavily inspired by

All-in-one solution for:

- Lazy loading images
- Responsive images
- Placeholder images (using placehold.it)

Respimages is only loaded if the browser does not support native syntax.

Plugins
=======

[](#plugins)

This modules has already pre built plugins into a consolidated js file.

Plugins available by default are:

Lasysizes:

- unveilhooks
- print
- bgset
- include

Respimages:

- oldie
- intrinsic
- mutation

You can also define your own path to the libraries by adjusting the following path

```
LazySizesImageExtension:
	js_path: 'lazysizes/javascript'

```

LazyLoading
===========

[](#lazyloading)

If you simply want to lazy load your image, you can use any of three default methods which specify no additional sizes.

Example:

```
$Image.Lazy(720x250)
$Image.LazyCrop(720x250)
$Image.LazyCropFocus(720x250)

```

Responsive sets
===============

[](#responsive-sets)

You can define your own responsive sets. You can see the bundled configuration for the ResponsiveDefault set which set 4 breakpoints. You can define your own sets, change sizes, method and default size to be used.

All sets use lazysizes data-sizes="auto" by default, meaning that the width of the parent is used to determine which size needs to be loaded.

Retina is also supported.

Config example:

```
LazySizesImageExtension:
	ResponsiveDefault:
		sizes: [320x213 320w,640x426 640w,960x639 960w,1280x852 1280w]
	ResponsiveDefaultSquare:
		sizes: [320x320 320w,640x640 640w,960x960 960w,1280x1280 1280w]
	ResponsiveDefaultRetina:
		sizes: [400x300 1x, 800x600 2x]

```

Usage example in template:

```
$Image.ResponsiveDefault

```

Using placeholders
==================

[](#using-placeholders)

The controller extension provides a helper method to easily create placeholders using PlaceholdIt. You can define a base size and a src set.

Example:

```
$PlaceholdIt(175x75,'200x100,500x300,800x400')

```

SrcSet
======

[](#srcset)

Sometimes, you just need to output a list of srcset paths (for instance, to define a bgset). The last element of the set is never resized (always using the original image at maximum size). You can prevent this from happening by setting the second argument to false.

Example:

```

```

Compatibility
=============

[](#compatibility)

Tested with 3.1

Installation
============

[](#installation)

composer require lekoala/silverstripe-lazysizes

Maintainer
==========

[](#maintainer)

LeKoala -

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity28

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/250762?v=4)[Thomas Portelange](/maintainers/lekoala)[@lekoala](https://github.com/lekoala)

---

Top Contributors

[![lekoala](https://avatars.githubusercontent.com/u/250762?v=4)](https://github.com/lekoala "lekoala (12 commits)")

### Embed Badge

![Health badge](/badges/lekoala-silverstripe-lazysizes/health.svg)

```
[![Health](https://phpackages.com/badges/lekoala-silverstripe-lazysizes/health.svg)](https://phpackages.com/packages/lekoala-silverstripe-lazysizes)
```

###  Alternatives

[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[cloudstudio/resource-generator

Resource Generator for Laravel Nova

106136.1k1](/packages/cloudstudio-resource-generator)[mervick/material-design-icons

Google Material Design Icons For Using With Bootstrap

10191.4k7](/packages/mervick-material-design-icons)[midnite81/geolocation

A laravel package which wraps the IP Info DB and IP2Location Services

3624.1k](/packages/midnite81-geolocation)[dereuromark/cakephp-tags

Tags plugin for CakePHP

1660.2k1](/packages/dereuromark-cakephp-tags)[nlac/nlsclientscript

Yii ClientScript extension for prevent reloading javascript and merging/minfying resources

208.2k](/packages/nlac-nlsclientscript)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)