My problem is next:
I have base.html.twig placed in view folder (root)
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
and index.html.twig in Blog directory (views/Blog):
{% extends '::base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
{{ parent() }}
{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
My problem is next:
When I render and return that template it is shown just as index.html.twig and it doesn't use any part from the base template. Even I {{ parent() }} doesn't work (is not showing anything). Please help!
EDIT: it shows just articles part
Hah... I made it work... Simply changed ::base.html.twig with AcmeHelloBundle::base.html.twig ;)
Related
When updating from Symfony3.4 to Symfony4 and verifying the operation, the following error occurred.
When I examined the code, there was no definition in base.twig.html, but there was a definition in the file extending layout.html.
It seems that each is defined and used properly.
How should this be fixed?
Error
Block "contentBackIcon" on template "base.html.twig" does not exist.
layout.html.twig
{% extends 'base.html.twig' %}
{% block body %}
{{ block('contentBackIcon') }}
{% endblock %}
①index.html.twig
{% extends '#AppBundle/Sp/shop_layout.html.twig' %}
{# contentBackIcon #}
{% block contentBackIcon %}
{% if not modal %}
<a class="btn btn-link btn-nav pull-left" href="{{ path("app_shop_default_index")}}" data-ignore="push">
<span class="icon icon-left-nav"></span>
</a>
{% endif %}
{% endblock %}
②input.html.twig
{% extends '#AppBundle/Sp/shop_layout.html.twig' %}
{% block contentBackIcon %}
<a class="btn btn-link btn-nav pull-left" href="{{ path('app_shop_article_index', {"q": {"articleType": "coordinate"}}) }}" data-ignore="push">
<span class="icon icon-left-nav"></span>
</a>
{% endblock %}
Version
symfony v4.0.15
twig/twig 2.14.3
I added it to base.html.twig as below.
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}
//Add
{% block contentBackIcon %}{% endblock %}
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
I have added some of the variables in base.html.twig file
I have another file index.html.twig file in "bundle"
I have extended base.html.twig file in index.html.twig which is working fine as I am able to see all content in base is rendered in browser when i am calling index.html.twig, but when i try to override variables of base.html.twig file from index.html.twig its not working
here is code
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{% set isHeader = (isHeader|default(true)) %}
{% if isHeader == true %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{% endif %}
</body>
</html>
index.html.twig
{% extends 'base.html.twig' %}
{% set isHeader = false %}
this should hide header but its still displaying header where as if I do isHeader = false in base.html.twig file it works fine
your method is too weird , i'm not sure why are you doing this ,
According to what I found from question , try to do something like this :
in base :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{%block top_header %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{%endblock%}
</body>
</html>
in index :
{% extends 'base.html.twig' %}
{% block top_header %}{% endblock %} //keep this empty , remove the top_header content
I found answer by setting global for twig in symfony config.yml file here is code
config.yml
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
globals:
isFooter: true
isHeader: true
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{% if isHeader == true %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{% endif %}
{% block body %}
{% endblock %}
{% if isFooter == true %}
<div class="footer">
{% include 'footer.html.twig' %}
{% block footer %}
{% endblock %}
</div>
{% endif %}
<noscript><div class="alert alert-danger">You must enable Javascript on your browser for the site to work optimally and display sections completely.</div></noscript>
</body>
</html>
index.html.twig
{% set isFooter = true %}
{% set isHeader = false %}
{% block body %}
{% endblock %}
variable isHeader = false will remove header from base template so that it will not render on call of index.html.twig
Any other workaround guys please comment your suggestions.
I'm using twig template for my project. now i want create custom block for example
{% addscript %}
<script>
//here is my content script
</script>
{% endaddscript %}
also {% addscript 'footer' %}{% endaddscript %} or {% addscript 'header' %}{% endaddscript %} is good
and the script content will be parse into my php function called addScript
Class Theme{
private $css = array();
public function addScript($script){
$this->css[] = $script;
}
}
after one day search and read document in twig i found this topic but does not work !
How to create a twig custom tag that executes a callback?
i'm using latest version of twig install by composer
From what I can tell from the comments, is that you don't need a custom Tag to do what you want. You can just use blocks for this, tags are used to modify the compiled version of a template, not the content of it.
base.twig.html
<!DOCTYPE html>
<html>
<head>
<title>{{ title | default('Hello World') }}</title>
<link rel="stylesheet" type="text/css" href="theme.css">
{% block css %}
{% endblock %}
</head>
<body>
{% block body %}
<nav>
{% block navigation %}
Link
Link
Link
{% endblock navigation %}
</nav>
<section id="container">
<section id="content">
{% block content %}
{% endblock content %}
</section>
</section>
</section>
{% endblock body %}
{% block scripts %}
{% endblock %}
{% block javascript %}
{% endblock %}
</body>
</html>
child.twig.html
{% extends "base.twig.html" %}
{% block css %}
<link rel="stylesheet" type="text/css" href="child.css">
{% endblock %}
{% block content %}
<h1>Hello Child</h1>
{% endblock %}
{% block javascript %}
<script>
$(function() {
console.log('Hello Child');
});
</script>
{% endblock %}
{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% endblock %}
I'm using Symfony2 to create a single page application,
as you can see, the base.html.twig (posted below) is relatively small,
all I want to do is create a route '/' that redirects directly to the base.html without the need of using unnecessary bundle inheritance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Share with me {% endblock %}</title>
{% block stylesheets %}
{% include 'assets/basetemplates.html.twig' %}
{% endblock %}
</head>
<body class="metro mybody">
{% block channel %}
<div id="profile_push_container"></div>
<a href="#channel-close">
<div class="profile-modal-overlay"></div>
</a>
{% endblock %}
{% block content_form %}
<div id="content_form_overlay" class="animated fadeIn"></div>
<div id="content_form" class="animated fadeInDownBig">
<div class="content_form">
<button class="content_cancel_btn" onclick="ContentForm.controller.closeForm();"><i class="icon-cancel-2"></i></button>
<div class="form-items" id="form-items">
<div class="form-item">
<h2 class="content_title">Auto handel</h2>
</div>
</div>
</div>
</div>
{% endblock %}
{% block navbar %}
{% include 'GabrielLayoutBundle:Widgets:navigation.html.twig' %}
{% endblock %}
{% block body %}
<div id="content-loop-container">
<div id="content-push-in"></div>
{% block sidebar %}
<aside class="sidebar bounceInLeft animated light" id="custom-sidebar-css">
<ul id="the_sidebar"></ul>
</aside>
{% endblock %}
</div>
<div id="more-button"></div>
{% endblock %}
{% block footer %} {% endblock %}
{% block javascripts %}
{% include 'assets/basescripts.html.twig' %}
{% endblock %}
</body>
</html>
This doesn't seem to work, it finds the template but prevents me from using the twig functions
$collection->add('home_route', new Route('/', array(
'_controller' => 'FrameworkBundle:Template:template',
'template' => '<path>/views/base.html.twig',
)));
I try to override FOS bundle.
To do this I have:
UserBundle that I have created when intalling FOS. It have my User.php file.
UserBundle.php:
<?php
namespace gestEntrSym\UserBundle;
use Symfony\Component\HttpKernel\Bundle\Bundle;
class UserBundle extends Bundle
{
public function getParent() {
return 'FOSUserBundle';
}
}
views/Default/layout.html.twig
{% extends '::base.html.twig' %}
{% block title %}Acme Demo Application{% endblock %}
{% block content %}
{{ block('fos_user_content') }}
{% endblock %}
then I have app/Ressources/Views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }} |
<a href="{{ path('fos_user_security_logout') }}">
{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
</a>
{% else %}
{{ 'layout.login'|trans({}, 'FOSUserBundle') }}
{% endif %}
</div>
{% for type, messages in app.session.flashBag.all %}
{% for message in messages %}
<div class="{{ type }}">
{{ message|trans({}, 'FOSUserBundle') }}
</div>
{% endfor %}
{% endfor %}
<div>aaa
{{ block('fos_user_content') }}
</div>
</body>
</html>
I have now in the page just a link "Connexion", which just link to the page login. I want to have all the inputs in my layout page.
How can I do that?
Thanks
Best regards
If you want to override your login template, create the folder
app/Resources/FosUserBundle
and then respect the structure of the vendor folder which you won't toutch, so your overriden login wil be here :
app/Resources/FosUserBundle/Views/Security/login.html.twig
Then if you want to include that template in base,
{% include('FOSUserBundle:Security:login.html.twig') %}