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.
Related
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 %}
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.
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') %}
I have a twig template
base.html.twig
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I have another twig template: content.html.twig
<div class="row">
{{ content | raw }}
</div>
and an another one which is box.html.twig
<div class="col-md-{{ box.size|default(4) }} box-container">
<div class="box {% if showBorder|default(true) == true %}border{% endif %} {{ box.color|default('red') }}">
<div class="box-title">
<h4><i class="{{ box.icon|default('fa fa-bars') }}"></i>{{ box.text }}</h4>
<div class="tools">
{% if showCollapseButton|default(true) == true %}
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
{% endif %}
{% if showCloseButton|default(false) == true %}
<a href="javascript:;" class="remove">
<i class="fa fa-times"></i>
</a>
{% endif %}
</div>
</div>
<div class="box-body {% if lightBody|default(false) == true %}bg{% endif %}">
{% if showScroll|default(false) == true %}
<div class="scroller" data-height="{{ scrollHeight|default(165) }}px">
{{ box.content|raw }}
</div>
{% else %}
{{ box.content|raw }}
{% endif %}
</div>
</div>
</div>
and the working.html.twig goes as
{% extends 'base.html.twig' %}
{% block content %}
{% endblock %}
How do i get box.html.twig into content.html.twig and the final result in working.html.twig
I know i can get content.html.twig within working.html.twig as {% include 'content.html.twig' with {'content':'Sample Content Here'} %}
but how can i get box.html.twig into the content variable to pass to include content.html.tiwg
Twig View is rendered as below:
twigLoader = new Twig_Loader_Filesystem(MVC_DIR);
$twig = new Twig_Environment($twigLoader, array(
'cache' => 'path/to/cache',
'auto_reload' => true,
'debug' => true,
));
$this->twigCustomFunctions($twig);
echo $twig->render($viewPath, $this->viewVars);
I would recommend to render the box template first but set the rendered view to an array variable; then pass the variable to the content template
Something like this
$content = $twig->render('path/to/box.html.twig', array(...)); //pass the required variables for box.html instead of '...'
Now when you render the content.html you can pass the $content
echo $twig->render('path/to/content.html.twig', array(
'content' => $content
));