Adresa blogului este brontozaurel.blogspot.com/ncr !!!
Postare mai nouă ► ◄ Postare mai veche

noi si pozele noastre

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

comentariu

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:

adresa gravatar

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

10 pareri la noi si pozele noastre

  • cine: ex-silentio delete comment icon
    cand:
    Eu mă gândisem mai demult la un javascript care să facă modificările astea, ceva asemănător cu ăla de adaugă emoticoane, (între timp am renunțat la idee) dar varianta doar cu css e mult mai bună :)
  • cine: Arisu delete comment icon
    cand:
    Nu știu dacă are vreo importanță, dar când și-au făcut cont pe en.gravatar.com unii oameni au bifat opțiunea "gimme a blog", iar rezultatul e că username-ul de gravatar e același cu username-ul de wordpress. Sunt curioasă dacă în cazul în care cineva vrea să spargă intrarea într-un cont de admin pe wordpress o face mai ușor atunci când știe username-ul. Nu mă pricep la chestii tehnice, dar poate știe cineva de pe aici.
  • cine: brontozaurel delete comment icon
    cand:
    @ex-silentio: ala eu l-am facut cu expresii regulate si replace() - la ceva de genul asta te referi? da, ar fi si asta o optiune, dar tot necesita o lista de corespondete... la fel ca metoda mea css-only.

    In a doua mea varianta, cea cu JavaScript si pe care nu pot s-o fac sa mearga (cred ca am citit vreo 30 de tutoriale si tot nu m-am lamurit cum setez header-ul :( ), avantajul ar fi ca scap de lista aia complet in varianta lenesa, iar in varianta mai buna as avea o una scurta si sub forma unui JSON.


    @Arisu: username-ul se poate afla imediat din hash: un url de forma gravatar.com/HASH e redirectat catre gravatar.com/username (iar hash-ul poate fi aflat cu un simplu click dreapta si Open image in new tab)
  • cine: ex-silentio delete comment icon
    cand:
    Da, la așa ceva mă refeream :) Eu voiam un fisier extern, să pot să-l modific ușor, fără să mai intru în blogger. Dar nu mi-a trecut prin cap să s-ar putea doar cu css.
  • cine: pinkISH delete comment icon
    cand:
    absolut remarcabil!

    dar deja stii parerea mea... :)
  • cine: brontozaurel delete comment icon
    cand:
    Ce anume? :))
  • cine: pinkISH delete comment icon
    cand:
    Pai asta e parerea mea, ca ce faci tu la nivel de cod&stuff e superb.
  • cine: brontozaurel delete comment icon
    cand:
    :">
  • cine: mircea delete comment icon
    cand:
    Imi place chestia cu " nu pune mina jegoasa pe peste" din poza...
  • cine: brontozaurel delete comment icon
    cand:
    Din pacate sunt destui nesimtiti care fac asta :(
Da-ti si tu cu parerea

Da, ma intereseaza si parerea ta!

Mai jos se pot scrie tampenii. Nu mai mari ca alea de mai sus...
Insa inainte de orice altceva, vezi cum se comenteaza: indrumar tehnic si reguli!
HTML acceptat: <b>, <i>, <a href=""> (fara alte atribute)
Abonare comentarii