on the verge of extinction... again

... din comentarii.

Varianta preferata: Gravatar (Globally recognized avatar). Pentru cei care nu stiu despre ce este vorba: exista gravatar.com, unde iti poti face cont - in linii mari e ceva de genu' le dai adresa de e-mail cu care comentezi pe bloguri, iti setezi un nume de utilizator, o parola, iti uploadezi o imagine pe care vrei sa o vezi langa comentariile pe care le lasi. Si cam asta este! Uneori...

Daaar... blogspot nu cere adresa de e-mail pentru comentarii. De ce este importanta chestia asta? Pentru ca toata dracovenia asta cu gravataru' se bazeaza pe adresa de e-mail.

Ideea este cretin de simpla. Si o sa o explic cu imagini. Pentru ca, dupa cum spunea un fost prof de mate de-al lui tati (liceul Balcescu din Braila)... "figura mare si clara il desteapta pe roman". Sper ca sunteti romani. Alfel, articolul asta tradus cu Google Translate o sa va dea dureri de burta... de la atata ras. Sincer, cand sunt deprimata imi traduc postarile de blog cu Google Translate - e cea mai buna pastila de ras.

Revenind, hai sa vedem cum stau lucrurile. Pentru exemplificare, se ia un comentariu de-al meu, se da click dreapta pe poza si apare un meniu. Ca in poza din stanga. Se da click pe Open image in new tab si... tadaaa! In noul tab proaspat deschis, sus in address bar se poate vedea cam ce se se vede in imaginea de mai jos:

Bucata interesanta e cea evidentiata cu verde. Ce dracu' mai este si succesiunea aia de caractere? Pai... aia e adresa mea de e-mail. Ma rog... md5(email) pentru cine stie ce dracu' este ala md5. Pentru cine nu stie... este adresa de e-mail criptata. Si da, pentru aceeasi adresa rezulta mereu aceeasi succesiune de caractere. Si... in caz ca se intreaba cineva... nu, nu este imposibil sa se obtina adresa de acolo.

In cazul in care formularul de comentarii cere adresa de e-mail... e foarte simplu, pentru ca se poate face ceva de genul asta din PHP:

$base_url = "http://www.gravatar.com/avatar/";
$hash = md5(strtolower($email));
$img_size = 32; // avatar size in pixels
$url = $base_url.$hash."?s=".$img_size;

$url este link-ul catre un avatar de 32px pe 32px (in loc de 32 se poate pune orice valoare intre 1 si 512 acolo). Se pune in atributul src al unui tag <img> si asta e. Desigur, mai sunt si alti parametri care pot fi adaugati la $url si, daca nu va place ce va pune la dispozitie de Gravatar pentru situatia in care o adresa de e-mail nu are asociata o imagine... exista roboteii astia (care mie mi se par foarte simpatici).

Dar sa revenim la blogger, pentru ca a trecut mai bine de o luna de cand am promis niste solutii. Bineinteles, toate au puncte slabe.

Solutia 1: doar CSS

Exact! Zero JavaScript.

Solutia asta nu merge decat pentru cei care comenteaza cu nume si link. Linku' poate fi link catre un blog, catre un cont de... nu conteaza! sau chiar catre profilul de gravatar daca n-au nimic altceva si vor sa-si vada imaginea aia asociata contului lor. Trebuie sa fie un link, si trebuie sa fie unic.

In primul rand, in template trebuie sa existe bucata asta:

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

[Se poate vedea asta la Template -> Edit HTML (Proceed la avertizarea aia) -> neaparat bifat Expand Widget Templates inainte de a cauta (Ctrl+f) bucata de mai sus.]

Bucata de mai sus genereaza HTML-ul asta:

<div class="avatar-image-container avatar-stock">
  <span dir="ltr">
    <a href="http://en.gravatar.com/brontozaurel" rel="nofollow" onclick="">
      <img src="http://img1.blogblog.com/img/blank.gif" width="16" height="16" alt="" title="brontozaurel">
    </a>
  </span>
</div>

[Inainte sa ma injurati, link-urile din header-ul comentariului sunt dofollow - View (page) source pentru orice postare cu comentarii.]

Apoi, la CSS (adica inainte de </b:skin> in template) se adauga ceva de genul asta:

#comments-block .avatar-image-container.avatar-stock img {
  padding: 0;
}
#comments-block .avatar-image-container a[href*='COMMENT_URL_1'] img,
#comments-block .avatar-image-container a[href*='COMMENT_URL_2'] img {
  border: solid 14px transparent;
  /* for IE7, doesn't understand box-sizing */
  *border: solid 0 transparent;
  /* Chrome 4 - 9, Safari 3.1 - 5.0,
iOS Safari 3.2 - 4.3,
Android Browser 2.1 - 3.0  */
  -webkit-box-sizing: border-box;
  /* Firefox 2+ */
  -moz-box-sizing: border-box;
  /* for IE8+, Chrome 10+, Safari 5.1+, Opera 9.5+,
iOS Safari 5.0,
Android Browser 4.0 */
  box-sizing: border-box;
}
#comments-block .avatar-image-container a[href*='COMMENT_URL_1'] img {
  background: url('http://gravatar.com/avatar/AVATAR_HASH_1?s=28')
    50% 50%;
}
#comments-block .avatar-image-container a[href*='COMMENT_URL_2'] img {
  background: url('http://gravatar.com/avatar/AVATAR_HASH_2?s=28')
    50% 50%;
}
/* si asa mai departe... */

Bineinteles, in loc de COMMENT_URL_1, COMMENT_URL_2 si asa mai departe se pun link-urile comentatorilor, si in loc de AVATAR_HASH_1, AVATAR_HASH_2 si asa mai departe se pune hashu' adica succesiunea alea de caractere care se obtine asa cum am aratat mai sus: click dreapta pe avatarul comentatorului pe un blog care are asa ceva, Open image in new tab si se ia cu copy paste bucata dintre avatar/ si ?.

Bineinteles, se poate folosi o alta dimensiune pentru avatar, nu neaparat 28px, cu mentiunea ca in border:solid 14px transparent; trebuie sa fie mereu jumatate din dimensiunea avatarului (in cazul asta, jumatate din 28px inseamna 14px).

Dezavantajul principal al metodei asteia e ca se umfla CSS-ul cu fiecare nou comentator cu gravatar si ca randurile de cod respective trebuie adaugate manual.

Daaar... macar merge, dupa cum se poate vedea la postarea precedenta.

Solutia 2: cu JavaScript

Pe care nici n-am reusit s-o fac sa mearga, dar o sa prezint pe scurt cam care este ideea...

Versiunea de baza e una lenesa: functioneaza doar pentru comentatorii care se semneaza cu un nume care coincide cu numele lor de utilizator de pe gravatar.com.

In template, imediat dupa bucata:

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

... se adauga:

<script>
var author_name = "<data:comment.author/>";
var json_url = "http://gravatar.com/" + author_name + ".json";
</script>

Si aici urmeaza partea pe care nu stiu cum s-o fac sa mearga (e adevarat ca n-am prea folosit eu XMLHttpRequest pana acum)... am un URL (json_url de mai sus) unde am un JSON... pe care nu reusesc sa-l obtin. Nu, nici macar folosind jQuery ($.getJSON) asa cum am procedat cand am facut albumul. Nu stiu ce dracu' nu fac cum trebuie... but it's horribly frustrating!

Presupunand ca-l obtin (var the_json), atunci am ceva de genul:

var img_src = "http://gravatar.com/avatar/" + the_json.entry[0].hash;

Si apoi pun img_src in atributul src al imaginii comentatorului respectiv.

Da, stiu, am terminat la galop postarea, n-a iesit asa minunata precum visam, sunt jalnica la toate capitolele... exprimare, explicatii programare... but at least this lame excuse for a tutorial is better than none...

[Nu, pauza nu s-a terminat, asta e doar o pauza de la pauza. Urasc vremea asta, am draci pentru ca nu reusesc sa fac sa mearga chestia asta, am draci pentru ca mi s-au stricat strugurii albi - ai mei mi-au trimis o geanta cu mancare acum vreo saptamana si putin... prea plina, strugurii albi s-au stricat pana sa apuc sa-i gust... macar strugurii negri, perele si lamaile nu par sa se fi stricat...]