17/04/2017 - SYMFONY, TWIG
This post is going to show us how to install and enable css, js, images like assets in out application. For more details, visit How to Use Assetic for Asset Management page.
Run composer require symfony/assetic-bundle
command, add new Symfony\Bundle\AsseticBundle\AsseticBundle(),
to "AppKernel.php" and put lines below to "config.yml" file.
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
bundles: [FootballFrontendBundle]
read_from: "%kernel.root_dir%/../web"
write_to: "%kernel.root_dir%/../web"
filters:
cssrewrite: ~
application
app
Resources
views
base.html.twig
src
Football
FrontendBundle
Resources
public
css
site.css
js
site.js
images
football.png
views
Default
index.html.twig
web
...
<!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') }}" />
{% stylesheets '@FootballFrontendBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
{% javascripts '@FootballFrontendBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>
{% extends '::base.html.twig' %}
{% block body %}
{% image '@FootballFrontendBundle/Resources/public/images/football.png' %}
<img src="{{ asset_url }}" alt="Logo" />
{% endimage %}
<p>Home</p>
{% endblock %}
$ php bin/console assetic:dump --env=dev --no-debug
Dumping all dev assets.
Debug mode is off.
18:19:04 [dir+] /var/www/html/football/app/../web/images
18:19:04 [file+] /var/www/html/football/app/../web/images/7f83373.png
18:19:04 [dir+] /var/www/html/football/app/../web/css
18:19:04 [file+] /var/www/html/football/app/../web/css/88ab7e4.css
18:19:04 [dir+] /var/www/html/football/app/../web/js
18:19:04 [file+] /var/www/html/football/app/../web/js/0565161.js
application
...
...
web
css
88ab7e4.css
js
0565161.js
images
7f83373.png
# http://192.168.99.10:8081/app_dev.php/
<link rel="stylesheet" href="/app_dev.php/css/88ab7e4_part_1_site_1.css">
<img src="/app_dev.php/images/7f83373_football_1.png" alt="Logo" />
<script src="/app_dev.php/js/0565161_part_1_site_1.js"></script>