Skip to content

Added a reference about including JS and CSS files in PHP templates #4904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 1, 2015
Merged

Added a reference about including JS and CSS files in PHP templates #4904

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d472c2
Added a reference about including JS and CSS files in PHP templates
javiereguiluz Jan 23, 2015
5c6d4b2
Fixed a minor RST syntax issue
javiereguiluz Jan 23, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 57 additions & 24 deletions book/templating.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1059,43 +1059,76 @@ one called ``stylesheets`` inside the ``head`` tag and another called ``javascri
just above the closing ``body`` tag. These blocks will contain all of the
stylesheets and JavaScripts that you'll need throughout your site:

.. code-block:: html+jinja
.. configuration-block::

{# app/Resources/views/base.html.twig #}
<html>
<head>
{# ... #}
.. code-block:: html+jinja

{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{# ... #}
{# app/Resources/views/base.html.twig #}
<html>
<head>
{# ... #}

{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
</html>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{# ... #}

{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
</html>

.. code-block:: php

// app/Resources/views/base.html.php
<html>
<head>
<?php ... ?>

<?php $view['slots']->start('stylesheets') ?>
<link href="<?php echo $view['assets']->getUrl('css/main.css') ?>" rel="stylesheet" />
<?php $view['slots']->stop() ?>
</head>
<body>
<?php ... ?>

<?php $view['slots']->start('javascripts') ?>
<script src="<?php echo $view['assets']->getUrl('js/main.js') ?>"></script>
<?php $view['slots']->stop() ?>
</body>
</html>

That's easy enough! But what if you need to include an extra stylesheet or
JavaScript from a child template? For example, suppose you have a contact
page and you need to include a ``contact.css`` stylesheet *just* on that
page. From inside that contact page's template, do the following:

.. code-block:: html+jinja
.. configuration-block::

.. code-block:: html+jinja

{# app/Resources/views/Contact/contact.html.twig #}
{% extends 'base.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}

{# app/Resources/views/Contact/contact.html.twig #}
{% extends 'base.html.twig' %}
{# ... #}

{% block stylesheets %}
{{ parent() }}
.. code-block:: php

<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}
// app/Resources/views/Contact/contact.html.twig
<?php $view->extend('base.html.php') ?>

{# ... #}
<?php $view['slots']->start('stylesheets') ?>
<link href="<?php echo $view['assets']->getUrl('css/contact.css') ?>" rel="stylesheet" />
<?php $view['slots']->stop() ?>

In the child template, you simply override the ``stylesheets`` block and
put your new stylesheet tag inside of that block. Of course, since you want
Expand Down