Twig templates extending

Question

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

Page layout it's a tipycal 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 setted 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 setted 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: Gonna 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 wich 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') }}

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

Question

1 answers

solution1
0 2018-04-17 12:01:52

Twig templates extending

Question

1 answers

solution1 0 2018-04-17 12:01:52

solution1
0 2018-04-17 12:01:52