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 %}
Related
I have a page where css isn't applied. i have a folder inside templates called animal and it contains 2 files adopt.html.twig and index.html.twig and the base.html.twig. Why css isn't applied to adopt.html.twig?.
My code is:
adopt.html.twig
{% extends 'base.html.twig' %}
{% block title %}Adopt an animal!{% endblock %}
{% block body %}
<ul>
<li class="articleItem">
<img src="/dog.png" alt="article icon">
<h4>Thanks ! </h4>
<p>{{ animal.name }} is your new Compagnon </p>
<button class="button">Go back</button>
<button class="button">See adoptions</button>
</li>
</ul>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
{% block head %}
{% include 'partials/header.html.twig' %}
{% endblock %}
{% block body %}{% endblock %}
{% block footer %}
{% include 'partials/footer.html.twig' %}
{% endblock %}
</body>
</html>
</html>
Your css/style.css is linked relative to current URL. So it works on mainpage but not for any subpage URL (In Symfony this means any controller with #Route other than /).
So if You open https://your.domain.tld/, browser would read style.css from https://your.domain.tld/css/style.css. But if You open https://your.domain.tld/adopt/, browser try to read style.css from https://your.domain.tld/adopt/css/style.css.
In Symfony this could be fixed by using
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
instead of:
<link href="css/styles.css" rel="stylesheet">
Please, read Creating and Using Templates: Linking to Assets
I'm trying to override FOSUser Template and add some html items to my pages, I got this error :
Unexpected token "end of template" of value "" ("end of statement block" expected).
here is the base.html.twig page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
{% stylesheets
"css/myStyle.css"
%}
<link rel="stylesheets" href="{{ asset_url }}">
<title>{% block title %}Hello!{% endblock %}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- 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>
{% block topnav %}
{% include '::topnav.html.twig' %}
{% endblock %}
<div class="container">
{% block content %}{% endblock %} </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% block javascripts %}{% endblock %}
this is the layout.html.twig page :
{% extends '::base.html.twig' %}
{% block content %}
<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 %}
<a href="{{ path('fos_user_security_login') }}">{{
'layout.login'|trans({}, 'FOSUserBundle') }}</a>
{% endif %}
</div>
{% 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 %}
Your style sheet must be declared as follow
{% stylesheets
'path/to/style.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
your endstylesheets is missing
Have a look there
https://symfony.com/doc/current/assetic/asset_management.html#including-css-stylesheets
Refer to official documentation :
How to override templates : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_templates.html
How to override FormType : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_forms.html
I'm working on a Symfony site, v 2.8.3. I have controllers and twig files all set up.
Every page I go to I get the default welcome screen.
The Symfony profiler shows the correct twig file but doesn't render it.
Any suggestions?
In DefaultController.php
/**
* #Route("/")
* #Template()
*/
public function indexAction()
{
}
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.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
index.html.twig
{% extends '::base.html.twig' %}
{% block body_container_main_content %}
You don't have body_container_main_content block in base template
Add it to body block
<!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.ico') }}" />
</head>
<body>
{% block body %}
{% block body_container_main_content %}{% endblock %}
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
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>
I installed CalendarBundle by following the tutorial on this link: https://github.com/carlescliment/calendar-bundle , but the problem is that the calendar can't be displayed whenever I try to display it. By the way, this is the script of the html.twig file which should display the calendar:
<html>
<head>
<link rel="stylesheet" href="{{ asset('bundles/bladetestercalendar/css/calendar-header.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/bladetestercalendar/css/calendar.css') }}">
<script type="text/javascript" src="{{ asset('bundles/bladetestercalendar/js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/bladetestercalendar/js/calendar.js') }}"></script>
</head>
<body>
<div class="app">
<header class="main-header">
{% block header %}
{% endblock %}
</header>
<div class="main-body">
{% block body %}
{% endblock %}
</div>
<footer class="main-footer">
{% block footer %}
<p>Opensourced by ®Vetaminic</p>
{% endblock %}
</footer>
</div>
</body>
</html>
So, what shall I do to resolve this problem? I have tried to find a solution but it was in vain.
Thanks in advance.