Skip to content
An extension for Twig that allows to defer block rendering.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests Simplify some tests Dec 11, 2017
.gitignore
.travis.yml Add PHP 7.3 to test matrix (#7) Dec 25, 2018
LICENSE Update license year Jan 1, 2019
README.md Add awesome badge Oct 27, 2018
composer.json Switch to Twig 2.x Mar 17, 2017
phpunit.xml.dist Add PHP 7.3 to test matrix (#7) Dec 25, 2018

README.md

Deferred Twig Extension

Build Status Scrutinizer Code Quality Mentioned in Awesome Twig

An extension for Twig that allows to defer block rendering.

Installation

The recommended way to install the extension is through Composer:

$ composer require phive/twig-extensions-deferred:^1.0 # for Twig 1.x
$ composer require phive/twig-extensions-deferred:^2.0 # for Twig 2.x

Initialization

$twig = new Twig_Environment($loader);
$twig->addExtension(new Phive\Twig\Extensions\Deferred\DeferredExtension());

Simple Example

{# outputs bar #}
{% block foo deferred %}
    {{ bar }}
{% endblock %}

{% set bar = 'bar' %}

Advanced Example

Just for example purposes, first create a global twig variable:

$twig = new Twig_Environment($loader);
$twig->addGlobal('assets', new ArrayObject());

Then build the following set of templates:

{# layout.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        {% block content '' %}

        {{ assets.append('/js/layout-header.js') }}

        {% block javascripts deferred %}
            {% for asset in assets %}
                <script src="{{ asset }}"></script>
            {% endfor %}
        {% endblock %}

        {{ assets.append('/js/layout-footer.js') }}
    </body>
</html>


{# page.html.twig #}
{% extends "layout.html.twig" %}

{% block content %}
    {{ assets.append('/js/page-header.js') }}

    {% if foo is defined %}
        {{ include("subpage1.html.twig") }}
    {% else %}
        {{ include("subpage2.html.twig") }}
    {% endif %}

    {{ assets.append('/js/page-footer.js') }}
{% endblock %}


{# subpage1.html.twig #}
{{ assets.append('/js/subpage1.js') }}


{# subpage2.html.twig #}
{{ assets.append('/js/subpage2.js') }}

The resulting html will be the following:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <script src="/js/layout-header.js"></script>
        <script src="/js/page-header.js"></script>
        <script src="/js/subpage2.js"></script>
        <script src="/js/page-footer.js"></script>
        <script src="/js/layout-footer.js"></script>
    </body>
</html>

Block overriding

{# index.twig #}
{% extends "base.twig" %}
{% block foo %}foo is not deferred anymore{% endblock %}
{% block bar deferred %}bar is deferred now{% endblock %}

{# base.twig #}
{% block foo deferred %}foo is deferred{% endblock %}
{% block bar %}bar is not deferred{% endblock %}

License

Deferred Twig Extension is released under the MIT License. See the bundled LICENSE file for details.

You can’t perform that action at this time.