PHPackages                             adhocore/twig-yall - 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. adhocore/twig-yall

ActiveLibrary

adhocore/twig-yall
==================

Lazy load image in twig using malchata/yall.js

0.2.2(6y ago)123.9k↓100%1[1 issues](https://github.com/adhocore/twig-yall/issues)MITPHPPHP >=7.0.0CI failing

Since Dec 14Pushed 3y ago1 watchersCompare

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

READMEChangelog (4)Dependencies (2)Versions (6)Used By (0)

adhocore/twig-yall
------------------

[](#adhocoretwig-yall)

It is a twig extension around [`malchata/yall.js`](https://github.com/malchata/yall.js)for lazy loading `img`, `picture`, `video`, `iframe` etc.

(Also supports `source` tag and `srcset` attribute).

[![Latest Version](https://camo.githubusercontent.com/33625233b80415de5ff210445ceec083474fffaf5bf9458f6758e85d0a9adda9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6164686f636f72652f747769672d79616c6c2e7376673f7374796c653d666c61742d737175617265)](https://github.com/adhocore/twig-yall/releases)[![Travis Build](https://camo.githubusercontent.com/e3b049beff46d336a541e67eabce6a29f656224e54af3f717e4791b12d018cca/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f636f6d2f6164686f636f72652f747769672d79616c6c2e7376673f6272616e63683d6d6173746572267374796c653d666c61742d737175617265)](https://travis-ci.com/adhocore/twig-yall?branch=master)[![Scrutinizer CI](https://camo.githubusercontent.com/77175f0a618e7300da1e03d3ee26377f37049e0423148c17999156ca4741bed4/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f6164686f636f72652f747769672d79616c6c2e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/adhocore/twig-yall/?branch=master)[![Codecov branch](https://camo.githubusercontent.com/be8a1d9100ee30e9e0eae91b80de150ffaf7cae9c1584ebafdb1cb44320b1387/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f6164686f636f72652f747769672d79616c6c2f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://codecov.io/gh/adhocore/twig-yall)[![StyleCI](https://camo.githubusercontent.com/da45170610237accc2536c3f1ad45f644ae358e6ec300fc353075f91388a7142/68747470733a2f2f7374796c6563692e696f2f7265706f732f3137323231343333382f736869656c64)](https://styleci.io/repos/172214338)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](./LICENSE)

Eager loading of images and videos not only makes webpage slow and clumsy but also consumes a lot of bandwidth.

If you use twig templating system for your view layer, this extension defers loading of resources so they are loaded only when required in viewport.

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

[](#installation)

```
composer require adhocore/twig-yall
```

Usage
-----

[](#usage)

First setup twig to register this extension:

```
// Use your loader of choice
$twig = new Twig\Environment(new Twig\Loader\ArrayLoader);

// Register Yall with defaults
$twig->addExtension(new Ahc\TwigYall\Yall);

// Configuring Yall instance:
$twig->addExtension(new Ahc\TwigYall\Yall(
    'polyfillJs'  => '',
    'yallJs'      => '',
    'lazyClass'   => '',
    'placeholder' => '',
));
```

Voila, then in twig templates you would either use `{% lazyload %}` block to lazyload whole block at once OR individually lazyload each resources with `{{ lazify() }}`.

In both cases, you must call `{{ yallify() }}` somewhere at the footer.

### lazyload

[](#lazyload)

With `placeholder` config set to `'default.png'`, below template

```
                   {# not lazyloaded #}
{% lazyload %}
                    {# lazyloaded #}
     {# not lazyloaded #}
      {# not lazyloaded #}
                  {# lazyloaded #}
                   {# lazyloaded #}
                   {# lazyloaded #}

 {# not lazyloaded #}
 {# lazyloaded #}
{% endlazyload %}
                           {# not lazyloaded #}
```

will be rendered as:

```

```

### lazify

[](#lazify)

#### only src

[](#only-src)

```

```

will be rendered as:

```

```

See [stackoverflow](https://stackoverflow.com/a/15960901) for the usage of `data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=`.

#### with class

[](#with-class)

```

```

will be rendered as:

```

```

#### custom placeholder

[](#custom-placeholder)

```

```

will be rendered as:

```

```

#### video poster

[](#video-poster)

```

```

will be rendered as:

```

```

#### source tag

[](#source-tag)

```

```

will be rendered as:

```

```

#### src+srcset

[](#srcsrcset)

```

```

will be rendered as:

```

```

### yallify

[](#yallify)

**Important:** Do not forget to put the yall loader somewhere in the footer twig template:

```
{{ yallify() }}
```

Which by default loads yall 3.1.7 with polyfills. You can set yall.js version, and turn off polyfill like so:

```
{{ yallify("3.1.6", "") }} {# load yall v3.1.6 but not polyfill #}
```

You can pass yall options in third param. For event callbacks wrap it in ``:

```
{{ yallify(null, null, {observeChanges: true, events: {load: "function(){}"}}) }}
```

will be rendered as:

```

document.addEventListener("DOMContentLoaded", function() {
  window.setTimeout(function () {
    yall({
      "observeChanges": true,
      "events": {
        "load": function(){}
      },
      "lazyClass": "lazy"
    });
  }, 99);
});

```

**PS:**The inputs sent to `lazify()` or `yallify()` are not validated by this library.

From `malchata/yall.js`:

> Use appropriate width and height attributes, styles, and lightweight placeholders for your images.

Contributing
------------

[](#contributing)

Please check [the guide](./CONTRIBUTING.md)

LICENSE
-------

[](#license)

> © [MIT](./LICENSE) | 2019, Jitendra Adhikari

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity46

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 ~3 days

Total

4

Last Release

2330d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/2908547?v=4)[Jitendra Adhikari](/maintainers/adhocore)[@adhocore](https://github.com/adhocore)

---

Top Contributors

[![adhocore](https://avatars.githubusercontent.com/u/2908547?v=4)](https://github.com/adhocore "adhocore (47 commits)")

---

Tags

adhocoredefer-loadingimage-lazy-loadimage-lazyloadlazy-loadlazy-loadinglazy-videolazyload-imageslazyloadingtwig-extensiontwig-lazy-loadtwig-lazy-loaderphptwig-yall

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/adhocore-twig-yall/health.svg)

```
[![Health](https://phpackages.com/badges/adhocore-twig-yall/health.svg)](https://phpackages.com/packages/adhocore-twig-yall)
```

###  Alternatives

[pestphp/pest-plugin-stressless

Stressless plugin for Pest

67792.6k16](/packages/pestphp-pest-plugin-stressless)

PHPackages © 2026

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