Want to create common header and footer templates that are included on several html pages in Symfony2.
it gives me error:
Unable to find template "Bundle:Controller:header.html.twig" in base.html.twig at line 16.
Directory
src
/HelloBundle
/Controller
MainController.php
/Resources
/views
/Main
header.html.twig
index.html.twig
Code in my index.html.twig file:
<div class="container">
<div id="header">
{% include "HelloBundle:Main:header.html.twig" %}
</div>
</div>
in my base.html.twig file:
<html>
<head>
<meta charset="UTF-8" />
<title></title>
{% block stylesheets %}
</head>
<body>
16: {% include 'Bundle:Controller:header.html.twig' %}
{% block body %}
{% endblock %}
{% block javascripts %}
{% endblock %}
</body>
</html>
and my header.html.twig
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li> LEARNING</li>
</ul>
</div> <!-- collapse navbar-collapse -->
</div> <!-- container-fluid-->
</nav> <!--navbar navbar-default -->
Assuming you have a views directory under Resources folder:
src/Acme/DemoBundle/Resources/views
Create a general layout template file (let's call it layout.html.twig), header.html.twig and footer.html.twig under views directory.
And write a markup for layout.html.twig file:
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="header">
{% include('#AcmeDemo/header.html.twig') %}
</div>
<div id="wrapper">
{% block content %}{% endblock %}
</div>
<div id="footer">
{% include('#AcmeDemo/footer.html.twig') %}
</div>
</body>
</html>
That's it. If you want to create another template (let's say product.view.html.twig) just extend that layout.html.twig:
product.view.html.twig
{% extends '#AcmeDemo/layout.html.twig' %}
{% block content %}{% endblock %}
Notice that I'am using namespaced syntax, I think it's more readable, and it is considered faster than usual syntax.
Related
After I edit my twig templates, they don't load on the page.
I have a header and footer twig file which are included in my base.html.twig.
When i edit these files, the changes aren't pushed trough when i reload the page.
I've tried clearing the cache and i disabled cache in config\packages\twig.yaml
I even tried to completely delete the cache folder, nothing seems to work.
I use the built in Symfony server.
homepageController.php:
?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use App\Entity\Vacature;
/**
* #Route("/")
*/
class HomepageController extends AbstractController
{
/**
* #Route("/", name="homepage")
* #Template()
*/
public function index()
{
$rep = $this->getDoctrine()->getRepository(Vacature::class);
$data1 = $rep->getAllVacatures();
$data2 = $rep->getLastVacatures(5);
return array("carousel" => $data1, "laatste5" => $data2);
}
}
Homepage/index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello HomepageController!{% endblock %}
{% block body %}
{% for vacature in carousel %}
<div class="vacature">
<h4>{{ vacature.titel }}</h4>
<p>{{ vacature.tekst }}
Bekijk
</div>
{% endfor %}
{% for vacature in laatste5 %}
<div class="vacature">
<h4>{{ vacature.titel }}</h4>
<p>{{ vacature.tekst }}
Bekijk
</div>
{% endfor %}
<pre>
{{ dump(carousel) }}
</pre>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VacIT{% endblock %}</title>
<link href="{{ asset('/assets/css/foundation.css') }}" rel="stylesheet"/>
<link href="{{ asset('/assets/css/main.css') }}" rel="stylesheet"/>
{% block stylesheets %}{% endblock %}
</head>
<body>
<div id='header'>
{% include "header.html.twig" %}
</div>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
<div id='footer'>
{% include "footer.html.twig" %}
</div>
</body>
</html>
header.html.twig
<div class='header'>
<div class="row">
<div class="small-12 columns">
<div class='header-logo'>
<a href="{{ path('homepage') }}">
<img id='logo' src="{{ asset('/assets/images/logo/logo.png') }}" alt="logo" width="200px">
</a>
</div>
<div class="skew-header-shadow">
<div class="skew-header"> </div>
</div>
</div>
</div>
</div>
footer.html.twig
<div class="footer-box">
<div class="skew-footer-shadow">
<div class="skew-footer"> </div>
</div>
<div class="footer">
<a href="{{ path('homepage') }}">
<img id='logo' src="{{ asset('/assets/images/logo/logo.png') }}" alt="logo" width="300px">
</a>
</div>
</div>
the tree is
Project
|-bin
|-config
|-public
|-assets
|-CSS
|-Fonts
|-images
|-logo
|-src
|-Command
|-Controller
|-Entity
|-Repository
|-Resources
|-templates
|-homepage
|-index.html.twig
base.html.twig
header.html.twig
footer.html.twig
Edit: I thought maybe this could be the reason somehow, the entire folder was inside my OneDrive. The thought crossed my mind, OneDrive is to blame. I don't know why, it's just a hunch...
Well... I just restarted the whole project. There were several other problems with it.
Although it would be interesting to see if anyone knows why the header an footer didn't change, it is not really relevant anymore.
I'm very new to PHP. I have a several of sites in which the only difference is a token. I use twig templating. How can I refactor my code to don't repeat myself and make a code more correct? I assume there is a way in twig to create a base template and reuse that. How should it look in my case?
My file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::CLOUDFLARE_ERROR_500S_BOX::
</div>
</div>
</body>
</html>
Another file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::ALWAYS_ONLINE_NO_COPY_BOX::
</div>
</div>
</body>
</html>
Create a master template file with twig extension (eg. main.twig) containing below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{% block BodyMain %}{% endblock %}
</div>
</div>
</body>
</html>
and in your other pages, use the code below
{% extends "main" %}
{%block BodyMain %}
::ALWAYS_ONLINE_NO_COPY_BOX::
{% endblock %}
See reference twig extends documentation
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 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 am trying to create a dropdown navigation menu for my website using knpmenu.
base.html.twig
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>{% block title %}Inconix Intranet{% endblock %} - iconix</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="{{ asset('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') }}"></script>
{% block stylesheets %}
<link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<section id="wrapper">
<header id="header">
<div class="top">
{% block navigation %}
<nav>
<ul class="navigation">
{% if app.user %}
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
{{ knp_menu_render('AppBundle:Builder:logoutMenu') }}
</div>
</div>
{% else %}
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
{{ knp_menu_render('AppBundle:Builder:topMenu') }}
</div>
</div>
{% endif %}
<div class="content" style="margin-top: 50px;">
</div>
</ul>
</nav>
{% endblock %}
</div>
<hgroup>
<h2>{% block blog_title %}Iconix Intranet{% endblock %}</h2>
<h3>{% block blog_tagline %}Intranet for Iconix Staff{% endblock %}</h3>
</hgroup>
</header>
<section class="main-col">
{% block body %}
{% endblock %}
</section>
<section class="sidebar">
{% block sidebar %}
{% endblock %}
</section>
<div id="footer">
{% block footer %}
Iconix Intranet - created by Nicholas Chew</a>
{% endblock %}
</div>
</section>
{% block javascripts %}
<link href="{{ asset('js/bootstrap.min.js') }}" />
{% endblock %}
</body>
layout.html.twig
{% extends '::base.html.twig'%}
{% block sidebar %}
{% if app.user %}
{#menu for logged in user#}
{{ knp_menu_render('AppBundle:Builder:sideMenu') }}
{% else %}
{% endif %}
{% endblock %}
{% block body %}
{{block ('fos_user_content')}}
{% endblock %}
Builder.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
// src/AppBundle/Menu/Builder.php
namespace AppBundle\Menu;
use Knp\Menu\FactoryInterface;
use Symfony\Component\DependencyInjection\ContainerAware;
class Builder extends ContainerAware
{
public function topMenu(FactoryInterface $factory)
{
$menu = $factory->createItem('root');
$menu->addChild('Home',array('route' => 'app'));
$menu->addChild('Login',array('route' => 'login'));
$menu->addChild('Register',array('route' => 'register'));
// ... add more children
return $menu;
}
public function sideMenu(FactoryInterface $factory)
{
$menu = $factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav pull-right');
$menu->addChild('Leave')->setAttribute('dropdown', true);
$menu['Leave']->addChild('Edit profile', array('route' => 'leave_app'));
// ... add more children
return $menu;
}
public function logoutMenu(FactoryInterface $factory)
{
$menu = $factory->createItem('root');
$menu->addChild('Home',array('route' => 'app'));
$menu->addChild('Leave')->setAttribute('dropdown', true);
$menu['Leave']->addChild('Edit profile', array('route' => 'leave_app'));
$menu->addChild('Claim')->setAttribute('dropdown', true);
return $menu;
}
}
I want to create a dropdown for the logoutMenu but failed. The dropdown didn't work.
The rendered HTML looks weird too. I cant figured out where went wrong. Please help.
<ul class="navigation">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul>
<li class="current first">
Home
</li>
<li dropdown="dropdown">
<span>Leave</span>
<ul class="menu_level_1">
<li class="first last">
Edit profile
</li>
</ul>
</li>
<li dropdown="dropdown" class="last">
<span>Claim</span>
</li>
</ul>
</div>
</div>
<div class="content" style="margin-top: 50px;">
</div>
</ul>
i had found the solution for my problem. as Joshua mention there might be something missing. so suspected the Bootstrap is having some problem. I had added Mopa Bootstrap Bundle to my project and call my dropdown menu as the guide provided in below link:
bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar
somehow the dropdown is working now.