I render same page in modal and self.
I wonder if there is some way to check for some condition and if condition is true not to include header and footer with use tag.
{% extends 'ProfileBundle::base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="..."/>
{% endblock %}
{% if modal is not defined %}
{% use 'ProfileBundle::navigation.html.twig' %}
{% use 'ProfileBundle::footer.html.twig' %}
{% endif %}
{% block main %}
{% endblock %}
To use the use tag in twig, you still need to call them if you want to render the blocks. So before rendering the blocks you can add your condition (twigfiddle)
page.twig
{% extends "base.twig" %}
{% block stylesheets %}
{{ parent() }}
<link rel="text/css" href="page.css" />
{% endblock %}
{% block content %}
{% if not modal is defined %}{{ block('navigation') }}{% endif %}
<h1>Content</h1>
{% if not modal is defined %}{{ block('footer') }}{% endif %}
{% endblock %}
base.twig
{% use "navigation.twig" %}
{% use "footer.twig" %}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="default.css" />
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
navigation.twig
{% block navigation %}
<nav id="main">
1
2
3
</nav>
{% endblock %}
footer.twig
{% block footer %}
<footer>
© {{ "now" | date('Y') }}
</footer>
{% endblock %}
Related
I'd like to understand how I may use block tags inside a child template that is being included to another html file that is extending the base template.
In index.html, nav.html is being included, and in the nav.html I've included a block tag with a javascript for the menu, but it doesn't get passed to the base.html
base.html
<!DOCTYPE html>
<html>
<head>
{% block head%}{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block header %}{% endblock %}
{% block body %}{% endblock %}
{% block footer %}{% endblock %}
{% block javascript %}{% endblock %}
</body>
</html>
indexhtml
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="/css/home.css" />
{% endblock %}
{% block title %}Homepage{% endblock %}
{% block body %}
{% include "nav.html" %} //here I am including the nav.html
Nav is above here
{% endblock %}
{% block footer %}
This is the footer block
{% endblock %}
nav.html
<header>
<nav>
<ul>
<li>Homepage</li>
<li>User account</li>
</ul>
</nav>
</header>
{% block footer %}
<script src="/js/dropdownmenu.js"></script>
{% endblock %}
You could potentially include another twig-template that extends your template with the blocks:
https://twig.sensiolabs.org/doc/2.x/tags/include.html
In child templates you cannot have HTML outside block, you need to move HTML code in nav.html inside some block
7.6 i want to load a javascript file included from my child view after the javsscripts loaded from base.html.twig
for example, here is my base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Benerite | {% block page_title %}{% endblock %}</title>
{% stylesheets
'assets/bower_components/jquery-ui/themes/cupertino/jquery-ui.min.css'
'assets/gentelella-master/css/bootstrap.min.css'
filter='cssrewrite' output='css/compiled/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
{{ include('::_navigation.html.twig') }}
{{ include('::_topnav.html.twig') }}
<!-- page content -->
<div class="right_col" role="main">{% block body %}{% endblock %}</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="">
<p class="pull-right">
<span class="lead"> <i class="fa fa-database"></i> Benerite</span>
</p>
</div>
</footer>
<!-- /footer content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
{% javascripts
'assets/bower_components/jquery/dist/jquery.min.js'
'assets/bower_components/jquery-ui/jquery-ui.min.js'
output='js/compiled/main.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>
Here is my child form in which i have included a js file at the end
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Privilege edit</h1>
{{ form(edit_form) }}
<ul class="record_actions">
<li>
<a href="{{ path('privilege') }}">
Back to the list
</a>
</li>
<li>{{ form(delete_form) }}</li>
</ul>
<script src="{{my_custom_js file}}"></script>
{% endblock %}
When I load the page, I want the js file render after the js file included from the base.html.twig
Is there any solution for my issue?? please help me
In base template you have two blocks, base and javascripts.
Create one more, somthing like that childs_javascripts after javascripts block.
And in childe template just use childs_javascripts like you use block body
{% block childs_javascripts %}
<script src="{{my_custom_js file}}"></script>
{% endblock %}
Override the block and call parent block with parent() twig function.
base.html.twig
<html>
<head>
...
{% block stylesheets %}
{% stylesheets ... %}...{% endstylesheets %}
{% endblock %}
...
</head>
<body>
...
{% block body %}{% endblock %}
{% block javascripts %}
{% javascripts ... %}...{% endjavascripts %}
{% endblock %}
</body>
</html>
page.html.twig
{% extends 'base.html.twig' %}
{% block body %}
inner content
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% stylesheets additional styles %}...{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% javascripts additional scripts %}...{% endjavascripts %}
{% endblock %}
You would like to use the Bootstrap in Symfony2.
However, in the rental server that I owe, less command can not be used.
So from http://getbootstrap.com/, was placed css you have downloaded, font, etc..
However, glyphicon does not appear.
Will're something wrong way of setting?
MyBudle
+ Resources
+ Public
+ Css
+ Fonts
+ Js
page.html.twig
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}
{% stylesheets '#LouteBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{% javascripts '#LouteBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.eot'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.eot'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.svg'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.svg'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.ttf'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.ttf'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.woff'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.woff'
%}
{% endstylesheets %}
</head>
use glyphicon
<body>
<nav class="navbar navbar-inverse" role="navigation" id="top">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<span class="glyphicon glyphicon-home"></span>
</a>
How can i translate the entire block in the parent template page.html.twig:
{# app/Resources/views/page.html.twig #}
{% extends '::bootstrap.html.twig' %}
{% block page %}
<div class="page-header">
<h1>{% block header %}{% endblock %}
<small>{% block small %}{% endblock %}</small></h1>
</div>
<div id="content" class="container-fluid">
{% block content %}{% endblock %}
</div>
{% endblock %}
... instead of calling trans in each child template?
{# src/AcmeHelloBundle/Resources/views/User/show.html.twig #}
{% extends '::page.html.twig' %}
{% block header %}{% trans %}Utente{% endtrans %}{% endblock %}
{% block small %}{% trans %}dettaglio{% endtrans %}{% endblock %}
{% block content %}{% endblock %}
I've tried surround {% block header %} with {% trans %} but it complains about trans that should be a simple string and not an expression.
Nevermind. Found it by myself using block directly:
{% block page %}
<div class="page-header">
<h1>{{ block('header')|trans }}
<small>{{ block('small')|trans }}</small></h1>
</div>
<div id="content" class="container-fluid">
{% block content %}{% endblock %}
</div>
{% endblock %}
I'm not going to delete the question since i can't find any similar...
I want to add Gregwar Bundle (captcha) to my project. I did all the steps shown here https://github.com/Gregwar/CaptchaBundle/blob/master/README.md
But, it is throwing "Variable "captcha_code" does not exist" exception. Is it smth wrong with the form theming part?
use tag form_theme
example:
index.html.twig - template with your form,
captcha.html.twig - template with your captcha
index.html.twig content:
{% form_theme form 'YourBundle::captcha.html.twig' %}
<form action="" method="post">
...
{{ form_widget(form.captcha) }}
...
</form>
captcha.html.twig content:
{% block captcha_widget %}
{% spaceless %}
<img src="{{ captcha_code }}" alt="" title="captcha" width="{{ captcha_width }}" height="{{ captcha_height }}" />
...
{{ form_widget(form, {'attr': { 'autocapitalize': 'off','autocorrect': 'off' }}) }}
...
{% endspaceless %}
{% endblock %}
Block captcha_widget has to be outside any other block, example:
{% block captcha_widget %}
{% set label = label|default('')|trim %}
{% if is_human %}
-
{% else %}
{% spaceless %}
<div class="image">
<img id="{{ image_id }}" src="{{ captcha_code }}" alt="" title="captcha" width="{{ captcha_width }}" height="{{ captcha_height }}" />
{% if reload %}
<script type="text/javascript">
function reload_{{ image_id }}() {
var img = document.getElementById('{{ image_id }}');
img.src = '{{ captcha_code }}?n=' + (new Date()).getTime();
}
</script>
<a class="captcha_reload" onclick="reload_{{ image_id }}(); return false;" href="#">{{ 'Renew'|trans({}, 'gregwar_captcha') }}</a>
{% endif %}
</div>
<div class="">{{ label }}{{ label ? '* :': ''}}{{ form_widget(form) }}</div>
{% endspaceless %}
{% endif %}
{% endblock captcha_widget %}
{% form_theme form2 _self %}
{% block content %}
...
{% endblock %}