Twig templates extending

Question

Twig templates extending

1.2k Views Asked by Makros At 21 October 2024 at 08:10

I'm trying to set up a page layout with separate common header and footer, extending from twig templates.

Page layout it's a typical one with some code like this:

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Soccer | Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/images/fav.png') }}">

    <!-- CSS BLOCK -->
    {% stylesheets 'assets/css/*' 'assets/css/style.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}
</head>
<body class="home-two">

    {% block page_layout_header %} {% endblock %}

    {% block content %} {% endblock %}

    {% block page_layout_footer %} {% endblock %}

    <!-- JS BLOCK -->
    {% javascripts 'assets/js/jquery.min.js'
        'assets/js/rsmenu-main.js'
        'assets/js/jquery-ui.min.js'
        'assets/js/bootstrap.min.js'
        'assets/js/jquery.meanmenu.js'
        'assets/js/wow.min.js'
        'assets/js/slick.min.js'
        'assets/js/masonry.js'
        'assets/js/owl.carousel.min.js'
        'assets/js/time-circle.js'
        'assets/js/jquery.magnific-popup.js'
        'assets/js/main.js' %}
            <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

</body>
</html>

I've got another file under (app\Resources\views\parts\page_layout_header.html.twig) where I've set a part of the website, extending from pagelayout.html.twig.

Finally, root_folder it's under full/home.html.twig and it renders a simple template like this:

{% extends "pagelayout.html.twig" %}
{% block content %}
    <h1>Root page</h1>
{% endblock %}

In the ezplatform.yml I've set the root folder and a line for the header twig.

content_view:
    full:
        root_folder:
            template: "full/home.html.twig"
            match:
                Id\Location: 67
    line:
        line_part_header:
            template: "parts/page_layout_header.html.twig"
            match:
                Identifier\ContentType: ['defined_content_type']

The issue comes when launching 127.0.0.1:8000 root page and nothing appears to be rendered. Only content from root ez folder is showing without any CSS Style. It seems that extending from twig templates is not working...

EDIT: Going to explain my situation better.

This is partial of pagelayout.html.twig which has all CSS, js and block definitions

{% stylesheets 'assets/css/*' 'assets/css/style.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

{% block header %} {% endblock %}

{% block content %} {% endblock %}

{% block footer %} {% endblock %}


<!-- BLOQUE JS -->
{% javascripts 'assets/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endblock %}

Next, I've got a page_layout_header.html.twig which contains a top bar and the main menu.

{% extends ':themes/club:pagelayout.html.twig' %}
{% block header %}
<!--Header area start here-->
<header>
    <div class="header-top-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="header-top-left">
                        <ul>
                            <li><a href="mailto:#"><i class="fa fa-envelope-o" aria-hidden="true"></i> {{ ez_render_field( content, 'web_config_email_contacto' ) }}</a></li>
                            <li><img src="{{ asset('assets/images/logo/flag.jpg') }}" alt="Logo">
                            ......
                            ......

And finally, this is the config:

home:
    template: "themes/club/full/home/home.html.twig"
    match:
        Id\Location: 2
full_top:
    template: "themes/club/parts/page_layout_header.html.twig"
    match:
        Identifier\ContentType: 'informacion_general'

So, when testing http://127.0.0.1 I cannot see anything more than {{ ez_render_field(content, 'description') }}

Original Q&A

There are 1 best solutions below

**Pavel Alazankin** · Answer 1

Extending templates means that child template extends parent template, but it doesn't mean parent template includes child one.

So your both templates (home.html.twig and page_layout_header.html.twig) extend pagelayout.html.twig independently. And they both don't know anything about each other.

I'm not familiar with EzPlatform but it looks like full and line view types are just different configurations to be chosen by ViewProvider or something like this.

So I decide you should embed reusable parts of html by simply including it like this:

{% include 'page_layout_header.html.twig' %}

https://twig.symfony.com/doc/2.x/tags/include.html

or by rendering it with separate controller like this:

{{ render(controller("ez_content:viewAction", {"contentId": 123, "viewType": "line"})) }}

https://doc.ezplatform.com/en/2.1/guide/content_rendering/#embedding-content-items

Twig templates extending

There are 1 best solutions below

Related Questions in SYMFONY

Related Questions in TWIG

Related Questions in SYMFONY-3.4

Related Questions in EZPLATFORM

Trending Questions

Popular # Hahtags

Popular Questions