adhocore/twig-yall

It is a twig extension aroundmalchata/yall.js for lazy loadingimg,picture,video,iframeetc.

(Also supportssourcetag andsrcsetattribute).

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

composer require adhocore/twig-yall

Usage

First setup twig to register this extension:

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

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

// Configuring Yall instance:
$twig->addExtension(newAhc\TwigYall\Yall(
'polyfillJs'=>'<custom url to polyfill>',
'yallJs'=>'<custom url to yall.js>',
'lazyClass'=>'<default lazy class>',
'placeholder'=>'<default placeholder image url>',
));

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

Withplaceholderconfig set to'default.png',below template

<imgsrc="apple.jpg"/>{#not lazyloaded#}
{%lazyload%}
<imgsrc="ball.jpg"/>{#lazyloaded#}
<imgsrc="cat.jpg"class="no-lazy"/>{#not lazyloaded#}
<imgsrc="cat.jpg"data-src="..."/>{#not lazyloaded#}
<videoposter="vid.jpg">{#lazyloaded#}
<sourcesrc="vid1.mp4">{#lazyloaded#}
<sourcesrc="vid2.mp4">{#lazyloaded#}
</video>
<videoclass='no-lazy'src="..."></video>{#not lazyloaded#}
<picture><sourcesrc="pic.jpg"></picture>{#lazyloaded#}
{%endlazyload%}
<imgsrc="...">{#not lazyloaded#}

will be rendered as:

<imgsrc= "apple.jpg"/>
<imgclass= "lazy yall"src= "default.png"data-src= "ball.jpg"/>
<imgsrc= "cat.jpg"class= "no-lazy"/>
<imgsrc= "cat.jpg"data-src= "..."/>
<videoclass= "lazy yall"poster= "default.png"data-poster= "vid.jpg">
<sourceclass= "lazy yall"data-src= "vid1.mp4">
<sourceclass= "lazy yall"data-src= "vid2.mp4">
</video>
<videoclass='no-lazy'src= "..."></video>
<picture><sourceclass= "lazy yall"data-src= "pic.jpg"></picture>
<imgsrc= "...">

lazify

only src

<img{{ lazify("/my/img.jpg") }} />

will be rendered as:

<imgclass= "lazy yall"src= "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI="data-src= "/my/img.jpg"/>

Seestackoverflowfor the usage ofdata:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=.

with class

<img{{ lazify("logo.png","cls1 cls2") }} />

will be rendered as:

<imgclass= "cls1 cls2 lazy yall"src= "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI="data-src= "logo.png"/>

custom placeholder

<img{{ lazify("logo.png","cls1 cls2","/img/placeholder.png") }} />

will be rendered as:

<imgclass= "cls1 cls2 lazy yall"src= "/img/placeholder.png"data-src= "logo.png"/>

video poster

<video{{ lazify({poster:"video/poster.jpg"},"video","dummyposter.jpg") }}>

will be rendered as:

<videoclass= "video lazy yall"poster= "dummyposter.jpg"data-poster= "video/poster.jpg">

source tag

<source{{ lazify({srcset:"img2x.jpg 2x, img1x.jpg 1x"}) }}>

will be rendered as:

<sourceclass= "lazy yall"data-srcset= "img2x.jpg 2x, img1x.jpg 1x">

src+srcset

<img{{ lazify(["src.jpg","src2x.jpg 2x","src1x.jpg 1x"],"","dummy.jpg") }} />

will be rendered as:

<imgclass= "lazy yall"src= "dummy.jpg"data-src= "src.jpg"data-srcset= "src2x.jpg 2x, src1x.jpg 1x"/>

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<raw></raw>:

{{ yallify(null,null,{observeChanges:true,events:{load:"<raw>function(){}</raw>"}}) }}

will be rendered as:

<scriptsrc= "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"async></script>
<scriptsrc= "https://unpkg /[email protected]/dist/yall.min.js"async></script>
<scripttype= "text/javascript">
document.addEventListener("DOMContentLoaded",function(){
window.setTimeout(function(){
yall({
"observeChanges":true,
"events":{
"load":function(){}
},
"lazyClass":"lazy"
});
},99);
});
</script>

PS: The inputs sent tolazify()oryallify()are not validated by this library.

Frommalchata/yall.js:

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

Contributing

Please checkthe guide

LICENSE

©MIT| 2019, Jitendra Adhikari