Twig components #

This page is for developers who want to add small pieces of output to places a template or bundle has prepared, without editing that template. The package ibexa/twig-components is part of the DXP metapackage. The facts below were read from its configuration class and the commented example the recipe writes to config/packages/ibexa_twig_components.yaml.

Contents #

1. The idea
2. Component types
3. Configuring a group
4. Rendering
5. Good use

The idea #

A template renders a named group. Any bundle or your project can add components to that group. The group renders every component in order of priority. A layout can thus offer, for example, a "head" group where several packages add their stylesheet links.

Component types #

Any other type is refused with "Invalid type ... Allowed types: ..." when the container is built.

Configuring a group #

# config/packages/ibexa_twig_components.yaml
ibexa_twig_components:
    exp_site_head:                       # the group name
        exp_site_print_css:              # the component name
            type: stylesheet
            priority: 10
            arguments:
                href: '/assets/app/print.css'
        exp_site_notice:
            type: template
            arguments:
                template: '@ibexadesign/parts/notice.html.twig'

Each component needs type and arguments; priority defaults to 0. The arguments each type accepts are the constructor arguments of its component class under vendor/ibexa/twig-components/src/lib/Component/; read them before you configure one.

Rendering #

<head>
    {{ ibexa_twig_component_group('exp_site_head') }}
</head>

ibexa_twig_component(...) renders a single component.

Good use #

• Prefer stylesheet, script and template components over html: inline markup in configuration is hard to review, and inline scripts and styles break a strict Content Security Policy.
• Use exp_ group and component names for your own; never reuse a name a bundle defined unless you mean to add to its group.
• After a change, clear the cache: the configuration is compiled into the container.

Related pages #

• Twig templates and the design engine
• Twig functions you use daily
• No inline JavaScript
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.