Tutorial: Galería de imágenes con Drupal 8 y Colorbox

Hoy voy a realizar un tutorial que es casi una tradición, la creación de una galería de imágenes con Drupal 8 y Colorbox. En anteriores post, pudimos realizar esta acción con Drupal 7 e incluso con Drupal 6 (ya queda muy lejos!). ¡Vamos allá!

1. Instalar módulos necesarios

A diferencia de Drupal 6 y Drupal 7, el número de módulos para realizar esta galería de imágenes en Drupal 8 se ha reducido a uno solo: Colorbox

Colorbox es una libería que nos permite ver la imagen en detalle sin necesidad se abrirla en una nueva página del navegador. En esta ocasión, bajaremos el módulo de su página y lo instalaremos en nuestra web.

Hay que tener en cuenta que además tenemos que bajar esta libreria, descomprimirla y copiarla en nuestro site, asegurándonos que el path a la misma contiene este fichero: 'libraries/colorbox/jquery.colorbox-min.js'

 

2.Crear un Estilo para las imágenes

Para que todas las imágenes tengan las mismas dimensiones cuando mostremos la galería independientemente del tamaño original de la imagen, lo primero será crear un estilo (Configuración → Estilos de imagen → Añadir estilo). Lo nombraremos como 'Foto Galería' y le aplicaremos el efecto 'Scale and crop' y le indicamos las nuevas dimensiones (Yo he utilizado 240px por 180px). Incluso podríamos entretenernos y aplicar otros efectos en la imagen (Desaturar imagen, Rotar, etc...)

 

3.- Crear el tipo de contenido 'Galería'

Crearemos un nuevo tipo de contenido al que llamaremos Galería (Estructura → Tipos de contenido → Añadir tipo de contenido).

Añadiremos un campo de tipo Image  al que llamaremos Fotos.

En el desplegable 'Número de valores permitidos' pondremos 'Ilimitado' para así poder añadir tantas fotos como queramos.

4.- Generar contenido

Crearemos nuestra primera Galería (Contenido → Añadir contenido → Galería). Le podremos un título y añadiremos tantas fotos como queramos en ella (Gracias a que en Drupal 8 se ha implementado la opción MultiUpload podremos añadirlas todas de golpe y no una a una). Cuando guardemos, veremos que en el contenido aparecen todas las fotos, pero se muestran una debajo de la otra y sin el efecto Colorbox. Para mostrarlo correctamente, crearemos una view.

 

5.- Crear una vista para mostrar la galería

Crearemos la vista Vista de imágenes (Estructura → Vistas → Añadir nueva vista) tal como se muestra en la siguiente imagen:

Es importante que la galería sea una Página de tipo Cuadrícula para que las fotos se muestren en una página en forma de cuadrícula.

Ahora, añadiremos el campo Fotos y lo configuraremos se la siguiente manera:

Además, hemos de añadir esta opción en el campo:

Guardamos la view, y nos dirigimos a la página creada en la view (en nuestro caso /galeria-de-imagenes) y podremos ver la galería de fotos, en una cuadrícula, y cuando pinchemos sobre una imagen, esta se abrirá con un vistoso efecto y desde allí podremos navegar por el resto de fotos.

 

exactamente donde se copia el libraries/colorbox/jquery.colorbox-min.js descomprimido , dentro del modulo colorbox crear una carpeta llamada libreries/colorbox y dentro pegar el jquery.colorbox-min.js ???, ayuda porfa , todo lo hago bien , solo me falta el efecto de pasar imagenes

Leo en la documentación: "For Drupal 8.x : Download the Colorbox plugin and unpack in /libraries (at the root of your site). Make sure the path to the plugin file becomes: "/libraries/colorbox/jquery.colorbox-min.js"."

Es decir, la carpeta "libraries" está en la raiz del Drupal.

No me sale nada de la galeria recien e instalado drupal 8 pero a mi me sale otro tipo de vista al momento de crear campos tendrias que ser mas explicito por favor

Amigos, muy importante esta colaboración, pero quizás porque soy novato no interpreto la ruta para instalar la librería,creo que en D7 existía la ruta misitio\sites\all\libraries , pero en D8 no, podrá alguien hecharme un mano?

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
Enviando este formulario, aceptas las cláusulas de privacidad de Mollom.

Contacto

¿Te interesan nuestros servicios?

Contáctanos