Una imagen distinta para cada autor

Enereo ha dejado un nuevo comentario en su entrada "Una imagen en todos los posts.

Tengo un blog compartido y me gustaría que al comienzo de cada entrada saliera una imagen dependiendo del autor que ha realizado esa entrada. Es como una forma de identificarlo previamente.

Esta cuestión nos ha dado un poco de guerra, pero no por su dificultad, sino por nuestro desconocimiento de la sintaxis del javascript. Se podría haber hecho con sentencias if anidadas directamente en la parte HTML de la plantilla, pero el sistema propuesto nos parece más elegante y más fácil de mantener cuando haya cambios de usuarios y/o de imágenes. También permite que sea más fácil colocar la imagen en cualquier parte de nuestra plantilla Blogspot.

Editamos nuestra plantilla con los artilugios expandidos y empezamos por el script. Buscamos el </head> de nuestra plantilla y justo antes insertamos...

<!-- IMAGENES POR AUTOR -->
<script type='text/javascript'>
function imagenautor(usuario) {
imagenes = new Array()
imagenes[0] = ""
imagenes[1] = "<img border='0' src='URLimagenusuario1'/>"
imagenes[2] = "<img border='0' src='URLimagenusuario2'/>"
imagenes[3] = "<img border='0' src='URLimagenusuario3'/>"

if (usuario == "usuario1")
{document.write(imagenes[1]);}

if (usuario == "usuario2")
{document.write(imagenes[2]);}

if (usuario == "usuario3")
{document.write(imagenes[3]);}

}
</script>

URLimagenusuarioX: La dirección de la imagen correspondiente al usuario X
usuarioX: El nombre del autor correspondiente. Ojo con las mayúsculas/minúsculas porque son importantes para que el script "reconozca" el nombre.

Ahora que tenemos esta instalada esta utilidad, sólo queda decidir dónque queremos colocar la imagen. En el sitio deseado hay que insertar...

<script type='text/javascript'>
imagenautor("<data:post.author/>");
</script>

Ideas sobre dónde se puede colocar:

...
<div class='post-header-line-1'>
AQUI --> Justo debajo del título de la entrada
</div>
<div class='post-body entry-content'>
AQUI --> Una línea antes del principio de la información de la entrada
<p>AQUI(*) --> En línea con la información de la entrada
<data:post.body/></p>
...

<div class='post-footer-line post-footer-line-3'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
AQUI(*) --> Justo antes del nombre del autor
<data:top.authorLabel/>
AQUI(*) --> Justo después del nombre del autor
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</div>

(*) Las opciones marcadas probablemente necesiten una modificación del script para que se muestren correctamente con el texto circundante. En concreto hay que modificar las líneas que corresponden al array de imágenes para incorporar código de formato CSS mediante un STYLE.

Así es una línea original
imagenes[1] = "<img border='0' src='URLimagenusuario1'/>"

Y así habría que dejarla
imagenes[1] = "<img style='float:left;margin:10px 10px 0px 0px;" border='0' src='URLimagenusuario1'/>"

Los valores de los márgenes y la lateralidad (right-left) se pueden cambiar sin problemas.

Quizás una buena idea de diseño, sea sustituir el nombre en texto de un autor, por la imagen de su nombre. Para ello, primero crea una imagen que sea la firma del autor y alójala. Ahora fíjate en el segundo bloque de código que se ofrece para IDEAS sobre dónde colocar el script. Coloca la imagen en alguno de los AQUI y elimina <data:top.authorLabel/>. De esta manera sólo aparecerá la imagen creada. Esto también es válido para las otras opciones.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter