Recientemente hemos desarrollado para uno de nuestros clientes un sencillo sistema para crear galerías de imágenes.
Nuestros clientes ya disponían de su propio sistema de galerías pero no estaban satisfechos, crear una nueva era demasiado complejo, requería crear un nodo por cada imagen.
Por este motivo decidimos crear un nuevo tipo de contenido que representara toda la galería donde fuera posible subirlas todas de golpe gracias a CCK y ImageField. También creamos una View necesaria para visualizar las imágenes en los nodos de la mejor forma posible, con paginación y en forma de grid. Y añadimos una plantilla al tema para incluirla.
En este articulo describo cual es el proceso para hacer que todo funcione.
Convenciones
Antes de empezar hago dos puntualizaciones sobre como está escrito este artículo:
- Cuando hablo de secciones a las que se debe acceder escribiré una dirección dentro del directorio en el que tengáis instalado Drupal. Así, por ejemplo, si escribo "admin/settings" y tenéis Drupal instalado en "google.com" me refiero a que debéis acceder a "google.com/admin/settings"
- Cuando describo los valores de un formulario solo incluiré los relevantes, los demás no son necesarios para el correcto funcionamiento del sistema
Empezamos desde cero
Empezamos con una instalación limpia de Drupal 6. A la que añadiremos los módulos necesarios:
- CCK para añadir nuevos campos a los tipos de contenidos. Solo con activar el módulo Content ya tendremos bastante.
- ImageField y sus requisitos: FileField y ImageAPI para añadir campos del tipo imagen
- ImageCache para redimensionar las imagenes y adapatarlas a nuestras necesidades.
- y Views para ponerlo todo en su sitio. Solo debemos activar Views y Views UI
Instalamos Drupal 6 y activamos los módulos anteriores y ya podemos empezar.
El tipo de contenido "Image gallery"
Lo primero que debemos hacer es crear el nuevo tipo de contenido para las galerías. Para ello accedemos a "admin/content/types/add" y completamos el formulario con:
- Name: Image gallery
- Type: image_gallery
Aceptamos y ya tenemos el tipo creado. Ahora vamos a añadir el campo imagen. Para ello accedemos a "admin/content/node-type/image-gallery/fields" y en el cuadro "New Field" completamos los datos con:
- Label: Image
- Field name: image
- Type of data to store: File
- Form element to edit the data: Image
Aceptamos y Drupal nos lleva a un formulario con más detalles del campo, aquí solo debemos cambiar el valor de:
- Number of values: Multiple
Aceptamos y ya podemos crear nuestra primera galería.
Como podéis ver no es lo que queremos, las imágenes salen en su tamaño original, una detrás de la otra y todas (si tenéis paciencia podéis probar subiendo unas 120, a ver que pasa). Además salen siempre, tanto en el nodo como en el teaser.
Ocultando las imágenes originales
Primero ocultaremos las imagenes originales para más tarde mostrar la View que solucionará todos estos problemas. Para ello debemos acceder a "admin/content/node-type/image-gallery/display" y marcar las casillas etiquetadas con "Exclude", tanto para el "Teaser" como para el "Full node".
Creando un preset de ImageCache para las imagenes
Para que las imagenes tengan el tamaño que queremos crearemos un preset de ImageCache que más tarde utilizaremos en el View. Para ello accedemos a "admin/build/imagecache/add" y completamos el formulario:
- Preset namespace: image_gallery_image_thumb
Al aceptar accedemos a un formulario de edición más completo, hacemos clic en "Add Scale And Crop" y completamos el formulario con:
- Width: 300
- Height: 300
Y aceptamos.
La View
Creamos una View que mostrará las imágenes con paginación, en una grid y con el tamaño correcto. Más tarde incluiremos esta view en la plantilla de las galerias de imagenes.
Accedemos a "admin/build/views/add" y completamos el formulario:
- View name: image_gallery_image
Al hacer clic en "Next" aparece la interfaz de edición, respirad varias veces hondo que vamos a por ella.
En el cuadro "Basic Settings":
- Style: Grid y 3 columnas
- Use pager: Full pager
- Items per page: 3 (dejamos el Offset a 0)
- Access: Permission i seleccionem el permís "access content"
En "Arguments" hacemos clic en el "+" (excelente metáfora para "Añadir") y seleccionamos "Node: nid" y aceptamos. En el formulario que aparecerá seleccionamos:
- Action to take if argument is not present: Provide default argument
- Default argument type: Node ID from URL
En "Fields" añadimos el campo "Content: Image (field_image)" y en el formulario que aparece al aceptar:
- Desmarcamos Group multiple values
- Label: none
- Format:image_gallery_image_thumb image linked to image
En "Filters" añadimos:
- Node: Published como "Yes"
- Node:Type como "Image gallery"
Y listos, guardamos y pasamos a otra cosa.
El tema
Para que se pueda visualizar esta view en los nodos modificaremos el tema para que así sea. En este ejemplo hemos quedado un tema derivado de Garland y allí hemos añadido una template llamada "node-image_gallery.tpl.php". Este es una copia de la plantilla "node.tpl.php" del tema original, pero incluyendo una nueva linea, concretamente:
<div class="content clear-block">
<?php print $content ?>
<?php if (!$teaser) print views_embed_view('image_gallery_image',
'default', $node->nid); ?>
</div>
El resultado final
Si después de todo esto accedemos a nuestra primera galería podemos ver como las imágenes aparecen una tras la otra, como su tamaño es el correcto y como es posible paginar.
Espero que os sea de ayuda!
