Artículo

Algunos desarrolladores Symfony necesitan implementar de manera rápida y elegante soluciones para el tratamiento de imágenes en sus proyectos, en situaciones relativamente simples como:

  • Redimensionamiento de imágenes.
  • Imagen de perfil en una webapp.
  • Thumbnails.

Entre otras específicas, por eso, este post es para todos ellos. Para nuestra solución, necesitaremos utilizar un bundle que aplica una configuración e implementación muy sencilla y amena, me refiero a LiipImagineBundle que puede ser descargado de su repositorio aquí.

La documentación es bastante clara, pero para los que no interpretan muy bien el inglés o simplemente les da flojera, solo deben realizar una serie de pasos muy sencillos como ya lo había dicho anteriormente.

1. Descargar e instalar LiipImagineBundle.

Como todos los bundles de symfony (utilizando composer), ejecutamos el comando:

  1. php composer.phar require "liip/imagine-bundle:dev-master"

Si tienes instalado composer de forma global en tu sistema, seguramente te interesará utilizar el comando más corto:

  1. composer require "liip/imagine-bundle:dev-master"

A propósito, si tu sistema operativo es linux puede que tu composer se encuentre en la ruta:

  1. /usr/local/bin/composer

Para más información sobre composer, puedes visitar su website getcomposer.org.

Finalmente, una vez que composer hace todo el trabajo, deberás habilitar el bundle en en AppKernel.php de tu proyecto así:

  1. // app/AppKernel.php
  2. public function registerBundles() {
  3.   $bundles = array(
  4.     // ...
  5.     new Liip\ImagineBundle\LiipImagineBundle(),
  6.   );
  7. }

Y listo.

 2. Configuración del bundle en tu proyecto.

Para la configuración del bundle posiblemente sólo necesites configurar de la siguiente manera:

  1. # app/config.yml
  2. liip_imagine:
  3.   resolvers:
  4.     profile:
  5.       web_path:
  6.         web_root: %kernel.root_dir%/../web/
  7.         cache_prefix: /profile/pictures
  8.    loaders:
  9.      profile_loader:
  10.        filesystem:
  11.          data_root: %kernel.root_dir%/../uploads/profile_pictures/
  12.      cache: profile
  13.      filter_sets:
  14.        profile_24x24:
  15.          data_loader: profile_loader
  16.          quality: 80
  17.          filters:
  18.            thumbnail: { size: [24, 24], mode: outbound }
  19.        profile_100x100:
  20.          data_loader: profile_loader
  21.          quality: 80
  22.          filters:
  23.            thumbnail: { size: [100, 100], mode: outbound }

Teniendo en cuenta la configuración anterior, vamos por partes:

    • Los atributos y valores que dicen profile y profile_loader (puede ser el nombre que quieran), deben estar en las mismas ubicaciones que el código anterior.
    • profile_24x24 y profile_100x100 son los nombres de las configuraciones de las imágenes, pueden definirse las que sean necesarias y al mismo tiempo son los nombres de los directorios que contendrán las imágenes en caché con determinada resolución.
    • web_root es el path al directorio donde se crearan las imágenes “cacheadas” en las dimensiones que uno configura y estarán en el subdirectorio definido en el parámetro cache_prefix. La estructura de directorios de cache_prefix es creada por el bundle la primera vez que se requiere la imagen, luego queda disponible para próximas peticiones.
    • data_root es donde se define el path en el que se encuentran las imágenes originales, es decir, sin ningún tratamiento (por lo general son imágenes pesadas y con alta resolución).
    • Dentro de filter_sets se definen las configuraciones de las imágenes y ya son un poco más claras para entender, data_loader de donde carga las imagenes, quality calidad de la imagen, filter que establece las dimensiones y mode el modo redimensionar la imagen.
    • Para ver toda la configuración por defecto del bundle aquí

Para terminar con la configuracios, agregamos en nuestro archivo de routing.yml

  1. # app/config/routing.yml
  2. _liip_imagine:
  3.   resource: "@LiipImagineBundle/Resources/config/routing.xml"

3. Implementación en el Twig.

Creo que la mejor implementación de imágenes tratadas se debería dar en las vistas de la webapp, pero también es posible aplicar desde el controlador, por ahora solo vamos al twig deseado y escribimos.

<img src=»{{‘image.jpg’|imagine_filter(‘profile_100×100»)}}» />

Utilizamos el filtro imagine_filter pasandole 2 argumentos, el primero es la ruta de la imagen, el segundo es el nombre del filtro definido en la configuración, en nuestro caso puede ir profile_100x100 o profile_24x24 segun cual se quiera mostrar.

Con estos 3 pasos podemos trabajar con imágenes de manera fácil y rápida, personalmente me parece un bundle estupendo y muy útil.

Espero que les sea de utilidad a la comunidad de Symfony, quedo atento a sus comentarios y sugerencias.