Las templates normalmente hacen referencia a imágenes, JavaScript, hojas de estilo y otros assets. Symfony proporciona una forma dinámica y flexible de cargarlos a través de la función asset de Twig:
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />El principal objetivo de la función asset es hacer la aplicación más portable. Si tu aplicación está en el root del host (http://ejemplo.com), entonces los directorios deberían ser /images/logo.png. Pero si tu aplicación está en un subdirectorio (_http://example.com/my_app_), cada directorio de los assets deberá renderizarse en el subdirectorio (_/myapp/images/logo.png). La función asset se hace cargo de esto determinando cómo está construida y generando los directorios correctos.
Además, si empleas la función asset, Symfony puede añadir automáticamente un query string a tu asset, para garantizar que las actualizaciones de assets estáticos no sean cacheados. Por ejemplo, /images/logo.png puede cambiarse a /images/logo.png?v2. La versión de todo el conjunto de assets se puede modificar en la opción de configuración assets_version.
Si necesitas establecer una versión para un asset específico, puedes establecer el argumento version.
<img src="{{ asset('images/logo.png', version='3.0') }}" alt="Symfony!" />Si no proporcionas una versión o pones null, el paquete de versiones por defecto (el de _assetsversion) se empleará. Si pones false, la URL versionizada se desactivará para este asset en concreto.
Si necesitas URLs absolutas para assets, puedes establecer el argumento absolute si estás usando Twig a true:
<img src="{{ absolute_url(asset('images/logo.png')) }}" alt="Symfony!" />Incluir stylesheets y JavaScripts en Twig
Hoy en día ningún sitio web estaría completo sin incluir archivos JavaScript y hojas de estilos. En Symfony la inclusión de estos assets se lleva a cabo de forma elegante aprovechando la herencia de templates de Symfony.
Symfony también incluye la posibilidad de emplear la librería Assetic, que incluye mayores posibilidades para el manejo de los assets.
Ponemos un ejemplo en el que insertamos dos bloques a nuestra template base que almacenarán nuestros assets: uno llamado stylesheets dentro de la etiqueda head y otro llamado javascripts encima del cierre de la etiqueta body. Estos bloques contendrán todos los stylesheets y JavaScripts que necesitarás en tu sitio:
{# app/Resources/views/base.html.twig #}
<html>
<head>
{# ... #}
{% 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>Si ahora queremos incluir assets extra en una template hija, podemos emplear la función parent. Vamos a incluir una hoja de estilos específica para la sección de contacto:
{# app/Resources/views/contact/contact.html.twig #}
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}
{# ... #}En la template hija simplemente sobreescribes el bloque stylesheets y pones tu nuevo dentro de ese bloque. La función parent hará que los assets de la madre se incluyan también.
También puedes incluir assets localizados en la carpeta Resources/public. Necesitarás ejecutar el comando php bin/console assets:install target [-- symlink], que mueve (o emplea symlink) los archivos a la localización correcta. El destino por defecto es "web".
<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" rel="stylesheet" />El resultado final es una página que incluye tanto a main.css como a contact.css.
