Acceder al contenido principal

Blog

Volver a Blog

Drupal Views + Colorbox - Enlaces Vídeo Youtube en ventana modal

01 Sep 017
Drupal Views + Colorbox - Enlace a vídeo en ventana modal
Avatar David Bojo

Drupal

Buenas, en esta ocasión os traemos una solución a un problema que nos ha surgido en un proyecto y que, en el caso de que no encontréis otra manera de hacerlo, os puede valer. Se trata de poder crear en views enlaces de forma "manual" para conseguir que un vídeo se nos abra en una ventana modal con el módulo colorbox.

Drupal - Views listado de vídeos

Fácilmente podemos añadir a una vista el campo vídeo que tengamos y, teniendo previamente instalado, activado y configurado el módulo colorbox (podéis encontrar información sobre su configuración en google), nos dará la opción en "Formateador" de "Thumbnail Preview W/Colorbox" como aparece en la siguiente imagen:

Drupal - Views campo de video con formato colorbox

Con esto todo perfecto, al hacer click sobre la imagen se nos abrirá en una ventana modal el vídeo para reproducirlo, como podéis observar en la siguiente imagen:

Drupal - Vídeo en ventana modal con colorbox

Pero el problemilla que nos encontramos es a la hora de querer que otros enlaces, por ejemplo el título, en vez de llevarnos al nodo, nos abra el vídeo también en una ventana modal.

Tras varias pruebas con soluciones que se pueden encontrar por los foros en los que montan los enlaces de forma manual en el tpl (a nosotros no nos funcionó ninguna), optamos por una solución sencilla (que no significa que sea la única ni la más correcta) que consiste en lo siguiente:

1. En la vista agregamos un nuevo campo de vídeo (igual que el anterior), pero en este caso en el "Formateador" seleccionamos la opción "URL to Video w/Colorbox", y marcamos "Excluir de la presentación" este campo, con lo que tendremos este campo disponible pero no se mostrará. 

Drupal - Views campo de video con formato url colorbox

Con esto conseguimos tener como "Patrón de Reemplazo" la URL con formato Colorbox en los campos que tengamos por debajo (OJO: es importante el orden de los campos, ya que para que podamos usarlo como patrón en otros campos, este campo debe estar siempre por encima de ellos).

Drupal - Views orden de los campos

2. Ahora ya podemos irnos al campo en el que queremos añadir el enlace, en nuestro caso, el "Título", y usando la opción "Reescribir la salida de este campo" que tenemos dentro de "Reescribir Resultados", añadimos nuestro código poniendo en el href de nuestro enlace el "Patrón de reemplazo" que corresponde con el campo de url colorbox que añadimos antes.

Drupal - Views campo título sobreescrito

Ya solo nos quedaría añadir también las clases css "colorbox-load cboxElement" a nuestro enlace (como podéis ver en la imagen anterior), quedando el siguiente código:

<a class="colorbox-load cboxElement" href="[field_video_video_1]">[title]</a>

Y con esto ya tendríamos el resultado que buscamos, es decir, abriremos el vídeo con colorbox desde el Titulo o cualquier otro enlace que queramos.

Esperamos que os sirva de ayuda.

Comentarios

Añadir nuevo comentario