Tecnoaficiones

Las nuevas tecnologías al alcance de todos.

Como crear una galeria de videos en Drupal

galeriavideo

En este tutorial vamos a tratar de compartir uno de los procedimientos para realizar una galería de vídeos en Drupal.
Como siempre intentaremos que este todo lo necesario, ordenado y lo más sintetizado posible. El resultado de lo que vamos a plasmar aquí lo podéis ver en esta misma web en el apartado Galería de vídeos.

Aunque los módulos que vamos a instalar nos brindan un montón de opciones, lo que realmente vamos a hacer es crear una galería en la cual vamos a compartir vídeos que ya existen tanto en Youtube como en Vimeo.
También podríamos tener los vídeos alojados en nuestro propio sitio, pero para que duplicar información y sobrecargar nuestro servidor cuando ya tenemos recursos para hacerlo.

​1 .-Instalación de los modulo necesarios, recomiendo que los instaléis por orden:

2 .- Configuración del tipo de archivo que luego utilizaremos como un campo:
Una vez instalados los módulos y concedidos los permisos, si vamos a "Estructura" encontraremos un nuevo apartado "Tipo de Fichero" en el cual aparecerán los diferentes tipos de archivo de los que disponemos. Esta funcionalidad es la que nos ha dado el modulo File Entity. En nuestro caso el que nos interesa es el de "Vídeo".
En este momento lo que vamos hacer es dar las opciones de presentación, tamaño y demás, para nuestro nuevo tipo de fichero, que luego utilizaremos como campo en el tipo de contenido que crearemos para nuestra galería. para lo cual vamos a:
Estructura>> Tipo de Fichero>> Video

Dejamos todo por defecto y nos vamos directamente a la solapa que pone:
Manage File Display
En esta solapa si toda la instalación fue bien tendremos en el apartado Enabled display la posibilidad de seleccionar Video Vimeo y Vídeo Youtube, seleccionamos solo esos display, entonces en parte inferior podremos darle el tamo y opciones de cada tipo de video en concreto. Esto hay que configurarlo para la vista predeterminada, resumen, y vista previa. Lógicamente no querremos por ejemplo el mismo tamaño en la presentacion resumen que en la predeterminada.
Una imagen de como yo puse el predeterminado.

Galeria videos Drupal 1

Para la vista de resumen reduzco el tamaño como podéis ver en la siguiente imagen.

Galeria videos Drupal 2

3 .- Creación de un nuevo tipo de contenido para insertar nuestro vídeos:
Lo que vamos a hacer a partir de ahora son cosas ya habituales en Drupal, y ahora toca crear el tipo de contenido con el cual poder ir incorporando los vídeos a nuestra galería. Para lo cual vamos a:
Estructura>> Tipos de Contenido>> Añadir tipo de contenido

Y creamos un tipo de contenido que yo he llamado Galeria de vídeos, con los siguientes campos: Título, Categoria(0pcional), Descripción del vídeo y lo que vamos añadir es nuevo campo que sera nuestro vídeo, de la siguiente manera:

  • Etiqueta: Archivo de vídeo.
  • Nombre de sistema: field_archivo_video.
  • Tipo de campo: Archivo.
  • Tipo de control: Selección archivos multimedia.

Y debería quedar más o menos como en la siguiente imagen.

Galeria video drupal 3

Ahora editamos el campo archivo, clicando en en editar, y le damos la siguiente configuración:

  • Etiqueta: Archivo de vídeo.
  • Campo necesario: SI (Es el motivo de este tipo de contenido).
  • Texto de ayuda: Lo que queráis.
  • Extensiones de fichero permitidas para los ficheros a subir: Lo dejáis por defecto, aunque realmente no lo utilizaremos, como explique al principio no vamos a subir los vídeos , solo a compartirlos.
  • Enabled browser plugins: Web (Solo esta opción).
  • Tipos de medios remotos permitidos: Vídeo (Solo esta opción).
  • Esquemas URI permitidos: vimeo:// (Vimeo videos) y youtube:// (YouTube videos) .
  • Número de valores: 1.

Otro par de instantáneas de como deberían andar las cosas.

Galeia video Drupal 4

Galeria video Druapl 6

Si en estos momentos vamos a agregar contenido, ya tendremos un nuevo tipo de contenido con un aspecto similar a este.

Galeria video Drupal 6

Donde aparece el botón Seleccionar que es el que nos permitirá incluir el vinculo del vídeo tanto de youtube como de vimeo. Este vinculo lo obtenemos de la opción compartir en Youtube y de share en vimeo, os pongo la obtención de youtube y como insertarlo.

galeria video drupal 7

Galeria video Druapl 8

Ya lo único que nos falta es presentar el resultado de todo esto para que parezca una galería.

4 .- Creación de una vistas para la visualización de la galería de vídeos.
Creamos una vista para la visualización de la galería, no voy a entrar en el detalle de la creación de la vista, para eso os dejo una imagen, que como el resto de imágenes de esta publicación podéis ampliar haciendo doble click

Galeria video Drupal 9

Si que hay una particularidad que quiero resaltar, me refiero a la opción de formato, en la cual seleccione "Lista sin formato", y dentro de sus opciones puse "Clase de la fila = galeriavideos". Esto es una clase de CSS, con la que coloco los elementos en la forma y lugar que yo quiero, de tal forma que si la pantalla lo permite habrá tres columnas, pero si la pantalla es menor pondrá solo dos y llegado el caso solo una, vamos para que tenga un comportamiento Responsive o adaptativo. Esta clase debéis colocar en el archivo CSS de vuestro tema dedicado a las personalizaciones, en mi caso utilizo Omega y el archivo es global.css. Os dejo el código que yo he colocado.

.galeriavideos {
  /*Clase para la galeria de videos*/

  background-color: rgba(0, 0, 0, 0.7);
  margin: 3px;
  padding: 3px 3px 0px 3px;
  max-width: 250px;
  min-height: 218px;
  max-height: 218px;
  float: left;
}
.galeriavideos a {
  font-weight: bold;
  color: #fff;
}
.galeriavideos a:hover {
  color: #208520;
  text-decoration: none;
}

Bueno hasta aquí todo por el momento, la idea es hacer el vídeotutorial en cuanto pueda. Ya sabeis si os ha gustado tanto abajo como en el lateral derecho teneis opciones para compartirlo, likearlo y demás. Un saludo a todos.

Añadir nuevo comentario

CAPTCHA
Esta pregunta se hace para comprobar que es usted una persona real e impedir el envío automatizado de mensajes basura.
CAPTCHA de imagen
Introduzca los caracteres mostrados en la imagen.