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.
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 installed and configured FOSUserBundle on my project (I'm using symfony 4). The installation is done without problem.
I override FOSUserBundle templates, but same that layout.html.twig and base.html.twig are not overrided.
My layout.html.twig :
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-xs-12">
{% block fos_user_content %}{% endblock %}
</div>
</div>
</div>
{% endblock %}
My base.html.twig :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
The only FOSUserBundle is used.
Secondly, the symfony debug toolbar is disappeared.
FOSUserBundle overrided there :
templates/bundles/FOSUserBundle
On the folder I added all FOSUserBundle sub folders:
Security
Registration
Profile
....
Template structure
This is how I have done it:
base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
{% block title %}Admin panel{% endblock %}
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex,nofollow"/>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"/>
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
layout.html.twig
{% extends 'bundles/FOSUserBundle/base.html.twig' %}
{% block content %}
{% if app.request.hasPreviousSession %}
{% for type, messages in app.session.flashbag.all() %}
{% for message in messages %}
<div class="flash-{{ type }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
{% endif %}
<div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
{% endblock %}
Security/login.html.twig
{% extends "bundles/FOSUserBundle/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block title %}Sing in{% endblock %}
{% block fos_user_content %}
<div class="jumbotron">
<h4 class="text-center">Sign in</h4>
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<form method="post" action="{{ path("fos_user_security_check") }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
<div class="form-group">
<label for="username">Email:</label>
<input type="email" name="_username" class="form-control" id="username" value="{{ last_username }}"
autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="_password" class="form-control">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">Remember
me
</label>
</div>
<button name="_submit" type="submit" class="btn btn-primary">{{ 'security.login.submit'|trans }}</button>
</form>
</div>
{% endblock fos_user_content %}
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',
)));
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.
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
));