Widget de imágenes aleatorias

Widget de imágenes aleatorias Widget de imágenes aleatorias

Demostración

Hace tiempo compartí un código escrito en javascript que desarrollé para mi articulo Header aleatorio con vanilla javascript. Pues bien, se me ocurrió convertirlo en widget, con el fin de que sea más sencillo modificar imágenes y desde el panel de administración de Blogger. La función del código es la misma, lo que cambia es la forma de implementarlo y editarlo.


Instalar

Vamos a ir nuestra administración en Blogger, nos dirigimos la ruta Temas > Personalizar > Opciones avanzadas > CSS Personalizado. Probablemente ya tengamos código aquí, lo único que debemos hacer es agregar al final el siguiente código css:


/*!
* Widget: Imagen Aleatoria v1.0.0
* by zkreations
*/
/*Reset*/
header #TextList90,
header #TextList90 .widget-content{margin:0;padding:0;background:0 0}
header #TextList90>h2{display:none}
/*
=> Personalizacion
*/
/*Modo Header*/
.headCover__random {
    background-size: cover;
    background-color: #0e1519; /* Color del fondo */
    background-position: center top; /* Posicion del fondo */
    min-height: 200px; /* Alto del fondo */
    width: 100%; /* Ancho */
}
/*Modo Imagen*/
.headCover__random--img {
    max-width: 100%; /* Ancho maximo */
}

Presiona el botón "Aplicar" para guardar los cambios y luego nos iremos a Temas > Editar HTML. Ya dentro del editor de código pulsamos CTRL + F y buscamos </b:section>. Nos saldrán varios, elegimos cualquiera y arriba de eso pegamos lo siguiente:


<b:widget id='TextList90' locked='false' title='Imagen aleatoria' type='TextList'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
         <b:tag name='img' cond='data:title contains "Imagen"' class='headCover__random--img' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
         <b:tag name='div' cond='data:title contains "Header"' class='headCover__random'/>
         <script>
            var fondos = [<b:loop values='data:items' var='item'>"<data:item/>",</b:loop>],//<![CDATA[
            random = Math.floor(Math.random() * fondos.length),
            image = document.querySelector(".headCover__random--img"),
            background = document.querySelector(".headCover__random");
            null!==background?background.style.backgroundImage="url("+fondos[random]+")":image.src=fondos[random];
         //]]></script>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. Hemos finalizado con la instalación del widget de imágenes aleatorias.


Agregar imagenes

El widget solo será visible si tenemos al menos un elemento en la lista. Para agregar elementos iremos a la sección "Diseño" y editamos el widget "Imagen aleatoria", lo que nos mostrará lo siguiente:


widget imagen aleatoria

En el campo "Agregar elemento de la lista" pegaremos la url de nuestra imagen, posteriormente presionamos el botón "Agregar elemento". Esto lo repetimos para agregar todas las imágenes que queramos:


widget imagen aleatoria

Por último presionamos el botón "Guardar" y listo, el widget mostrará una imagen al azar, cada vez que se actualice la página.


Opciones

Título - El widget por defecto lleva de título "Imagen aleatoria", si cambiamos "Imagen" por "Header" el widget generará una etiqueta div manejable desde css. Es decir, el resultado en el código fuente es este:


<div class='headCover__random'></div>

Por otro lado, si cambiamo o mantenemos en el titulo la palabra "Imagen", el widget generará una etiqueta img que en el código fuente se mostrará así:


<img class='headCover__random--img' src='data:image/gif;base64,R0...Ow=='/>

Header - Si posicionas el widget en la sección "Header" de tu plantilla, se integrará ocupando el espacio disponible, eliminando el título y los espacios del contenedor.


Muchos no le darán importancia a estas cualidades, pero si tienes creatividad, puedes ser capaz de modificar el aspecto de tu plantilla.


Eso ha sido todo. Si tienes alguna duda déjala en los comentarios, respondo a todos. No olvides compartir este articulo, ya que ayudarás a más personas que estén buscando algo similar y además es algo que siempre agradezco mucho.