I am very beginner in symfony and using symfony 2.8.
I have use FOS bundle for login and registration.
I want to use bootstrap template for login and registration.
1) I have put layout.html.twig file in app/Resources/FOSUserBundle/views directory
2) I have also put
{% block fos_user_content %}{% endblock fos_user_content %}
block in my layout.html.twig file
3) and put my CSS/JS files in following directory
web/bundles/FOSUserBundle/public/css
web/bundles/FOSUserBundle/public/js
4) and use above css & js file in my layout.html.twig file as below
{% block stylesheets %}
<link href="{{ asset('FOSUserBundle/public/js/jquery-2.2.3.min.js') }}" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('FOSUserBundle/public/js/bootstrap.min.js') }}"></script>
{% endblock %}
but i am not able to see bootstrap layout in registration form.
override FOSUserBundle layout by adding the file layout.html.twig in app/Resources/FOSUserBundle/views
Extends this layout from your base layout. Eg.
{% extends 'myapp_base.html.twig' %}
{% block content %}
{% block fos_user_content %}{% endblock %}
{% endblock %}
In your myapp_base.html.twig add bootstrap files
{% block stylesheets %}
<link href="{{ asset('assets/css/bootstrap.css') }}" rel="stylesheet" />
{% endblock %}
{% block content %}{% endblock %}
{% block javascripts %}
<script src="{{ asset('assets/js/bootstrap.js') }}"></script>
{% endblock %}
Don't put bootstrap files in web/bundles folder as those files are copied from bundles public folder (assets:install command).
Instead you can put theme in /web/assets/js and /web/assets/css folder (for a manually installation).
Related
I'm using FOSUserBundle on my Symfony4 project, and I overrode all bundle templates, and place them on my templates folder.
I have my base.html.twig file, is the main page template that contains initial HTML script for all stylesheets and javascript files. On the body I added the content block:
<body>
{% block content %}{% endblock content %}
</body>
Then, on my login template, I extended the main template and added the fos_user_content block:
{% extends 'bundles/landing.html.twig' %}
{% block content %}
{% block fos_user_content %}
{% endblock content %}
And for the moment everything is ok. The login form is displayed well. But when I log into this form, the system switched me to the Profile page. The problem, is that, the profile page template is showed and the login template too.
Both the templates are used.
On the profile template, I extended the main template too + added the same block content, except the fos_user_content block.
You missed an {% endblock fos_user_content %} tag
{% extends 'bundles/landing.html.twig' %}
{% block content %}
{% block fos_user_content %}{% endblock fos_user_content %}
{% endblock content %}
working on a Symfony PHP CMS-based project, I'm having assets loading questions.
We created several types of widgets available in content management. That allows contributors to add one or several widget on their pages. Each type of widget has its own styles and scripts.
In actual state, we load every widgets assets at the end of the page even if the page does not contain each type of widget.
In order to optimize page weight and loading, we'd like to have a mecanism that add a call to one widget assets (during the widget rendering) and defer their loading at the end of the page.
Do you know a tool that could do the job ?
Not possible to show the whole code, but in short, here is what I'd like to do :
<body>
<article>
<widget_one>// I need #widget_one assets</widget_one>
<widget_two>// I need #widget_two assets</widget_one>
.....
.....
</article>
<assets>// now I load all needed assets</assets>
</body>
I came up with you can use Using Named Assets:
# app/config/config.yml
assetic:
assets:
widget_one:
inputs:
- '#AppBundle/Resources/public/js/widget_one_first_js.js'
- '#AppBundle/Resources/public/js/widget_one_second_js.js'
widget_two:
inputs:
- '#AppBundle/Resources/public/js/widget_two_first_js.js'
- '#AppBundle/Resources/public/js/widget_two_second_js.js'
After that in your template you use it -> if you have widget_one
{% javascripts
'#widget_one'
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
if you have widget_one
{% javascripts
'#widget_two'
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
You should use template inheritance: For example 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>
After that:
{% extends '::base.html.twig' %}
{% block javascripts %}
{% for widget in widgets %}
INCLUDE ASSETS
{% endfor %}
{% endblock %}
{% block body %}
{% for widget in widgets %}
SHOW WIDGET!
{% endfor %}
{% endblock %}
I'm new to symfony2 and I'm looking for solution to create an event that render a twig file.
Assume we have a base template
<!DOCTYPE html>
<html>
<head>
{% block meta %}{% endblock %}
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body data-cachetime="{{ cacheTimeStamp() }}">
{% block header %}{% endblock %}
<div id="content">
<div class="container">
{% block content %}{% endblock %}
</div>
</div>
{% block footer %}{% endblock %}
{% block version %}{% endblock %}
{% block javascripts %}{% endblock %}
{% block trackers %}{% endblock %}
</body>
</html>
As you can see, I've a "version" block. I've created an VersionBundle which read the version from a file. The version twig template
{% block version %}
<div id="version"><p>Version: {{ versionString() }}</p></div>
{% endblock %}
calls an "ViewHelper" (i came from Zend ;-)) which calls the function from VersionBundle. But now the tricky part:
The VerionBundle is only registered for 'dev' and 'test' Environment in the AppKernel.
Thats why i create the 'version' block instead of calling the ViewHelper directly in the base twig file.
But i don't know how to create an event to render the version twig template first so the data will passed to the base twig.
I would maybe change the way you try to do it, using more Symfony features and avoiding defining Zend like "helpers". It's a good rule of thumb to keep Twig as minimal as it can be, just rendering view from data the templates receive.
First, define the version variable in parameters_dev.yml and parameters_test.yml files (in app/config). Example:
parameters:
version: 32
Define it as version: ~ in parameters.yml.
Make this variable available in all Twig templates in the app/config/config.yml file:
twig:
globals:
version: %version%
Then, in your version block definition, do the following:
{% block version %}
{% if version is not null %}
<div id="version"><p>Version: {{ version }}</p></div>
{% endif %}
{% endblock %}
Hope it helps!
I have the following structure for the css files
Public
- css
-- fr
--- style.css
-- en
--- style.css
the css folder include fr and en folders
and I'm including CSS stylesheets in my template like so:
{% stylesheets '#AtgNewsBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
so i need to include the fr or en folder as user selection
i tried the following but does not work
{% stylesheets '#AtgNewsBundle/Resources/public/css/{app.request.getLocale()}/*' filter='cssrewrite' %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/{{app.request.getLocale()}}/*' filter='cssrewrite' %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/"{{app.request.getLocale()}}"/*' filter='cssrewrite' %}
any help please
You can do it this way:
{% if app.request.locale=="fr" %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/fr/*' filter='cssrewrite' %}
{% elseif app.request.locale=="en" %}
{% stylesheets '#AtgNewsBundle/Resources/public/css/en/*' filter='cssrewrite' %}
{% endif %}
You should use the right concatenate operator:
{% stylesheets '#AtgNewsBundle/Resources/public/css/' ~ app.request.getLocale() ~ '/*' filter='cssrewrite' %}
If you prefer to do string interpolation (less readable IMHO), you should use:
{% stylesheets '#AtgNewsBundle/Resources/public/css/#{app.request.getLocale()}/*' filter='cssrewrite' %}
I am creating an image cropper as new form type in Symfony2 using the jQuery plugin imgAreaSelect (website). In my form type template (imagecropper_widget.html.twig) I load jQuery and the plugins library.
As jQuery is loaded as well in my base.html.twig, the functions in the plugin library don't work anymore. Firebug throws an "is not a function" error.
If I remove in my base.html.twig the jQuery then it works well but of course that is not a solution.
It would be great if there would be a way to append the javascript files I need in that moment to the javascripts block. I tried to override the javascripts block from my theme but Symfony throws an error because I don't use or extend from another template.
So is there a legit way to append javascript files to a block that exists in the base.html.twig page?
Javascript block in base.html.twig:
{% block javascripts %}
{% javascripts '#jquery_js' '#bootstrap_js' filter='?yui_js' combine=true %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
imagecropper_widget.html.twig
{% block imagecropper_widget %}
{% spaceless %}
<h2>Select the area</h2>
<img src="http://localhost/project/web/test.jpg" id="imgc" style="width:100%" />
{% block javascripts %}
{% javascripts
'#jquery_js'
'bundles/imanagecmsfield/js/jquery.imgareaselect.js'
'bundles/imanagecmsfield/js/process.js'
filter="?yui_js"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% endspaceless %}
{% endblock %}
Thank you for your help!
I usually do not put in the base template the scripts and css files within the javascript block. The Javascript block is usually empty and at the bottom of the base template.
base.html.twig:
{% javascripts 'XXX' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}
This way, nothing will be overridden if I add site-specific scripts
otherside.html.twig:
{% block javascripts %}
{% javascripts %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
<script type="text/javascript">
;
</script>
{% endblock %}
If you don't mind having multiple script tags ( and thus losing combining all assets ), you could simply overwrite the javascripts block and render the parent like so:
{% block javascripts %}
{{ parent() }}
{% javascripts
'#AcmeDemoBundle/Resources/public/js/*.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Otherwise you'll need to do some more work as described here https://symfonybricks.com/en/brick/smart-use-of-assetic-to-compress-javascripts-and-stylesheets , to make it truly configurable.
Which in combination with an event listener that actually adds your javascripts to the configuration array, should provide a more configurable solution I'd guess :-).