Una imagen distinta para cada autor | Oloblogger Enereo ha dejado un nuevo comentario en su entrada "Una imagen en todos los posts. Tengo un blo...

13 de septiembre de 2008

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

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

follow us in feedly

37 comentarios :

  1. Muchísimas gracias por el aporte, funciona perfectamente, aunque ay un pequeño fallo. Es simplemente que pone un "1" donde tendría que poner un "2" :

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

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

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


    Muchísimas gracias de nuevo

    ResponderEliminar
  2. Corregido Enereo. Me alegro de que lo hayas podido aplicar.

    ResponderEliminar
  3. Hola de nuevo Oloman! Últimamente estoy preguntón, y es que me estoy empapando con todo esto y claro...surgen dudas. Como el blog que tengo no es sólo mio, sino que es de mi grupo de amigos había pensado meter esto que enseñabas aquí, pero pensando en el lugar dónde colocar la imagen se me ha ocurrido otra posibilidad que llevo un par de días intentando conseguir, pero que no doy en el clavo...

    Había pensado hacer imágenes alargadas, que cada uno se la personalice, y ponerla justo a la altura del título del post, pero alineada a la derecha, que como el título está a la izquierda, pienso que ayudaría a cuadrar las entradas.

    Pero ya te digo, no lo consigo de ninguna manera, no se si tengo que crear un div class y luego definirlo en css, o simplemente alinear la imágen... :-S En fin, como puedes ver ando algo confuso, aunque igual ni siquiera puede hacerse...nusep.

    En cualquier caso, muchas gracias por tu ayuda de nuevo!

    ResponderEliminar
  4. Hola Agustín. Por lo que me ha parecido ver, el script para mostrar la imagen, lo pones después de "post-header-line-1". En lugar de eso, justo antes tienes algo parecido a <h3 class='post-title entry-title'>...</h3>

    Tienes que insertar el codigo delante del </h3> para que salga a continuación del título.

    Como se introduce un salto de línea, en cada imagen del array (explicado en esta entrada en primer lugar), tendrás que añadir una etiqueta STYLE con un margen superior negativo y que así "suba" la imagen. Cada imagen almacenada te debería quedar más o menos así:

    imagenes[1] = "<img border='0' style="display:block;float:right;margin:-20px 0px 0px 10px;"...

    Es una chapucilla, pero funciona. Un saludo.

    ResponderEliminar
  5. :-) Muchas gracias Oloman!! Es justo lo que necesitaba!


    Saludos!!

    ResponderEliminar
  6. Hola, lo implemente y sale muy bien.
    Pero cuando le fui a agregar fotos, el codigo donde estan las comillas se cambiaron todas en " y ya deja de funcionar. Como puedo evitar que cada vez que edite la plantilla de blogger me aparezcan en ese codigo de als fotos segun el autor esta odiosa "

    ResponderEliminar
  7. No explicas muy bien dónde se te cambian las comillas, pero prueba a poner la expresión &quot; en lugar de las " a ver si con eso se te soluciona. Es que en los últimos tiempos, a la plantilla blogger se le atragantan las susodichas.

    ResponderEliminar
  8. Hola oloman, tengo un problemilla... la imagen la he puesto justo a la derecha del título de la entrada. El problema es que el título de esta me queda demasíado para abajo. Me gustaría que quedara más para arriba... te dejo el link del blog: http://www.pollomuerto.blogspot.com y a ver si me puedes decir que tengo que tocar del html para subirlo. Gracias,

    Pollomuerto.

    PD: Para más info, el script lo he puesto entre < h3 class='post-title' > y < b:if cond='data:post.url' >

    ResponderEliminar
  9. Hola Pollomuerto.

    Al almacenar las imágenes en la matriz, también se pueden incorporar atributos de estilo.

    En tu caso, tienes líneas del tipo
    imagenes[1] = "<img border='0' src='http://www1.picturepush.com/photo/a/1220364/1024/Picture-Box/imagen-autor-pollo.jpg'/>"

    Añade un
    style='display:block;float:left;'
    dentro del IMG.

    Creo que con eso se te solucionará el tema.

    ResponderEliminar
  10. Gracias lo he solucionado, pero no me acaba de convencer. Lo que realmente me gustaría es que la imagen se quedara donde está, por que aparte de no molestar la entrada, el fondo de esta ( el degradado superior) se ve entero. Entonces el tema sería subir el título del post, para que quede alineado con la imagen, no se si es posible.

    Gracias.

    ResponderEliminar
  11. Ya está Oloman, aa lo he solucionado. He añadido la fecha y el autor debajo del título, y ahora queda perfecto.

    Un saludo!

    ResponderEliminar
  12. ¡¡Muchas gracias, me ha sido de mucha ayuda!!

    ResponderEliminar
  13. Hola me gustaria que me ayudaras con un asunto, me gusta mucho el menu que tines en la parte de arriba y quisieras que me ayudaras con uno, con buscador y todo.
    Te lo agradeceria.

    ResponderEliminar
  14. Yurika, me vas a perdonar que deje ese tema para después del verano. Es un poco largo de explicar y estoy a punto de empezar las vacaciones. Prometo que lo haré, pero más adelante.

    De momento, si quieres puedes experimentar instalando el widget de búsqueda de Blogger. Luego, deberías crear una clase para colocar el cuadro de búsqueda en una posición determinada (explicación de cómo se hace esto aquí) y cologar el gadget rodeado de esa clase.

    Con respecto al menú, se posiciona de la misma manera y luego sólo hay que hacer dos dibujos, uno para la posición normal de la pestaña y otro para la pestaña desplegada. Aquí te puedes guiar un poco sobre cómo montar eso.

    ResponderEliminar
  15. Hola Oloman

    Aplique el truco y me funciono al la perfección, lo único es que encontré un problema, como hago para que en el nombre del autor este el link a el perfil, ya que no sale, y no de como hacerlo???

    ResponderEliminar
  16. Hola Yurika
    De igual manera que puedes aplicar estilo a las imágenes, puedes incorporar un enlace a cada elemento del array.
    imagenes[1] = "<a href='ENLACE_usuario1'><img border='0' src='URLimagenusuario1'/></a>"
    Sinceramente, no lo he probado pero estoy casi seguro de que funcionará. Hay otras maneras usando las etiquetas DATA de Blogger, pero sería más complicado de explicar y aplicar.

    ResponderEliminar
  17. Pues lo intente pero se descuadró todo, es decir, cambio todo de sitio a como lo tenia.
    No habra otra forma T_T

    ResponderEliminar
  18. ¿Podrías ponerlo provisionalmente un rato que lo viera?

    ResponderEliminar
  19. Bueno lo dejo en el blog de pruebas para no dañar el fijo
    http://dinamodeprueba.blogspot.com/

    se nota la diferencia

    ResponderEliminar
  20. ¿Puedes añadir más enlaces (a dónde sea) para los otros usuarios? Parece que sólo ocurre con el primero y si es así, quizás se sólo cuestión de poner un
    <div style='clear:both;'></div>
    antes de los títulos h3 (h3 post-title) en la parte HTML.

    De todas formas, te falta un punto y coma detrás de todos los WIDTH de tu script y también podría afectar eso.

    ResponderEliminar
  21. Bueno ya le puse el link a otro y como ves también descuadró todo, también puse el punto y coma, y no cambio nada.
    Me podrías explicar mejor lo del clear:both, no entendí muy bien como hacer ese paso.

    Muchas gracias por la ayuda

    ResponderEliminar
  22. Vamos a probar cosas... Si el título antes te salía bien, el problema debe de estar simplemente en el estilo del enlace, por lo que para no repasar todo el css, lo más rápido es colocar también esto...
    style='display:block;float:left;margin:-55px 0px 0px 10px;width: 48px;
    ...en el A HREF.

    De todas formas creo que el problema está en el display:block, que te mete un salto de línea antes y después de dónde esté. Si es eso, lo que no sé es por qué antes no daba la lata.

    ResponderEliminar
  23. Por fin, hice lo que me dijiste y funciono, al final quedo así

    <a href='URL_Perfil' style='float:left;margin:-115px -60px 0px -50px;'><img border='0' src='URL_Imagen' width='48'/></a>

    No sabes como te lo agradezco, eres mi salvador

    ResponderEliminar
  24. Quiero agradecerte por este post (funciona como la gloria, la verdad) y por el blog entero que descubrí gracias a Vagabundia.

    Te quiero trasladar la pregunta que hice en ese blog, a ver si, abusando de tu confianza, se te ocurre alguna solución. Queríamos saber si, en un blog multiautor, hay alguna manera de seleccionar los posts por Autor al modo en que se seleccionan por etiquetas, pero sin crear una etiqueta por cada autor. Por ejemplo, si yo quiero asignar un link a un botón que me lleve a todos los artículos relacionados con un label determinado (en este caso "tecnologí­a"), escribo lo siguiente "href='http://nombredelblog.blogspot.com/search/label/tecnologia' title='TECNOLOGIA'>TECNOLOGIA" usando los consabidos tag markers "< a >" y < / a >", para abrir y cerrar el comando. Existe algo parecido que en lugar de usar "label" use "author" o algo así? La idea seria asignar el link en la misma foto del autor que aparece junto al post gracias a tus tips, y en un índice de autores en la barra lateral.

    Gracias, de antemano, por tu tiempo y tu paciencia.

    ResponderEliminar
  25. Hola Adicto al Conocimiento.

    De la manera que propones, es decir, con una dirección de feed, no sé si es posible sacar todas las entradas de un mismo autor.

    Sin embargo se me ocurren un par de ideas para mostrar los últimos n posts de cada autor, aunque por otro lado, actualmente no dispongo casi de tiempo para conectarme y experimentar.

    No sé siquiera si esto último podrá servirte para lo que quieres, pero me lo apunto (en mi larga lista) para verlo.

    Saludos.

    ResponderEliminar
  26. Es interesante saber que se pueden realizar cambios de esa mgnitud en blogger. Yo estaba pensando que cada autor pueda tener su propio codigo de Adsense... mmm vamos a ver si se puede,

    ResponderEliminar
  27. hola, oye una pregunta, quiero que aparesca centrada la imagen debajo del titulo, pero me aparese cargada ala izquierda, ya centre el titulo de las entradas,pero aun asi sigue aparesiendo la imagen en la izquierda, me pudieras ayudar con eso, gracias

    ResponderEliminar
  28. <div style='margin:0px auto;width:200px;'>
    <script type='text/javascript'>
    imagenautor("<data:post.author/>");
    </script>
    </div>

    Sólo tienes que cambiar el ancho (200px) por el que te venga bien a tí.

    ResponderEliminar
  29. Hola Oloman, hace eso de una semana encontré su blog mientras buscaba trucos y déjeme decirle que me enamoré del contenido *.* me ha sacado varias dudas con sus tutoriales ^^!!

    Ahora solo tengo un problemita con este, funciona de marabilla en la página principal, pero cuando accedo a una entrada, la imágen del autor desaparece =/

    ¿Hay algo que hice mal o el código está definido de esa manera?

    PD: Puede ver el problema en este blog de pruebas: http://asconfessions.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Este código sólo sustituye el nombre del autor por una imagen. Por tanto, si no se ve el nombre del autor, tampoco se verá la imagen. Eso es lo que observo en tu blog. Por cierto que ahora mismo no tienes puesto esto.

      Eliminar
  30. Un groso Oloman.

    Se puede usar la misma lógica (del jscript) pero en vez de que la variable sea el nombre del autor, sea el nombre de las etiquetas (labels) de blogger?

    Sé que los blogs que tienen muchas etiquetas podrían estar en problemas, pero las etiquetas definidas en la lógica del js, cuando aparezcan y las encuentre, podría mostrar una imagen correspondiente a cada etiqueta.

    ¿Se podría o me estoy fumando?

    ResponderEliminar
  31. Respuestas
    1. Ambos enlaces apuntan a la misma entrada.

      Error de tipeo creo °.°
      De todas formas muchas gracias

      Eliminar
    2. Esta vez no fallo. Esta era la otra:
      http://www.oloblogger.com/2009/03/distintos-estilos-para-cada-etiqueta-o.html

      Eliminar
    3. Jajjaja, perfecto amigo! Me viene de 10, porq estaba empezando a soñar con el tema de que en vez de hacer variable la imagen distinta respecto al autor, hacerlo respecto a una etiqueta (label)

      Y en ese artículo está la clave!

      Un abrazo!!!

      Eliminar
  32. podrias ayudarme yo solo quiero cambiar el numbre del autor sin link de perfil es decir quiero poner el nombre de mi sitio pero sin link del autor

    ResponderEliminar
  33. Hola JcDuranM. No entiendo muy bien qué quieres hacer ¿Poner el nombre de autor o el nombre de tu sitio? ¿Y dónde?

    ResponderEliminar