DEV Community

Jitendra
Jitendra

Posted on

Lazy load images and videos in twig

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, here's a small extension that defers loading of resources so they are loaded when required in viewport.

This extension based on awesome malchata/yall.js aka yet another lazy loader is fully customisable.

Install

composer require adhocore/twig-yall
Enter fullscreen mode Exit fullscreen mode

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([
    // customisation config:
    'placeholder' => 'default.png',
]));
Enter fullscreen mode Exit fullscreen mode

Then wrap your twig template in {% lazyload %}...{% endlazyload %} like so:

{# sometemplate.twig #}

<img src="apple.jpg" />                   {# not lazyloaded #}

{% lazyload %}
<img src="ball.jpg" />                    {# lazyloaded #}
<img src="cat.jpg" class="no-lazy" />     {# not lazyloaded #}
<img src="cat.jpg" data-src="..." />      {# not lazyloaded #}
<video poster="vid.jpg">                  {# lazyloaded #}
  <source src="vid1.mp4">                 {# lazyloaded #}
  <source src="vid2.mp4">                 {# lazyloaded #}
</video>
<video class='no-lazy' src="..."></video> {# not lazyloaded #}
<picture><source src="pic.jpg"></picture> {# lazyloaded #}
{% endlazyload %}

<img src="...">                           {# not lazyloaded #}

{{ yallify() }}                           {# place it in footer #}
Enter fullscreen mode Exit fullscreen mode

Finally when twig compiles to html, above will be rendered as:

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

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" async></script>
<script src="https://unpkg.com/yall-js@3.1.7/dist/yall.min.js" async></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  window.setTimeout(function () { yall({"lazyClass":"lazy"}); }, 99);
});
</script>
Enter fullscreen mode Exit fullscreen mode

GitHub logo adhocore / twig-yall

Resource lazy loader extension for twig using malchata/yall.js

adhocore/twig-yall

It is a twig extension around malchata/yall.js for lazy loading img, picture, video, iframe etc.

(Also supports source tag and srcset attribute).

Latest Version Travis Build Scrutinizer CI Codecov branch StyleCI Software 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

composer require adhocore/twig-yall
Enter fullscreen mode Exit fullscreen mode

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'  => '<custom url to polyfill>',
    'yallJs
Enter fullscreen mode Exit fullscreen mode

Top comments (0)