Importante
Este tutorial funcionara perfectamente hasta la versión 3.1.x de Moodle. Si tienes una versión superior de Moodle no funcionara, ya que desde el 2016 no ha sido actualizado el plugin.
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.
Tabla de contenidos
¿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.
Nota
En esta guía usaré el tema Clean como ejemplo. Si no sabes cómo instalar plugins, este tutorial mío te servirá.
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:
- Descárgalo en tu computadora primero.
- Logueate como administrador, y ahora vamos al bloque de administración en: Administración del sitio > Extensiones > Instalar módulos externos.
- 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.
- Le damos al botón azul que pone: Instalar modulo externo desde archivo ZIP.
- Seguimos las instrucciones de las pantallas siguientes, que básicamente es continuar.
- 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.
Dato
Si al intentar ir a la página principal siempre te lleva al área personal (subdominio “my”), puedes modificarlo en: Administración del sitio > Apariencia > Navegación, cambia área persona por sitio en la opción Página de inicio predeterminada para los usuario, guarda los cambios.
Podemos poner el slider en cualquier página que quemaros en el Moodle, sólo con activar la edición de bloques donde deseemos insertarlo.
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 !important;
box-shadow: none;
}Nota
Si no ves los cambios, ve a Administración del sitio > Apariencia > Temas > Ajustes de temas y selecciona la opción Modo de diseño de temas y guarda los cambios. Desactiva esta opción en cuanto veas las modificaciones, no es recomendable dejarla activa en sitios en producción.
Te dejo el resultado final de cómo debería quedar. Espero tus comentarios 😃.
Buenos días, muy buen tutorial me ha ayudado mucho, sin embargo no he podido configurarlo bien ya que mi slideshow me aparece en la parte derecha de la pantalla totalmente fuera de linea y no puedo editar ni cambiar las imagenes ni mover el bloque, como mover las imagenes para que se asemeje como a tu imagen de tu moodle.
Gracias.
Saludos Axel. Es difícil darte una opinión de la razón sin haberlo visto. Parece un problema con la ubicación del bloque del slider; intenta crearlo en otra parte de la portada a ver si se muestra igual. Si quieres me pasas el link para poder echarle un vistazo.
Buenas tardes Diogenes;
Estoy instalando el plugin de slideshow, pero tengo una duda que ya lo instale y todo, pero ahora quiero, ponerlo en marcha, ya me dirigi a agregar bloque y no me aparece el de el plugin slideshow.
Saludos.
Me alegra leerte Sebastian 🙂 . Este plugin debería funcionar sin problemas con mis instrucciones. Si tienes una versión de Moodle superior a la 3.1 (3.2 o 3.3) no va a funcionar, ya que el plugin no ha sido actualizado desde el 2016. Esperemos que pronto actualicen este interesante plugin.
Buenos dias;
Nuevamente sobre el slideshow ya lo instale y ya me funciono, solo que quisiera saber si cada imagen la podria enlazar con otra pagina.
saludos.
Una de las desventajas que tiene este plugin es que no permite agregar enlaces a las imágenes, lo cual es una limitante 😕 .
Con respecto a tu pregunta anterior sobre como ajustar el tamaño del bloque: el alto (Height) lo defines dentro de la configuración del plugin como aparece en la guía, con respecto al ancho lo mas sencillo es que tu imagen tenga el tamaño que deseas; otra forma seria agregar la propiedad css width, al código que te muestro en la guía.
Por ejemplo: si quieres un ancho de 1000px, quedaría así:
.block_slideshow {padding-bottom: 20px !important;
box-shadow: none;
width: 1000px;
}
Espero te sirva. Saludos.
buenas tardes . TE molesto para preguntarte si es posible que aparezca el «Slideshow de Tema Essential» en la primera página de moodle. La página en donde se debe colocar el usuario y la contraseña??. Mucha gracias por tu atención.
Hola Mariana. Si te refieres a colocar un slider en la pagina de login forzado, no lo he intentado nunca. Para promocionar cursos (si es tu objetivo) es preferible dejar el Moodle abierto (es decir sin login).
Muchas gracias por el aporte, me funcionó como quería. Pero tengo una pregunta: Viendo la imagen del resultado, veo que tienes las categorías en forma de Grilla; como hiciste eso?, es que solo lo puedo hacer para la vista de cursos pero no para categorías. Podrías explicarme?, gracias!!!!!
Hola Johanna. En esta guía lo explico. Saludos