Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adhocore/twig-yall
Resource lazy loader extension for twig using malchata/yall.js
https://github.com/adhocore/twig-yall
adhocore defer-loading image-lazy-load image-lazyload lazy-load lazy-loading lazy-video lazyload-images lazyloading twig-extension twig-lazy-load twig-lazy-loader
Last synced: about 1 month ago
JSON representation
Resource lazy loader extension for twig using malchata/yall.js
- Host: GitHub
- URL: https://github.com/adhocore/twig-yall
- Owner: adhocore
- License: mit
- Created: 2019-02-23T12:55:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-26T15:44:40.000Z (about 2 years ago)
- Last Synced: 2024-10-04T20:36:56.065Z (about 2 months ago)
- Topics: adhocore, defer-loading, image-lazy-load, image-lazyload, lazy-load, lazy-loading, lazy-video, lazyload-images, lazyloading, twig-extension, twig-lazy-load, twig-lazy-loader
- Language: PHP
- Homepage: https://github.com/adhocore/twig-yall
- Size: 47.9 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## adhocore/twig-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).
[](https://github.com/adhocore/twig-yall/releases)
[](https://travis-ci.com/adhocore/twig-yall?branch=master)
[](https://scrutinizer-ci.com/g/adhocore/twig-yall/?branch=master)
[](https://codecov.io/gh/adhocore/twig-yall)
[](https://styleci.io/repos/172214338)
[](./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
```bash
composer require adhocore/twig-yall
```
## Usage
First setup twig to register this extension:
```php
// 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
With `placeholder` config set to `'default.png'`, below template
```twig
{# not lazyloaded #}
{% lazyload %}
{# lazyloaded #}
{# not lazyloaded #}
{# not lazyloaded #}
{# lazyloaded #}
{# lazyloaded #}
{# lazyloaded #}
{# not lazyloaded #}
{# lazyloaded #}
{% endlazyload %}
{# not lazyloaded #}
```
will be rendered as:
```html
```
### lazify
#### only src
```twig
![]()
```
will be rendered as:
```html
```
See [stackoverflow](https://stackoverflow.com/a/15960901) for the usage of `data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=`.
#### with class
```twig
![]()
```
will be rendered as:
```html
```
#### custom placeholder
```twig
![]()
```
will be rendered as:
```html
```
#### video poster
```twig
```
will be rendered as:
```html
```
#### source tag
```twig
```
will be rendered as:
```html
```
#### src+srcset
```twig
![]()
```
will be rendered as:
```html
```
### yallify
**Important:** Do not forget to put the yall loader somewhere in the footer twig template:
```twig
{{ yallify() }}
```
Which by default loads yall 3.1.7 with polyfills. You can set yall.js version, and turn off polyfill like so:
```twig
{{ 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 ``:
```twig
{{ yallify(null, null, {observeChanges: true, events: {load: "function(){}"}}) }}
```
will be rendered as:
```html
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
Please check [the guide](./CONTRIBUTING.md)
## LICENSE
> © [MIT](./LICENSE) | 2019, Jitendra Adhikari