PHPackages                             evanshunt/lazy-focus-fit - 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. [Templating & Views](/categories/templating)
4. /
5. evanshunt/lazy-focus-fit

ActiveSilverstripe-vendormodule[Templating & Views](/categories/templating)

evanshunt/lazy-focus-fit
========================

Template methods to quickly make use of FocusPoint, LazySizes, and Object-fit

v2.0.0(1y ago)92.7k↓50%2MITPHP

Since Sep 3Pushed 1y ago3 watchersCompare

[ Source](https://github.com/evanshunt/LazyFocusFit)[ Packagist](https://packagist.org/packages/evanshunt/lazy-focus-fit)[ RSS](/packages/evanshunt-lazy-focus-fit/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (14)Used By (0)

LazyFocusFit
============

[](#lazyfocusfit)

A SilverStripe module with template methods to quickly make use of [FocusPoint](https://github.com/jonom/silverstripe-focuspoint), [LazySizes](https://github.com/aFarkas/lazysizes) and [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).

Requirements
------------

[](#requirements)

**PHP**

- [FocusPoint](https://github.com/jonom/silverstripe-focuspoint)
- [Silverstripe Webp Formatter](https://github.com/bigfork/silverstripe-webp-formatter)

**JS/CSS**

- [LazySizes](https://github.com/aFarkas/lazysizes)
- [LazySizes bgset extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset)
- [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) compatible browser, OR
- [objectFitPolyfill](https://github.com/constancecchen/object-fit-polyfill)

Installation
------------

[](#installation)

`composer require evanshunt/lazy-focus-fit`

After installing this module, ensure front-end requirements are installed and properly initiated within your project.

```
import 'lazysizes';
// The bgSet plugin is required for ResponsiveBgAttributes
import 'lazysizes/plugins/bgset/ls.bgset';
```

Config values
-------------

[](#config-values)

If you wish to serve all images as WebP set the following in your yaml config.

```
SilverStripe\Assets\Image:
  default_webp: true
```

Usage
-----

[](#usage)

This module adds 3 primary methods to SilverStripe `Image` objects, to allow quick creation of responsive image markup eather as `` or `` tags or attributes which can be applied to any element for use as a background image.

Additional methods allow configuring the images to use object-fit, crop according to a specific aspect ratio, or add additional html attributes.

*Note: Template parsing seems to have changed in Silverstripe 5, where previously it was not required to put an argument like `770 992px` in quotes, it now appears to be required.*

### ResponsiveImg()

[](#responsiveimg)

This method allows generating an `` tag with a number of possible image sizes. On page load a 32px wide image will be loaded and the correct size will be lazyloaded using LazySizes auto-sizes functionality. A future version may allow explicitly defining a sizes attribute or using the browser's built in responsive sizing w/o LazySizes.

**Example**

`$Image.ResponsiveImg(classname, 1200, 800, 600)`

### ResponsivePicture()

[](#responsivepicture)

This method generateds a `` element, and allows for more explicit art direction than `ResponsiveImg()`. You can define media query conditions under which your images will be shown. After the first classname argument, subsequent arguments should take the following format:

`{ImageWidth}-{WidthDescriptor}-{PixelDensityDescriptor} {MinWidth}`

Width and Pixel density descriptors are optional as defined here:

MinWidth should be a screen width for a (min-width: xxx) media query, or 'default'. Start with largest width and work your way down to default.

**Examples**

```
$Image.ResponsivePicture(classname, '770-1x 1440-2x 992px', '496-1x 992-2x default')
$Image.ResponsivePicture(classname, '770-770w 992px', '496-496w default')
$Image.ResponsivePicture(classname, '770 992px', '496 default')

```

### ResponsiveBgAttributes

[](#responsivebgattributes)

*Requires Lazysizes bgSet plugin*

This method generates html attributes, not an entire element, it is used to apply a background image. The arguments operate the same way as `ResponsivePicture()`

Be aware that this method generates `class` and `style` attributes so adding these to your template code will result in dublicated attributes.

**Example**

```

    ...

```

### Helper methods

[](#helper-methods)

#### AddAttribute()

[](#addattribute)

Adds additional attribute to the `` element generated by `ResponsivePicture()` or the `` attribute generated by `ResponsiveImg()`. Must be called before the markup generating method.

**Example**

```
$Image.AddAttribute(aria-hidden, true).ResponsivePicture(classname, '770 992px', '496 default').

```

#### AddImgAttribute()

[](#addimgattribute)

Adds additoinal attribute to the `` element w/in the `` generated by `ResponsivePicture()`. Must be called before the markup generating method.

**Example**

```
$Image.AddImgAttribute(data-foo, bar).ResponsivePicture(classname, 770 992px, 496 default)

```

#### AddAspectRatio()

[](#addaspectratio)

Crops image to a specific proportion, centered on the FocusPoint, for use with `ResponsivePicture()` and `ResponsiveImg()`. Must be called before the markup generating method.

**Example**

```
$Image.AddAspectRatio(6, 9).ResponsivePicture(classname, '770 992px', '496 default')

```

#### ObjectFit()

[](#objectfit)

Adds object-fit styles to style tag of `ResponsivePicture()` and `ResponsiveImg()`, also adds necessary data-attributes to work with [objectFitPolyfill](https://github.com/constancecchen/object-fit-polyfill). Object position values come from FocusPoint.

By default `object-fit: cover;` is applied, but alternative values (fill, contain, scale-down) can be passed as an argument.

**Examples**

```
$Image.ObjectFit().ResponsivePicture(classname, '770 992px', '496 default')
$Image.ObjectFit(contain).ResponsivePicture(classname, '770 992px', '496 default')

```

#### UseWebP()

[](#usewebp)

If you haven't set the global config value to serve WebP, you can opt in for an individual image by calling this method. Must be called before the markup generating method.

**Example**

```
$Image.UseWebP.ResponsivePicture(classname, '770 992px', '496 default')

```

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Every ~90 days

Recently: every ~108 days

Total

13

Last Release

630d ago

Major Versions

v0.0.5 → v1.0.02021-09-09

v1.2.3 → v2.0.02024-08-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/a53b5128191a72d106ed446d8c361ff66f163f564037a3adc05d126745a75289?d=identicon)[davejtoews](/maintainers/davejtoews)

---

Top Contributors

[![davejtoews](https://avatars.githubusercontent.com/u/9664035?v=4)](https://github.com/davejtoews "davejtoews (20 commits)")

### Embed Badge

![Health badge](/badges/evanshunt-lazy-focus-fit/health.svg)

```
[![Health](https://phpackages.com/badges/evanshunt-lazy-focus-fit/health.svg)](https://phpackages.com/packages/evanshunt-lazy-focus-fit)
```

###  Alternatives

[nobrainerweb/silverstripe-content-blocks

Split your page content into manageable blocks/sections of content, each with their own template

301.5k](/packages/nobrainerweb-silverstripe-content-blocks)

PHPackages © 2026

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