Uno de nuestros clientes (La Universidad Pablo de Olavide) nos pidió, si era posible, que la página de login de su campus cambiase de imagen de fondo cada cierto tiempo, o con cada click.... despues de darle bastantes vueltas, he encontrado la forma de hacerlo. Y encima es fácil.
Lo primero, subir las imágenes al servidor de Blackboard. Como este cliente utiliza una marca personalizada, las he subido junto con el tema. Si teneis Content, podeis subirlas también a algún directorio de content. Lo importante es que estén en el servidor de Blackboard, y que se pueda acceder a ellas sin estar logado.
Luego, editamos la página de login. Para ello, descargaremos la página de login por defecto login.jsp y la abriremos con un editor (tipo Kate, o Notepad+).
Localizaremos la etiqueta <bbNG:jsBlock> y añadiremos esto:
//cambiar la imagen de fondo cada vez que se carga la página de login
function ChangeBackground()
{
var images = ['login_bg01','login_bg02','login_bg03','login_bg04','login_bg05',
'login_bg06','login_bg07','login_bg08','login_bg09','login_bg10','login_bg11',
'login_bg12','login_bg13','login_bg14','login_bg15'];
document.body.style.backgroundImage="url('/branding/themes/upo-custom/images/"
+ images[Math.floor(Math.random() * images.length)] + ".jpg')";
}
ChangeBackground();
</script>
Tendréis que ajustar el script para que los nombres de las imágenes sean correctos. Mis imágenes se llaman login_bg01.jpg, login_bg02.jpg... login_bg15.jpg y están alojadas en el theme de la UPO (upo-custom).
Y ahora, guardamos y subimos la página de login como página personalizada.
Mirad el efecto: https://upo.elearningmedia.es si recargáis la página, la imagen cambiará. Por cierto, esa página tiene muchas otras personalizaciones.... este código que publicamos aquí hoy sólo coloca la imagen de fondo. Si quieres ver cómo editar la página de login o crear una marca personalizada en más profundidad, podéis visitar esta Guía para la creación de temas en Bb Learn
Comentarios (0)
Leave a comment