Personalizar avatares comentaristas | Oloblogger Como vimos, otra vez funciona cómo es debido el artilugio de los avatares de los comentaristas de Blogger. Hace tiempo que quería usarlo y ...

20 de septiembre de 2009

Personalizar avatares comentaristas

Como vimos, otra vez funciona cómo es debido el artilugio de los avatares de los comentaristas de Blogger. Hace tiempo que quería usarlo y lo reinstalé, pero para variar, me encontré con el primer problema. Lo cierto es que es un problema menor pero si se puede solucionar ¿por qué no hacerlo?

El caso es que cuando un comentario se produce en anónimo el sistema coloca una imagen sin contenido y el hueco que queda no me gustaba. Por otra parte, yo he cambiado de avatar un par de veces y resulta que los comentarios se graban con el avatar que tenía en cada momento. Como en mi propio blog queda raro que haya comentarios míos con distintos dibujitos, he aprovechado para forzar la impresión de un avatar concreto.

No he podido resolver todos los casos, porque falta por solucionar el tema del hueco para cuando el usuario se identifica con nick+URL. Ahí sigue saliendo, ya que el código propuesto identifica al anónimo precisamente por su ausencia de URL y en este caso, si hay URL. Lo he intentado con la etiqueta data:comment.authorClass que nos descubrió Vagabundia en su post sobre cómo identificar a los autores de los comentarios, pero no he conseguido que saque resultados en esta parte. Espero que una vez lanzada la idea, alguien encuentre una DATA para poder identificar a este tipo de usuarios. Si es así, los comentarios están abiertos. (Actualización al final)

Colocando unos pocos condicionales se puede arreglar todo esto... y a eso vamos.

Localizamos las líneas que comprueban si hemos activado que se vean las imágenes en perfiles...

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

...y se sustituyen por estas otras.
<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- Personalizar avatar -->
<!-- si el autor ha grabado alguna URL -->
<b:if cond='data:comment.authorUrl'>
<!-- mis propios comentarios -->
<b:if cond='data:comment.author == &quot;TUNOMBRE&quot;'>
<span class='avatar-image-container'><img src='URL_IMAGEN_PROPIA'/></span>
<b:else/>
<!-- cualquier comentarista con URL -->
<data:comment.authorAvatarImage/>
</b:if>
<!-- no hay URL -->
<b:else/>
<!-- anónimo -->
<span class='avatar-image-container'><img src='URL_IMAGEN_ANONIMOS'/></span>
</b:if>
</b:if>
En el propio código y mediante comentarios, podeis ver qué hace cada parte. En negrita, lo que teneis necesariamente que cambiar, vuestro nick, vuestra imagen y la imagen para usuarios anónimos. Si no se desea personalizar el propio avatar, entonces simplemente borrar las líneas marcadas en verde.

Si sois varios autores, al contrario. Habrá que añadir más condicionales para distinguir a las diferentes personas con el suyo propio, aunque personalmente, en este último caso, lo que a mí me parece más práctico es dejar el avatar actual de cada uno para no complicar mucho el código.


Otra cosilla. Si el avatar os parece muy pequeño, se queda pegado al nombre del autor o quereis por ejemplo, colocarle un borde, podeis incorporar las siguientes clases antes del /skin y redactar las propiedades que os gusten.

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Ojo con el tamaño, porque si lo haceis muy grande, se puede distorsionar demasiado la imagen.


Actualización: Para que en todos los casos se vea una imagen y no un hueco, es necesaro añadir

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_IMAGEN_RESTO DE CASOS) transparent no-repeat 50% 50%;}

Esa es la clase que controla los avatares para los casos que no se contemplaban en el código facilitado aquí. Al asignar una imagen de fondo, cuando no hay ninguna, se verá la susodicha. Una vez más, la pista nos la dió Vagabundia.

¿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

57 comentarios :

  1. Oloman,ke tal?

    Tengo una pregunta, se puede saber quienes son tus seguidores anonimos?

    Sbes que me puse de seguidora yo misma en un blog de pruebas ke tengo el caso es que en en el wadget de seguidores al final aparece un link que dice "Invitar Amigos" me meti y encontre imagenes de personas que no se quienes son, y que no aparecen en mi lista de seguidores, tambien aparecen mis seguidores que a su vez yo tambien soy seguidora de sus blogs, por eso me sake de onda...kienes seran esas misteriosas figuras ke aparecen ahi...?

    Si sabes o alguien sabes ke rollo con eso se lo agradezco....

    Gracias Oloman....

    ResponderEliminar
  2. jajaja me encanta la imagen ke pusiste como icono para los misteriosos anonimos....esta bien KuRaDa....!

    ResponderEliminar
  3. Oye otro comentario...

    soy el mismo anonimo jajaja, cuando crezca kiero ser como tu...donde aprendiste tanto???

    gracias

    ResponderEliminar
  4. Me gustaría que me enlazases, yo te voy a enlazar a ti en mi blogroll, mi blog es http://laplataformaazul.blogspot.com

    ResponderEliminar
  5. Explicas muy bien cómo hacer las cosas raras del HTML, jajaja
    Por eso te voté en 20 muinutos y te he votado en Bitácoras.
    Saludos

    ResponderEliminar
  6. Anonimo, no controlo ese gadget de seguidores, pero de todas formas si sé que está totalmente relacionado con la aplicación Google Friends, una especie de red de amigos. ¿Te suena MSN, Windows LIve, Tuenti, Facebook...? Pues ni siquiera lo he visto, pero algo al estilo. Supongo que la opcion de invitar a amigos es precisamente para que la gente interactue más entre ellos aunque a priiori no se conozcan.
    El avatar anónimo, estaba en la Red. Aunque está retocada, no la diseñé yo, pero sí, es graciosa.
    Y con respecto a la última pregunta, todo lo que sé lo he aprendido aquí, en internet; buscando, probando, equivocándome, volviendo a probar... Y no pienses que tengo un nivel muy alto. Quizás simplemente esté un poquito por encima de la media.

    Raúl, no intercambio enlaces. Lo siento. Verás que sólo tengo abajo a la izquierda mis chuletas de cabecera (y las vuestras).

    Gracias Joselop. Es un gusto que la gente te diga cosas de ese tipo. Lo cierto es que siempre intento expresar las cosas lo más fácil posible... aunque no siempre me sale.

    ResponderEliminar
  7. Hola Oloman leyendo el comentario que puso Raul, te queria decir que yo ya te abia enlanzado a mi blog sin esperar nada desde hace como 4 meses jaja si quieres verlo, mi blog es: http://tododepsp.blogspot.com hasta abajo dice:
    Plantilla: Zona Cerebral
    Diseño: Oloblogger
    Editado de Plantilla y Diseño: jU@|\| kR|0$

    Donde dice Oloblogger, enlaza a este blog.

    ResponderEliminar
  8. Lo he aplicado a mi blog, pero le veo un ligero fallo a todo esto de los avatares, y es que estén del tamaño que estén a veces se ven desenfocados y eso que he mirado y las imagenes eran más grandes que el tamaño en pixeles que le he puesto al avatar (le puse 65 x 65 px).

    Y aunque le des menos px por ejeplo 45 x 45 se ven igual, pero la sorpresa es que navegando por diferentes posts de mi blog, sólo veo desenfocados en algunos posts, es muy raro, y creo que no soy sólo yo.

    Nadie lo había notado? XD

    Un saludo.

    ResponderEliminar
  9. Bueno Juan, gracias. Es una cosa que poca gente hace. Incluso los hay que borran los créditos de los autores de las plantillas.

    Espineli, yo sólo he notado deformados los que salen con el logo de Blogger. Los demás no. De todas formas, ten en cuenta que la misma persona puede aparecer con logos distintos a lo largo del tiempo. Parece que Blogger graba el avatar junto con el texto, para cada comentario. Si después se cambia de avatar, en ese post antiguo seguirá saliendo el mismo avatar (el antiguo).

    ResponderEliminar
  10. Oloman, esta este comentario es de prueba. Para ver que imagen aparece en los comentarios tipo Nombre/Url pero sin la Url. (Si es la misma imagen del anónimo). O no se ve imagen.

    ResponderEliminar
  11. Gracias, ya vi que la imagen es anónima.

    ResponderEliminar
  12. Prueba anónimo

    ResponderEliminar
  13. Sí Roudy, los condicionales que puse distinguen en primera instancia, entre introducción de URL o no. Lo segundo directamente va a anónimo.

    Si se está logueado en algún sistema de identificación, saca el avatar correspondiente, pero sin embargo, si puso una URL, pero no estaba logueado, sale una admiración. Esto último es un poco para distinguir que la identificación no es del todo fiable.

    Puedes verlo en los tres últimos comentarios de prueba.

    Saludos.

    ResponderEliminar
  14. Muy buen post Oloman,

    y encuentro muy original tu idea de que todos los anónimos mantengan esa imagen de una persona escribiendo con una caja en la cabeza, jiji.

    ResponderEliminar
  15. Un saludo,maestro...
    Ven a verme en mi última entrada hago una referencia a ti con cariño.

    ResponderEliminar
  16. Mercier, ya comenté que no es mía, pero es que me gustó :)

    Anna, tus versos son sencillamente geniales. Gracias por la referencia.

    ResponderEliminar
  17. Hola
    Se me ocurre que hay 3 tipos de anónimos: los que comentan con Nombre/URL y colocan su nombre sin url, los que sí colocan la url y su nombre, y
    los anónimos propiamente dichos.

    Lo primero sería detectar con una condicional al comentarista anónimo y verificar con otra concional que puso una url; esto para los anónimos con una url y nombre.

    Funciona porque, si es un anónimo y tiene url entonces por ende tiene un nombre.
    [Es un anónimo con una url y un nombre cualquiera]


    Poner un else para la condicional que verifica la url y así indicar que no tendrá url, abrir una condicional que compruebe que el nombre del autor es Anónimo; esto para los anónimos propiamente dichos.

    Funciona porque la condicional que detecta que el nombre es Anónimo está anidada en la condicional que detecta que es un anónimo y en el else que verifica que no tenga url.
    [Es un anónimo con nombre Anónimo y sin una url.]

    Después poner otro else para indicar que el nombre no debe ser Anónimo y entonces quedan los anónimos con nombre pero sin url.

    Funciona porque está dentro de la condicional que detecta al anónimo y porque está en el else que verica no tenga url y en el else que verifica que el nombre no sea Anónimo.

    Se cierran las 3 condiconales.

    Y dentro de cada parte que digo iría el código para los comentarios. Esto sólo funciona con desactivando los avatares.

    ResponderEliminar
  18. Tengo que reconocer que me he liado con tu explicación Bonzu Pipinpadaloxicopolis III, por lo que te ruego que pongas el código aunque sea sin < > para entenderlo un poco mejor. Si te fijas en los comentarios 12, 13 y 14, actualmente en este blog se distinguen los tres tipos de "anónimos" que comentas: Anónimo, nick sin URL y nick+URL. Para ello, en la parte de abajo del código que se facilita en esta misma entrada, habría que sustituir el ELSE por este otro:

    <b:else/>
    <!-- Sin URL pero con nombre-->
    <b:if cond='data:comment.author != &quot;Anónimo&quot;'>
    <span class='avatar-image-container' style='background-image:none !important;'><img src='URL_IMAGEN_NICK_SIN_URL' style='background-image:none !important;'/></span>
    <b:else/>
    <!-- anónimo -->
    <span class='avatar-image-container' style='border:0px;background-image:none !important;'><img src='URL_IMAGEN_ANONIMOS' style='background-image:none !important;'/></span>
    </b:if>

    Por último y como comentaba en la actualización, para controlar los casos nick+URL, serviría con incluir en la clase citada en dicha actualización, una imagen de fondo. En mi caso, un signo de admiración roja.

    De todas formas, todo depende de cómo tú quieras distinguir a los lectores. Por ejemplo, para mí una persona sin registro Google, OpenId o similar, debería ser tratado como anónimo, ya que no se ha verificado correctamente su origen. Cualquiera puede poner un nick+URL y no ser el que dice ser, por eso me gustó el signo de admiración.

    ResponderEliminar
  19. Hola, soy Bonzu, este es un comentario con OpenID.

    ResponderEliminar
  20. En lo que he visto Blogger usa la clase avatar-stock para cualquier comentario que no tenga Cuenta Google, ya sea cualquier tipo de anónimo o para OpenID.

    En tu caso deformas la imagen de OpenID para que ocupe todo el ancho del div, si pudieras ver la imagen de fondo notarás que es la misma que la de un anónimo con nombre y url.

    Esta es una forma, añade:

    #comments-block .avatar-image-container.avatar-stock img {
    opacity:0.0;
    filter: alpha(opacity=0);
    }

    Y así verás ese signo de exclamación.
    La imagen de anónimos también es deformada pero ésta es transparente por defecto. Prueba dando click derecho y en Ver imagen sobre el signo que aparece en el anónimo del comentario 12.


    Con los avatares activados no hay condicional que detecte cada caso, hasta el momento.

    Con el método que me mencionas combinaste las condicionales con CSS y para la imagen del perfil funcionó, pero si quisieramos diferenciarlos más no funcionaría y aquí te tengo una pregunta para comprobarlo: ¿cómo cambiarías el color de fondo del comentario del anónimo con nombre y url?

    No se puede teniendo los avatares activados.

    Debo admitir que me confundí un poco al principio porque analizé esas condicionales y ninguna detectaba al anónimo con nombre y url, miré el CSS y todo quedó claro :-).

    Lamento que mi explicación fuese tan confusa, pero el código es igual de confuso, estoy escribiendo algo al respecto.

    ResponderEliminar
  21. Sí que es un lío Bonzu, pero para mí es suficiente con que no salgan huecos en blanco :).

    Estoy de acuerdo en que ahora mismo, con la información disponible no se pueden discriminar adecuadamente todos los casos. Si vienes de vez en cuando por aquí, ya sabrás que soy algo chapuzas y precisamente es ese el "arreglo" que hice: una chapucilla para resolver lo que a mi parecer era lo más importante.

    Funciona medianamente bien pero tiene sus problemas; precisamente los que tu comentas: logo de Blogger deformado, logo de OpenId deformado y fondos superpuestos, pero por el momento distingo lo que necesito distinguir: registrados de no registrados.

    Como te veo muy metido en el tema, si descubres algo fetén, te agradecería que lo publicaras para general conocimiento.

    Otra cosa. Acabo de ver tu faviconera y ya voy a apuntarte en la lista y a apuntarme yo en la tuya si todavía hay hueco.

    Saludos.

    ResponderEliminar
  22. Voy corriendo a ver esa lista :-P, de momento, creo que mientras tenga tantos defectos los avatares no complicaré mi existencia y tal vez no los use, un método más efectivo de detectar a los anónimos es no usar los avatares y con las condicionales que te digo.
    O tener activada las tres opciones para comentar, como en POP-UP y el formulario incrustado al mismo tiempo.

    ResponderEliminar
  23. Ese detalle de tener desactivados los avatares se me escapó ;) De la manera que dices, tiene la ventaja adicional de que no hay que redimensionar la imagen con la consecuente pérdida de calidad, porque tú pones las imágenes que quieres.

    ResponderEliminar
  24. Perdón creí que publiqué ese comentario en tu entrada de favicon.

    ResponderEliminar
  25. Ya le echo un vistazo Bonzu.

    ResponderEliminar
  26. Hola oloman, me fascina tu página, quiero felicitarte porque haces las cosas muy sencillas para el que no sabe, pero en este caso no lo entendí, no puedo colocar mi avatar en la página ni el de los tres tipos de anónimos (me salen números), por otra parte quisiera poner una imagen detrás de el número de comentario del lado derecho y con fecha así como lo tienes aquí, como lo logro?

    tengo las urls de la persona no url: http://farm5.static.flickr.com/4063/4383690887_0cefc2684d_o.gif;
    de la persona nick + url:
    http://farm3.static.flickr.com/2763/4383705027_4a40eea336_o.gif:
    la anónima:
    http://farm5.static.flickr.com/4009/4384528334_d6bd5a10c5_o.gif;
    y la mía:
    http://farm5.static.flickr.com/4049/4384450868_c403978595_o.gif:

    me hace muchas maldades este código, quisiera que me ayudaras por favor, bueno si no es mucha molestia

    Muchas Gracias desde México

    ResponderEliminar
  27. Hola Alán. No sabría cómo explicarte esto de otra manera distinta a cómo lo he hecho en la entrada y menos si tengo que hacerlo más resumido como exige este espacio de los comentarios. Lo único que se me ocurre es que para entenderlo todo mejor, primero veas esta otra entrada que fue anterior a esta y en la que se explica alguna cosilla más.

    ResponderEliminar
  28. ¿sabes como poner el Avatar del autor en su post que a creado?

    Me interesa saberlo porque en mi blog trabajamos varios autores, pero da la casualidad de que mis lectores siempre creen que hago los post yo solo ya que soy el Administrador del mismo, y como pocos (o nadie) leen el nick del autor y me gustaría poner el avatar del autor para que sea más llamativo e identifiquen más facil el autor que postea ademas de evitar eso para darles el credito que se merecen mi otros autores.

    Saludos!

    ResponderEliminar
  29. Hola Esteban.

    Tienes por ahí un par de entradas que te podrían servir. En una se explica cómo colocar una imagen (un avatar mismamente) distinta para cada autor.

    En la otra tienes cómo hacer para que las entradas de cada uno salgan con un estilo distinto (fondo, tipo de letra, etc.)

    ResponderEliminar
  30. Le he dado un nuevo uso a esta idea tuya. Más detalles pronto.

    ResponderEliminar
  31. Ya está, sale en los backlinks de esta entrada.

    No he reinventado la rueda, pero creo que a mis lectores afectados les gustará la idea.

    Gracias por la idea ;)

    ResponderEliminar
  32. Visto funcionando. Gracias por la referencia.

    ResponderEliminar
  33. Estuve horas queriendo instalar esto hasta que lo logre :)

    ResponderEliminar
  34. Seguro que no se te olvida ahora ;)

    ResponderEliminar
  35. Es como 'off-topic', pero Twitter está con mucha ocupación (lo siento) ..
    ¿Hay forma de que haya una especie de 'selector de avatares' ?, como lo he visto en muchísimos blogs de wordpress?..
    Gracias

    ResponderEliminar
  36. No conozco WordPress JB, pero supongo que lo que dices es algo así como un catálogo para escoger un avatar para el blog visitado.

    Lo único que me suena parecido a eso, es Gravatar, pero no sé ni cómo funciona ni si te servirá para lo que buscas. Si encuentras algo, vendría bien que lo comentaras.

    Saludos.

    ResponderEliminar
  37. Si lo que quieres es un soporte para Gravatar en Blogger, echa un vistazo a los backlinks de esta entrada. Quizá sea lo que buscas, JB

    ¡Ejem!... Otro offtopic, Oloman... En mi blog no salen los backlinks a pie de post. ¿Has escrito algo al respecto? (He usado el buscador y no me sale lo que busco) ¿Me faltará alguna linea clave que no venía con la plantilla base, o que borraría sin querer? A ti si que te salen las dos referencias a mis entradas debajo de los comentarios...

    Y si, tengo la casilla de permitir backlinks o enlaces de retroceso activada, así que por eso creo que es algo de la plantilla, porque con mi anterior diseño sí que salían.

    Saludos.

    ResponderEliminar
  38. Esa utilidad está dentro de una rutina (include) como esta:

    <b:include data='post' name='backlinks'/>

    Luego estaría el correspondiente INCLUDABLE cuyo código no reproduzco porque es un poco largo. A ver si las tienes.

    ResponderEliminar
  39. Aparentemente lo tengo todo. Le voy a echar un vistazo a todos los condicionales a ver si está todo bien. He vuelto a comprobar si tengo marcada la opción de mostrar enlaces de retroceso y así es, así que algo falla en la plantilla.

    Gracias, Oloman, ya te cuento si descubro algo.

    ResponderEliminar
  40. He usado este truquillo y queda que ni pintado! explicas las cosas muy bien para que las entendamos. Pero durante el proceso no se que hecho que me ha desaparecido el data del nombre de los comentaristas! He hecho intentos para que vuelva aparecer pero no lo consigo, me puedes echar una mano?
    También te iba a preguntar como quitar el "dijo..." pero ya he averiguado que es eliminando el data:commentPostedByMsg. ;)

    ResponderEliminar
  41. data:comment.author
    Esa es la DATA que contiene el nombre del autor de un comentario.

    Creo que el trozo es así, aunque con tantos cambios que tengo, ya no sé si los demás lo teneis igual. Te dejo alguna línea más de lo necesario para que lo encuentres más fácil:

    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>

    <data:commentPostedByMsg/>

    </dt>
    <dd class='comment-body'>

    ResponderEliminar
  42. Olo, muchas gracias, no te dije nada mas entre las vacaciones y tal, pero lo retomé y me salió, me costo un buen rato porque tenia un cacao de espanto en esa parte del codigo pero finalmente salio. Ahora lo tengo que colocar todo un poco porque estan los avatares, los nicks, el nº, la fecha, que parece eso una fiesta, eso se arregla en la parte del css verdad? MIL GRACIAS

    ResponderEliminar
  43. Sí, claro. En la parte CSS, localizas la clase que formatea cada una de esas cosas y ya te lias a poner float:left; float:right; ... etc :D

    ResponderEliminar
  44. Hola Oloman, Habría alguna forma de dejar en mi blog un avatar para mis comentarios y tener otro para mi cuenta de blogger, por ejemplo, yo tengo un blog de temática de videojuegos y utilizo el avatar que puedes ver en este comentario para comentar en el, pero a mi me gustaría poder tener mi foto para comentar en otros blogs, ect. Seria posible?
    Saludos!

    ResponderEliminar
  45. John Mistery, los dos primeros trozos de código son para forzar que tu avatar estándar aparezca en tu propio blog de otra manera.

    Se me ocurre que puedes usar tu foto como perfil genérico de Google, con lo que en todas partes saldrías con ese avatar (foto). Luego modificas tu propio blog para que en lugar de la foto salga ese dibujo.

    ResponderEliminar
  46. Hola, como ya sé, que sí, que recibes todos los mensajes pues es sólo para darte las gracias otra vez, ¡tantas veces!, por todo lo que haces.

    Un beso

    ResponderEliminar
  47. Yo tengo algo parecido ya que mezcle dos tutoriales el de anónimos y la imagen de mi avatar hace un años y mas creo...

    Me pregunto que habrás eliminado Oloman para que en el avatar de los comentaristas no tenga el enlace ni el tooltip, ya que mire y mire lineas y no se cual es en mi blog.

    Atte. gracias!

    ResponderEliminar
    Respuestas
    1. Pues todo, América, porque tengo los nuevos comentarios anidados y el código es totalmente distinto. De todas formas, si quieres eliminar el tooltip busca la parte que "imprime" el enlace y el avatar y busca un expr:title... Ese title es el texto que sale al pasar el puntero por encima de cualquier enlace. Si no lo quieres lo eliminas. Asegúrate de guardar lo que borras por si necesitas reponerlo ;)

      Eliminar
  48. SIRVE CON LOS COMENTARIOS ANIDADOS?

    ResponderEliminar