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',
)));
Related
I am extending a twig-template where i want to replace the line
<div class="container">
with
<div class="container-fluid">
Twig-template
{% block layout_main_navigation %}
<div class="main-navigation"
id="mainNavigation"
data-flyout-menu="true">
{% block layout_main_navigation_navbar %}
<div class="container"> <!-- This line should be replaced -->
{% block layout_main_navigation_menu %}
...
{% endblock %}
...
{% endblock %}
...
{% endblock %}
I tried to overwrite the layout_main_navigation by copying everything and changing the class of the div. But i am not happy with that solution as i have to copy and overwrite a lot blocks.
How can i achieve replacing the class of the div and overwrite as less block as possible?
You can override the block layout_main_navigation_navbar, add the div element with the desired class container-fluid and then include the original content of the block layout_main_navigation_menu using the parent() function:
{% block layout_main_navigation_navbar %}
<div class="container-fluid">
{% block layout_main_navigation_menu %}
{{ parent() }}
{% endblock %}
</div>
{% endblock %}
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 the following code in my theme's index.php file. It is set to grab four of the most recent posts from a selection of category IDs. The IDs are a mix of parent and children categories.
$args = array(
'cat' => '7,5,3,4,6',
'numberposts' => 4,
'order' => 'DESC',
);
$context['stories'] = Timber::get_posts($args);
The following code is used in the tease.twig file.
{% block content %}
{{ post.content }}
{% endblock %}
The following code is used in the tease-stories.twig file.
{% extends "tease.twig" %}
{% block content %}
{% for story in stories %}
<article class="story" id="story-{{post.ID}}">
{% if loop.first %}
{% if story.thumbnail.src %}
<img src="{{story.thumbnail.src}}" class="" alt="" />
{% endif %}
{% endif %}
<h3 class="story__heading">
<a href="{{ story.link }}">
{{ story.title }}
</a>
</h3>
<div class="story__meta">
<time class="">{{ story.date }}</time>
</div>
{% if loop.first %}
<div class="story__content">
{{ story.preview.read_more(false) }}
</div>
{% endif %}
</article>
{% endfor %}
{% endblock %}
The following code is used in the index.twig file.
{% extends "base.twig" %}
{% block content %}
<section class="stories">
<h2>Latest Travel Stories</h2>
{% for story in stories %}
{% include ['tease-stories.twig'] %}
{% endfor %}
</section>
<section class="observations">
<h2>Observations</h2>
{% for observation in observations %}
{% include ['tease-observations.twig'] %}
{% endfor %}
<a href="{{ site.url }}/gerry/observations" title="More observations" class="more more-observations">
More Observations
</a>
</section>
{% endblock %}
Screenshot of looped content:
I am not sure why the loop is looping over the content four times. Any help is greatly appreciated. Cheers.
I have solved the problem with assistance from #DarkBee. The problem was using a for loop twice, once in the index.twig file and once in the tease.twig file, which resulted in the stories being outputted multiple times. My updated index.twig code is below.
{% extends "base.twig" %}
{% block content %}
<section class="stories">
<h2>Latest Travel Stories</h2>
{% include ['tease-stories.twig'] %}
</section>
<section class="observations">
<h2>Observations</h2>
{% include ['tease-observations.twig'] %}
<a href="{{ site.url }}/gerry/observations" title="More observations" class="more more-observations">
More Observations
</a>
</section>
{% endblock %}
I have
<div>
<div id="page-wrapper" class="sidebar-content white-bg">
<div class="row border-bottom">
{% include '/layouts/navbar.html.twig' %}
</div>
{% block body %}{% endblock %}
</div>
</div>
Now in this /layouts/navbar.html.twig theres an anchor tag, who's href attribute heavily depends on which template is rendered below, for example if its the Posts template, the href should be /posts/new, if its the announcements template, the href should be /announcements/newand so on, is that even possible?
You could make use of the global variable _self to solve this e.g.
main.twig
{% include "foo.twig" %}
{% include "bar.twig" %}
foo.twig and bar.twig
<div>
<div id="page-wrapper" class="sidebar-content white-bg">
<div class="row border-bottom">
{% include "nav.twig" with { 'template': _self, } %}
</div>
{% block body %}{% endblock %}
</div>
</div>
nav.twig
{% set path = '' %}
{% if template == 'foo.twig' %}
{% set path = 'path/to/foo' %}
{% elseif template == 'bar.twig' %}
{% set path = 'path/to/bar' %}
{% endif %}
{% for i in 0..3 %}
{{ i }}
{% endfor %}
demo
If the path is the only thing that depends on the current template, I'd modify DarkBee's example to just simply pass the path from the parent template. That way you don't need the if/else structure:
posts.twig:
<div>
<div id="page-wrapper" class="sidebar-content white-bg">
<div class="row border-bottom">
{% include "nav.twig" with { 'path': '/posts/new' } %}
</div>
{% block body %}{% endblock %}
</div>
</div>
announcements.twig:
<div>
<div id="page-wrapper" class="sidebar-content white-bg">
<div class="row border-bottom">
{% include "nav.twig" with { 'path': '/announcements/new' } %}
</div>
{% block body %}{% endblock %}
</div>
</div>
nav.twig:
{% for i in 0..3 %}
{{ i }}
{% endfor %}
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 ;)