Imagen propia en las entradas para cada autor del blog

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

A menudo me habían preguntado sobre la forma de añadir una imagen en alguna parte de la entrada que destacase al autor de la misma en un blog compartido, es decir, en un blog con más de un autor.

La verdad es que había hecho algunas pruebas modificando el código de la plantilla con escaso resultado, aunque me aproximaba un poco a lo que yo quería, el resultado no era del todo aceptable.

Hoy he encontrado en Oloblogger una forma de conseguir esto mismo sin grandes complicaciones mediante el uso de Javascript, y que aseguro personalmente que funciona, ya que como siempre lo he probado antes de publicarlo.

[1] Accedemos a nuestro panel de Blogger y en "Edición Html" localizamos el </head> de nuestra plantilla con las plantillas de artilugios expandidos.

Justo antes de eso mismo (</head>) colocamos este script:

<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>

Como veréis en el código Oloblogger ha construido el script figurando que hay tres autores en el blog: usuario1, usuario2 y usuario3.

Donde dice "imagenusuario1" iría colocada la url de la imagen que vamos a emplear para ese autor concreto y donde dice "usuario1" tendremos que poner el nombre que identifica a ese autor tal como lo escribimos en el blog, esto es muy importante, ya que si no no funcionará.

Haremos lo mismo para los demás autores.

[2] Una vez colocado y modificados los datos del script, tenemos que añadir esta porción de código en el lugar exacto donde vamos a mostrar la imagen de cada autor:

<script type='text/javascript'>

imagenautor("<data:post.author/>");

</script>

Vamos a ver algunos de los sitios de la plantilla donde Oloblogger nos recomienda su colocación y que hemos de localizar dentro del código de la plantilla con los artilugios expandidos:

...

<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>

...

Notas:

Seguramente si se deja el script tal como está y dependiendo mas que nada del tamaño de la imagen escogida para cada autor, esta no se mostraría de forma óptima respecto al texto cercano a ella, así que tendremos que darle "estilo" a las imágenes en el mismo script cambiando la línea de la imagen de cada autor:

imagenes[1] = "<img border='0' src='URLimagenusuario1'/>"

Por algo más o menos como esto:

imagenes[1] = "<img style='float:left;margin:10px 10px 0px 0px;" border='0' src='URLimagenusuario1'/>"

Donde la posición de la imagen, que en este caso es left (izquierda) puede cambiarse por right (derecha) y los valores del margen (margin:10px 10px 0px 0px;) pueden cambiarse por los que mas se aproximen al resultado que queremos conseguir.

Si además lo que queremos es sustituir la firma de las entradas por la imagen del autor (según los pasos anteriores la imagen saldría antes o después del nombre del autor), tendríamos que, después de seguir todos los pasos eliminar el <data:top.authorLabel/> del código y, por supuesto, incluir la url de las imagenes con la firma en el script.

...

<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>

...

Puedes crear una imagen para la firma de cada autor fácilmente en My Live Signature.

Entrada original en: Oloblogger

ElHackerZ