Freelancer

04.

Marzo

Liip Imagine Bundle

Crea tus propios thumbnails personalizados de manera fácil y rápida

04/03/2017

Después de probar mil formas de generar thumbnails, encontré sin duda una de las más útiles y fáciles de implementar. Se trata de LiipImagine Bundle y nos permitirá crear diferentes tipos de thumbnails, configurables en el fichero de configuración de nuestra aplicación. Podemos establecer nosotros los nombres para después usarlos en nuestro twig según nos sean necesarios.

La instalación de liipImagineBundle es simple. Primero de todo lo añadimos al composer.

Después lanzaremos el composer update

Finalmente añadimos el bundle en el fichero AppKernel.php de Symfony.

Luego, la configuración la podemos poner en un fichero independiente, para tenerlo más segmentado y que nuestro fichero de configuración principal no sea demasiado largo. Para ello podemos hacerlo añadiendo un import dentro del fichero /app/config.yml:

Supongamos que nuestra web requiere de 5 thumbnails diferentes (uno para la galería, otro para imágenes de ofertas y 3 de diferentes tamaños para diferentes tipos de secciones). El fichero imagine_filters.yml nos quedaría de la siguiente manera:

En el ejemplo le estamos diciendo a todos los thumbnails que los fije a una calidad del 85%, a unas medidas determinadas, por ejemplo en el caso de ofertas serán de dimensiones de 540x350, y además que el método de recorte sea "outbound". Este método de recorte quiere decir que la imagen se escalará lo máximo posible a 540px de ancho y si por ejemplo la altura excede los 350px, supongamos que al escalar nos queda una imagen de 540x400, esos 50 px de más en altura, se hará un Crop y perderemos 25px por arriba y otros 25px por debajo, quedando la imagen centrada.

Esto es genial a la hora de subir imágenes, ya que de una misma imagen podemos generar diferentes thumbnails que nos encajan en diferentes partes de la web que requieren sus dimensiones específicas. Bien es cierto que de una imagen muy horizontal, si queremos una imagen cuadrada, vamos a perder mucha información de los laterales. De esto como es lógico no nos libraremos.

Nos queda ver cómo usar nuestro thumbnail, en nuestro template Twig. Haremos el ejemplo del thumbnail de ofertas.

Queda claro su uso, simplemente pondremos la ruta de la imagen relativa, junto con el filtro imagine_filter con el nombre de filtro que queremos mostrar, en nuestro caso 'offers'.

Para más información del bundle, se puede visitar la documentación oficial de Symfony en el enlace http://symfony.com/doc/master/bundles/LiipImagineBundle/index.html

Daniel Hernández Varela

Programador PHP

Symfony | Javascript | MySQL | HTML5 | CSS3 | LESS | Git | jQuery | WordPress | Prestashop