Incluir JS o CSS en Symfony2
1,366 views
Skip to first unread message
oyepez003
Feb 29, 2012, 10:22:06 AM2/29/12
to symfo...@googlegroups.com
Recuerdo que en symfony 1.x podias hacer esto:
en un archivo .yml configurabas:
y en la vista:
Con eso podias importar tus recursos desde un archivo de configuracion....
Como podriamos hacer esto en Symfony2.
Saludos cordiales.
en un archivo .yml configurabas:
stylesheets: [mystyle1, mystyle2]
javascripts: [myscript]
y en la vista:
<?php include_javascripts() ?>
Con eso podias importar tus recursos desde un archivo de configuracion....
Incluso se podia incluir un recurso desde cualquier parte de tu proyecto... algo muy usado por los Plugins de jQuery por ejemplo
Como podriamos hacer esto en Symfony2.
Saludos cordiales.
aferrandini
Mar 1, 2012, 6:21:51 AM3/1/12
to symfony-es
Ahora puedes publicar tus assets (JS, Images, CSS, etc...) en la
carpeta Resources/Public de tu Bundle
tras ejecutar:
./app/console assets:install directory
Tus assets estarán disponibles para que los incluyas en tus templates
de Twig de la siguiente forma
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" href="{{ asset('bundles/
pizzanightmanagement/css/main.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/
pizzanightmanagement/css/pizzanight_theme/jquery-
ui-1.8.17.custom.css') }}" type="text/css" media="all" />
<link rel="shortcut icon" href="{{ asset('favicon.png') }}" />
<title>Pizza Night {% block subtitle %}{% endblock %}</title>
<script type="text/javascript" src="{{ asset('bundles/
pizzanightmanagement/js/jquery-1.7.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/
pizzanightmanagement/js/jquery-ui-1.8.17.custom.min.js') }}"></script>
</head>
Un saludo
carpeta Resources/Public de tu Bundle
tras ejecutar:
./app/console assets:install directory
Tus assets estarán disponibles para que los incluyas en tus templates
de Twig de la siguiente forma
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" href="{{ asset('bundles/
pizzanightmanagement/css/main.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/
pizzanightmanagement/css/pizzanight_theme/jquery-
ui-1.8.17.custom.css') }}" type="text/css" media="all" />
<link rel="shortcut icon" href="{{ asset('favicon.png') }}" />
<title>Pizza Night {% block subtitle %}{% endblock %}</title>
<script type="text/javascript" src="{{ asset('bundles/
pizzanightmanagement/js/jquery-1.7.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/
pizzanightmanagement/js/jquery-ui-1.8.17.custom.min.js') }}"></script>
</head>
Un saludo
oyepez003
Mar 1, 2012, 9:25:26 AM3/1/12
to symfo...@googlegroups.com
Hola aferrandini muchas gracias por tu respuesta... pero quiero saber es como importar un .js o un .css desde algun otro lugar que no sea la vista.
Por ejemplo:
Imaginate que quiero extender Twig... o quiero crear un widget de un formulario... por ejemplo un input con la funcionalidad del autocomplete de jquery.
Como haria para poder desde ese widget o desde esa extension de Twig importar los js de jquery.js y jquery.autocomplete.js
Saludos cordiales.
Por ejemplo:
Imaginate que quiero extender Twig... o quiero crear un widget de un formulario... por ejemplo un input con la funcionalidad del autocomplete de jquery.
Como haria para poder desde ese widget o desde esa extension de Twig importar los js de jquery.js y jquery.autocomplete.js
Saludos cordiales.
Richard Andres Melo Carrillo
Mar 15, 2012, 10:20:39 AM3/15/12
to symfo...@googlegroups.com
Segun lo que entiendo... queres extender los assets (js, css e imagenes) de un bundle en el proyecto para asi usar estos desde otras plantillas que pertenezcan a otros bundles.
Bueno primero que todo en tu bundle creas las carpetas css, js e images en /src/Elproy/ElBundle/Resources/public. Despues en estas carpetas colocas tus css, js o imagenes (respectivamente). Luego abris una consola y ejecutas el comando:
php app/console assets:install web
Esto lo que hace es copiar los css, js e imagenes definidas en los bundles de "Elproy" en la carpeta web de la aplicacion... mas exactamente en web/bundles y agrupandote estos assets de acuerdo al nombre del bundle ej: web/bundles/{nombre-del-bundle}/ y aqui pues te copia todo los assets que hayas definido en /src/Elproy/ElBundle/Resources/public. Todo esto lo podes hacer si queres vos a "mano" sin usar el comando que te dije.
Luego para acceder a los mismos desde la plantilla basta con que los agreges de acuerdo a la ruta web del asset que queres agregar. Por ej supongamos que tenemos
/src/Elproy/ElBundle/Resources/public/css/este_es_mi.css
Al ejecutar el comando php app/console assets:install web, en la carpeta web tendre accesible "este_es_mi.css" en web/bundles/ElBundle/css/este_es_mi.css
Luego para usar este asset (este_es_mi.css) en una plantilla solo es cuestion de que en esta pongas
...
<link href="{{ asset('bundles/ElBundle/css/este_es_mi.css') }}" rel="stylesheet" type="text/css" />
...
PD: Para que en vez de que el comando cree enlaces simbolicos a los asset en vez de copiarlos a la carpeta web/bundles puedes ejecutar:
php app/console assets:install web --symlink
Reply all
Reply to author
Forward
0 new messages