Gestión básica de imágenes en Drupal 7 y Views 3

Una de las necesidades básicas que cubre Drupal 7 es la gestión de imágenes en el propio core, y de la que Views 3 se aprovecha para poder mostrar listados con imágenes utilizando los estilos que podemos definir y personalizar. En esta entrega de la serie que vengo haciendo sobre Views 3 para Drupal 7 veremos cómo crear estilos de imágen y cómo utilizarlos en nuestras vistas.

Para los que vengáis de Drupal 6, los estilos de imagen no será nada nuevo, básicamente es la inclusión del módulo ImageCache en el core de Drupal 7.

Qué son estilos de imagen

Los estilos de imagen en Drupal 7 son el equivalente a los presets de Imagecache para Drupal 6, es decir, ofrece diversos "marcos" con diferentes tamaños, dimensiones u otros efectos para las mismas imágenes originales. Podemos subir una imagen de grandes dimensiones en un contenido y mostrarla en miniatura en unos listados y en tamaño grande en el contenido principal sin la necesidad de subir varias imagenes editadas a los tamaños que buscamos. 

Es una funcionalidad imprescindible para facilitar la edición de contenido que incluya imágenes ya que homogeniza los tamaños y permite cuadrar mucho mejor el diseño. Además, si necesitamos cambiar el tamaño de las imágenes de una determinaza zona de nuestra web, podemos simplemente modificar los estilos sin tocar las imágenes originales, con el consecuente ahorro de tiempo. También tiene ventajas a la hora del rendimiento de la web ya que "cachea" los tamaños de las imágenes cuando se accede a estas por primera vez y los siguientes visitantes verán la imagen con las dimensiones correctas. Para más información podéis visitar este artículo sobre Imagecache que hice hace un tiempo, es para Drupal 6, pero la mayoría de conceptos siguen vigentes.

Creación de estilos de imágenes en Drupal 7

Para crear estilos de imágenes, simplemente debemos acceder a Configuración en nuestra instalación de Drupal

Y una vez aquí encontraremos el apartado Estilos de imagen dentro de Medios Audiovisuales.

En esta pantalla podremos ver todos los estilos que ya tenemos configurados, con el núcleo de Drupal ya vienen varios, como thumbnail para miniaturas o large para imágenes grandes, además de otros que puedan haber sido creados por otros módulos. Para crear los nuestros, hacemos click en Añadir estilo.

A continuación le debemos dar un nombre y accederemos a la pantalla de configuración.

Lo realmente importante de la pantalla de configuración de estilos son los efectos/acciones que podemos seleccionar, con el core vienen unos cuantos que suelen ser suficientes, pero hay muchos otros que los complementan y que comentaré más adelante en el artículo. Los básicos son:

  • Recortar: Hace un "crop" de toda la vida, le ponemos las dimensiones y recortará al tamaño indicado perdiendo el resto de la imagen.
  • Desaturar: Convierte la imagen a blanco y negro.
  • Redimensionar: Se le dan valores para alto y ancho y la imagen se redimensiona a ese tamaño pudiendo quedar alargada o achatada si no respetamos las proporciones originales.
  • Girar: Admite un valor en grados para girar la imagen y un color de fondo para el trozo que queda sin contenido.
  • Escala: Se le da un valor para ancho, y/o un valor para alto y escalará la imagen, si solamente se pone un valor, respetará las proporciones orginales.
  • Escalar y recortar: Es el más útil de todos, se le da un valor para ancho y/o un valor para alto y combinará las acciones de escalar y recortar para tener la imagen al tamaño deseado con las proporciones buscadas.

La característica más potente de los estilos de imagen es que se pueden combinar múltiples acciones en un solo estilo, por ejemplo recortar y poner en blanco y negro, el orden se define por la interfaz drag&drop que proporciona el core de Drupal.

Ejemplo de configuración con Escalar y recortar

Los estilos de imagen se utilizan en múltiples sitios en la administración de Drupal, en este ejemplo veremos cómo usarlos con Views, pero es también muy importante destacar que en la gestión de presentación de los tipos de contenido también vamos a disponer de estos estilos para las imágenes.

Utilización con Views 3

Vamos a ver cómo utilizar e integrar esta magnífica funcionalidad de Drupal en nuestro módulo favorito últimamente: Views 3. Crearemos una vista de contenido en la que mostraremos un estilo de imagen, yo voy a usar uno que he creado, llamado "article" y que tiene un efecto de Escalar y recortar a 600x200.

El primer paso es acceder al interfaz de Views en Estructura » Vistas y hacer click en Agregar nueva vista

Esta pantalla ya nos tiene que resultar familiar después de seguir los artículos introductorios a Views 3 para Drupal 7, por ejemplo el de cómo crear una vista simple. Resumo la configuración que he hecho para nuestro ejemplo:

  • La vista la he configurado con el nombre "03 Lista de lugares con imagenes" y he dejado tanto el nombre del sistema como el título y la ruta en las que genera automáticamente.
  • He marcado que queremos mostrar contenido de tipo Lugar, ordenado de más nuevo a más viejo.
  • Creo una página para el ejemplo con las opciones de título y ruta por defecto, podéis cambiarlas a vuestro gusto.
  • El formato de presentación es lista HTML, que recordemos que mostrará contenido dentro de un tag ul con elementos li.
  • Necesitamos mostrar el contenido con presentación de tipo campos para poder configurar los estilos de imagen.

Una vez hecho esto, le damos a Continue & edit para seguir configurando nuestra vista y veremos el interfaz completo de Views, en este ejemplo solamente vamos a usar los campos, por defecto ya nos configura automáticamente el título, que normalmente querremos que esté ahí, pero necesitamos un campo de imagen, así que le damos al enlace de agregar.

Y como vimos en el artículo sobre agregar campos a una vista, podemos buscar y filtrar por lo que necesitemos, en nuestro caso el campo de imágenes para los lugares.

Lo seleccionamos y le damos a Añadir. Entonces veremos las opciones de un campo de tipo imagen, la que nos interesa es la que pone Estilo de imagen, en la que podemos encontrar todos los estilos de imágenes que tengamos disponibles en nuestro sitio, si creamos más estilos desde el interfaz, Views los detectará automáticamente y nos los ofrecerá para los campos de tipo imagen.

Para nuestro ejemplo, he sleccionado el estilo "article", que está configurado con el efecto Escalar y recortar a 600x200 píxels, también he seleccionado que vincule al contenido, otras opciones son que vaya sin enlace o enlace a la propia imagen original.

Para la vista final, he añadido el campo de descripción y he quitado las etiquetas de todos los campos. Una vez hayamos configurado nuestra vista, ojo, no os olvideis de darle a Guardar, podemos probar nuestras páginas con el enlace de Ver página o View page que encontraréis en cada Display:

Y este es el resultado final:

Todo es más fácil en un video

Estilos de imagen en Drupal 7 con Views 3 from Pedro Cambra on Vimeo.

Efectos y acciones adicionales: Recursos

Cuando vayáis dominando el uso de estilos de imagen, os recomiendo profundizar en el tema con algunos módulos adicionales que extienden la funcionalidad de los estilos en el núcleo de Drupal 7.

  • La primera recomendación y más importante es Imagecache Actions, que ha conservado su nombre de la versión de Drupal 6 pero que tiene versión para Drupal 7. Este módulo proporciona efectos y acciones adicionales muy interesantes, como marcas de agua, texto sobre imagen, manipulaciones de color, etc.
  • Los módulos para imágenes en popup Colorbox, Thickbox y Lightbox2 (entre otros) proporcionan soporte para estilos de imagen y permiten elegir en qué estilo se abre una imagen, galerías, etc.
  • Si lo que necesitais es seleccionar el area de cortado de la imagen al crear contenido, podéis probar Image javascript crop o EPSA Crop.
  • Módulos como smartcrop e Imagefield focus toman la decisión de cuál es el mejor area de recortado en base a algoritmos inteligentes.
  • Si necesitáis mostrar galerías, os recomiendo Gallery Formatter.
  • Imagecache proportions permite seleccionar diferentes estilos para imagenes cuadradas, alargadas o ensanchadas.

Podéis encontrar las vistas y recursos utilizados para este tutorial en este enlace de descarga, las instrucciones de uso están en el propio README del fichero o en el repositorio de github.

Si os está gustando la serie de tutoriales y/o tenéis sugerencias para futuros videos y artículos, por favor, no dudéis en dejar un comentario.

Crédito de la foto, Stuck in Customs. Thanks for sharing using Creative Commons!

categorías: 
drupal: 

Comentarios

Excelente tutorial, si señor, yo para imágenes popup uso: http://drupal.org/project/shadowbox
funciona genial, configurable el idioma entre otras cosas y dispone de unos botones compactos que permite mostrar el contenido a mayor tamaño.

<p>¡Gracias Manu! A mi también me gusta Shadowbox, pero soy más de Colorbox :)</p>

Enhorabuena por estos tutoriales de views 7, andaba algo perdido... muchas gracias. Tengo una duda señor, si lo que deseo es mostrar una imagen que me lleve a un contenido de galerias, pero que únicamente muestre una imagen que sea clickable y a continuación la siguiente como con el efecto Lightbox2, pero que en el contenido únicamente muestre una imagen, es posible realizarlo con Views??

Gracias, un saludo.

Muchas gracias por estos tutoriales. Yo soy diseñador gráfico y, aunque adoro crear la identidad de una empresa o el diseño de su web, siempre me ha resultado inaccesible el mundo de la programación. Drupal nos brinda la oportunidad de hacer grandes cosas sin necesidad de escribir código alguno y eso es fantástico. Me gustaría aprende a usar Commerce y ganarme la vida diseñando páginas web puesto que la empresa donde trabajo cierra el 31 de Diciembre y me quedo en la calle como otros muchos españolitos.

¿Existe algún libro en español sobre Commerce? Ando buscando información y no encuentro nada al respecto en la red.

En lo que se refiere a los videotutoriales que aquí he encontrado solo diré una cosa: CHAPÓ!

Hola, tengo un problema que hasta hora en ningún foro he podido solucionar...

Necesito crear una vista (o si hay un modulo para ello) para los usuarios especiales pueden tener un "apartado" y que en su apartado puedan mandar un tipo de contenido, puedan tener su propio foro, su blog, y que el usuario normal vea otro menú o que el menú cambíe al entrar en el apartado del usuario especial. ¿Me explico?
¿Como lo podría hacer?
Gracias

Muy buenos los tutoriales Pedro, cortos, claros y fáciles de digerir tratándose de views y los problemas que suele dar a la gente que empezamos. Ya que en el tuto pides sugerencias para futuros tutoriales, yo te pediría que tratases sobre Panels u otros módulos para dar mejor apariencia y dinamismo a las páginas. Muchas gracias.

Hola muchas gracias por todas tus ayudas son muy importantes, mira tengo un problema estoy intentando crear una galeria, ya tengo las views y todo bn las galerias se ven pero pasa que cuando agrego una foto grande no se ve, las fotos tienen que ser pequeñas me refiero a peso y cuando le bajo el peso con algun programa pierde mucha calidad y eso no es lo que quiero quiero que se mantenga con la calidad bn buena que podria hacer?? las imagenes en mi localhost se ven bn y si puedo subir pero a la hora de intentar subirlas usando la opcion de imagen en el servidor no me salen.

muy buena pagina

Hola excelente tutorial, del ejemplo que dejaste no puedo importar los nodos aparece un error: Missing bundle property on entity of type taxonomy_term. no se que falta en el código, soy nuevo en drupal y uso drupal 7

Buenas, gracias por la información, buen trabajo!
ahora mi duda, como puedo hacer para que al cargar una imagen ésta se redimensione o lo que sea preciso para que no me salte el mensaje de "imagen demasiado grande" y así no tener que exigir el trabajo que supone ir retocando la imagen hasta su tamaño exigido.

un saludo y gracias

Hola, estoy iniciándome en drupal y tengo varias dudas. He instalado views y hice mi primer articulo. Mi primera impresion es la foto que se muestra arriba cuando se agrega, que no ocupa todo el ancho del texto del articulo. Con views lo puedo arreglar?

Hola, orientame por favor, necsito en una imagen hacer que una parte de ella le aparezcan letreros idicando que significa esa parte de la imagen, tengo mi página en drupal 7, como le puedo hacer?

Color de fondo en Crop.
Si añado la opción de escalado a la altura y luego un recorte al ancho, mayor que el tamaño de la imagen, me inserta color negro a ambos lados. Hay forma de que este color insertado sea blanco.

Felicidades por tu trabajo.
Gracias.

Hola muy bueno el tutorial, pero me gustaría saber algo que me tiene complicado, tengo un sitio de una corredora de propiedades y tengo que colocar una imagen de fondo por cada vista que he creado y he buscado pero no he encontrado nada concreto. te agrade seria tu ayuda

Añadir nuevo comentario

 
 
 

Creative Commons License
Excepto donde se indique lo contrario, el contenido de este sitio está sujeto a una licencia de Creative Commons.