Showcase Nefermita, o como hacer una galería fotográfica en Drupal combinando CCK, Views e ImageCache

Atención: Este manual va dirigido a Drupaleros con experiencia en Views y CCK. Si no es tu caso, comienza por los respectivos manuales de Views y CCK

Queremos explicar en breves pasos como crear una galería de fotos con Drupal, realizada para uno de nuestros clientes, combinando módulos clásicos como CCK, Views y Image Cache.

No tendremos que preocuparnos de redimensionar las fotos, ni añadir marcas de agua, simplemente crearemos un nodo por foto con su título y descripción y configuraremos con Views una forma elegante de mostrar las fotos.

Crear un tipo de contenido CCK

En tipos de contenidos, cuando tenemos el módulo CCK instalado podemos crear nuestros propios tipos de contenido.

Creamos un tipo de contenido Photo o Foto, y añadís un campo de tipo File (necesitarás tener activados los submodulos de CCK filefield e imagefield)

De esta forma, crearemos nodos con una imagen adjunta.

Configurar Image Cache para generar las miniaturas y las marcas de agua

Una vez creado el tipo de contenido, vamos a usar Image Cache para automatizar las transformaciones que queramos dar a las fotos.

En nuestro caso, crearemos una versión Preview de la foto, con una marca de agua, y con una altura de 600px, que será la versión mediana de la foto. La versión grande en principio no la mostraremos, ya que el autor vende los originales a través de su correo.

También necesitaremos un Thumbnail, o miniatura, para poder listar las fotos en 3 columnas, por ejemplo.

En nuestro caso en el Preview añadimos:

• una escala de la foto original a 600px de alto (ancho automático)
• Un texto en gris claro en el pie
• Un texto en gris oscuro en el centro

Para el thumbnail simplemente hacemos una redimensión y recorte para que todas las fotos, sean del tamaño que sean, generen un thumb de 300X200

Insertando fotos

Ya estamos preparados para ir insertando fotos. Para ello, creamos nuevos contenidos de tipo Photo.

Insertaremos un título para la imagen, una descripción, adjuntaremos la foto y finalmente, etiquetaremos la foto mediante Taxonomy.

Para nuestro cliente hemos creado dos vocabularios distintos, uno estricto, con 4 temáticas, obligatorio seleccionar al menos una de las cuatro, y el otro vocabulario abierto, mediante etiquetado libre.

Mostrar los resultados mediante Views

Esta es la parte más creativa del proyecto, ya que se puede realizar de muchas formas al gusto del cliente. En nuestro proyecto se solicitó crear una parrilla de fotos en miniatura, y cuando se pulsara una de estas, apareciera mediante Thickbox o similar (javascript) la imagen en tamaño preview.

Para hacer esto, creamos una nueva View, y en esta, añadimos un display nuevo de tipo página, con los siguientes parámetros:

Ajustes básicos:

• Estilo: Grid
• Estilo de filas: Fields
• Usar paginador: Si
• Items por página: 18

Ajustes de la página

• ruta: Taxonomy/term/%

Argumentos:

• Taxonomía: Term ID

Campos

• Contenido: Photo (elegimos Thickbox: Thumbnail image)
• Nodo: Título
• Nodo: Cuerpo

Criterio de ordenación

• Nodo: Post date

Filtros

• Nodo: tipo = Photo
• Taxonomía: Vocabulario in Galerías, Tags (mis dos vocabularios para fotos, en otros no)
• Nodo: Publicado si

Detalles finales

 Para crear las rutas automáticas formadas por el título de la foto más las palabras clave que queramos, utilizamos los módulos Pathauto y page_title.

En la portada hemos colocado una fotografía, una nube de tags, creada mediante el módulo Tagadelic, y los cuatro términos del vocabulario estricto son accesibles mediante entradas en el menú de Primary Links.

Y esto es todo, desmenuzado y listo para que lo intentéis!