Skip to content

Commit

Permalink
minor #4904 Added a reference about including JS and CSS files in PHP…
Browse files Browse the repository at this point in the history
… templates (javiereguiluz)

This PR was merged into the 2.3 branch.

Discussion
----------

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

| Q             | A
| ------------- | ---
| Doc fix?      | no
| New docs?     | yes
| Applies to    | all
| Fixed tickets | #4836

Commits
-------

5c6d4b2 Fixed a minor RST syntax issue
4d472c2 Added a reference about including JS and CSS files in PHP templates
  • Loading branch information
weaverryan committed Feb 1, 2015
2 parents 2305066 + 5c6d4b2 commit 6f8b145
Showing 1 changed file with 57 additions and 24 deletions.
81 changes: 57 additions & 24 deletions book/templating.rst
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

0 comments on commit 6f8b145

Please sign in to comment.