Cómo agregar un slider de imágenes en Moodle

Una imagen vale más que mil palabras, este dicho es una gran verdad. Siguiendo esta máxima te enseñaré en este post como agregar un carrusel o slider de imágenes en Moodle. Esta ves lo haremos de la manera fácil 😆 usando el plugin Slideshow.

¿Qué es un slideshow o carrusel de imágenes?

Si has visto esas imágenes grandes en las páginas web que van pasando una a una en un tiempo limitado (no más de algunos segundos), pues eso es un slideshow o carrusel de imágenes como también se le llama.

Es un elemento de diseño muy utilizado, amado por unos y odiados por otros.

Como ventaja podemos decir que puede ser usado para mostrar la oferta de productos o servicios que tenemos en una web, en el caso de Moodle sirve: para destacar cursos que queramos promocionar, eventos, recordatorios de inscripción, llamados a la acción, entre muchas otras utilidades.

Sus detractores afirman:

• Es un elemento distractor de nuestra página web.
• Una sola imagen estática es suficiente.
• Nadie llega a ver ni siguiera la última imagen del slider.
• Recarga las páginas con pesadas imágenes.

En mi opinión es un poderoso elemento de diseño que debe ser usado sin abusar, siempre que no usemos más de tres o cuatro slider y el diseño de las imágenes sea realmente atractivo e impactante.

Descargas necesarias

Para esta guía usaremos el plugin Slideshow, el cual incluye entre sus funcionalidades:

• Podemos definir el alto del carrusel.
• Definir  la ubicación del plugin.
• Diferentes efectos de transición.
• El color del fondo lo podemos añadir de manera sencilla.

Instalando el plugin de slider de imágenes en Moodle

Si leíste el tutorial que te dejé en el recuadro anterior, verás que es muy sencillo. Te dejo el resumen por si te da flojera 😅 leerlo completo:

1. Descárgalo en tu computadora primero.
2. Logueate como administrador, y ahora vamos al bloque de administración en: Administración del sitio > Extensiones > Instalar módulos externos.
3. Ve a la carpeta donde descargarte el plugin: arrastra y suélta el archivo ZIP en el navegador (en la página de Instalar módulos externos), en el recuadro que pone: Puede arrastrar y soltar archivos aquí para añadirlos.
4. Le damos al botón azul que pone: Instalar modulo externo desde archivo ZIP.
5. Seguimos las instrucciones de las pantallas siguientes, que básicamente es continuar.
6. La última pantalla nos pedirá definir el máximo número de imágenes que tendrá el slider y el tamaño máximo de las imágenes.

Configurando el plugin

En cuanto tengamos instalado en plugin, si quisiéramos modificar la configuración global iremos a Administración del sitio > Extensiones > Bloques > Slideshow.

En esta guía vamos a colocar el slidershow en la página principal del Moodle. Iremos a la página principal y activamos la edición.

Agregamos ahora el slider en el bloque: agregar un bloque, selecciona Slideshow del menú desplegable.

El bloque aparecerá en la parte de arriba, en una franja de color negro, dale clic a la rueda dentada que aparece en la parte derecha y luego clic a la opción: Configurar bloque Slideshow.

Opciones del plugin

En esta pantalla tenemos las opciones para subir las imágenes y configurar como queremos que se muestren, te las detallo:

• Title: podemos colocar un título al slider, por lo general yo no lo hago, lo dejo en blanco.
• Slideshow Height: alto de la imagen en pixeles. Si quieres que respete el tamaño de la imagen que subiste déjalo en blanco. Yo procuro que todas la imágenes tengan el mismo tamaño tanto en alto como por ancho; le da homogeneidad, y se ven mejor.
• Transition: el efecto de transición que quieres tenga el carrusel. Pruébalos todos a ver cuál te gusta.
• Display time: cuanto tiempo (segundos) quieres que se pare la imagen entre cada diapositiva.
• Transitions Speed: los segundos que durará el efecto de transición entre cada diapositiva, mientras más segundos más lenta irá.
• Background color: el color de fondo en formato RGB que muestra el slider . Por lo general lo dejo trasparente con el check que aparece debajo.
• Transparent: selecciona esta opción si quieres que el fondo del bloque no muestre ningún color.
• Display as Block: el slider se muestra en los bloques clásicos de Moodle: izquierda, derecha, etc.
• Imágenes: aquí puedes arrastrar y soltar las imágenes que se verán en el carrusel.

Existen dos apartados más con opciones adicionales: Dónde aparece este bloque y En esta página. Sus opciones son bastante descriptivas, te dejo a ti 💡 que pruebes si te interesan.

Agregando personalización

Como yo soy un perfeccionista 😎, agrego este CSS adicional para darle mejor estilo a este bloque. Le quito el borde que aparece alrededor y un espacio con los otros bloques en la parte de abajo. Es opcional agregarlo, si te gusta como se ve por defecto, pues no toques nada.

Te recomiendo dos formas para agregar el código CSS:

• Casi todos los temas tienen en el panel de administración: Administración del sitio > Apariencia > Temas > nombredeltema una manera de agregar CSS personalizado.
  En el caso del tema Clean está en Administración del sitio > Apariencia > Temas > Clean, el recuadro que pone: CSS personalizado.
• Si tu tema no posee una manera de hacerlo por el panel de administración, por FTP busca el archivo de estilo CSS en la instalación de Moodle que por lo general es: css.
  El archivo custom.css se encuentra casi siempre en la carpeta: theme > nombredeltema > style.
  Bájalo en tu computadora, modifícalo con algún editor de texto plano agregando el código que te dejo (ponlo al final del archivo). Esta guía puede serte útil.
  Luego súbelo nuevamente reescribiendo el antiguo archivo CSS. (No olvides hacer una copia de seguridad del custom.css antes de hacer cualquier cambio)

El código de estilo a agregar:

.block_slideshow {
padding-bottom: 20px ;
box-shadow: none;
}

Te dejo el resultado final de cómo debería quedar. Espero tus comentarios 😃.