Gravatars – jeden awatar na wielu stronach

gravatar_logo.gifPisząc komentarze na różnych blogach pewnie zastanawiałeś się, skąd biorą się te awatary obok komentarzy, na przykład u mnie. A może chciałbyś wiedzieć, co zrobić, by jeden i ten sam awatar wyświetlał się na wielu stronach? Rozwiązanie jest proste – Gravatars!

Globally Recognized Avatar

Na początek trochę teorii. Skrót Gravatar wziął się od słów Globally Recognized Avatar, czyli tłumacząc na polski, Globalnie Rozpoznawalny Awatar lub coś w tym stylu (można tłumaczyć na Ogólnie Rozpoznawalny Awatar lub Globalnie Uznany Awatar, ale według mnie pierwsza wersja brzmi lepiej :). Gravatar to oczywiście awatar o maksymalnych wymiarach 80×80 pikseli, pojawiający się zwykle obok komentarzy jako identyfikator komentującego.

Też chcę mieć takiego!

By mieć takiego awatara trzeba zarejestrować się na gravatar.com. Z tym chyba nie będziecie mieli problemów ;) Następnie musimy podać e-maila, dla którego przypiszemy obrazek, klikając w add a new one. Należy podać e-maila, którym najczęściej posługujemy się na blogach. W przypadku gdy posiadamy kilka maili nie ma problemu, gdyż dla kilku e-maili można przypisać różne bądź takie same awatary.
Kolejnym krokiem będzie dodanie obrazka jako awatar. Pamiętajmy, że maksymalny rozmiar Gravatara to 80×80pikseli. Obrazek możemy dodać z własnego komputera, bądź podać adres URL obrazka z internetu. Jeżeli rozmiary obrazka są większe niż 80×80 pikseli to możemy obrazek przyciąć, ale jeżeli zależy nam na jakimś elemencie to znacznie lepszym sposobem będzie przeskalowanie obrazka, np. za pomocą GIMPa.
Po tych wszystkich czynnościach wystarczy przydzielić obrazek do e-maila. Proste, nieprawdaż? :)

Jak to działa?

Wtyczka lub kod (jedno i to samo zresztą ;) sprawdza, czy dla danego e-maila przypisany jest awatar na stronie gravatar.com. Jeżeli tak, to wstawia odpowiedni obrazek, jeżeli nie, to wstawia domyślny awatar. Niektóre wtyczki zapisują awatary w pamięci cache, co sprawia, że gdy wgramy nowego Gravatara, to zmiany na stronie zobaczymy dopiero po wyczyszczeniu pamięci cache.

Gravatary na twoim blogu

Chciałem podać listę wtyczek do Wordpressa, które pozwalają umieścić Gravatary na stronie, ale po co? Możemy to zrobić kodem. Całą czynność świetnie opisał Connor Wilson. Oczywiście po angielsku, więc postaram się przedstawić całe how to po polsku :)

1. Najpierw musimy wstawić kawałek kodu PHP do pliku comments.php. Kod zaprezentowałem w listingu 1.

Co tu można zmienić? Dwie wartości:

  • $size – jak dla mnie 40 pikseli to za mało, aktualna wartość u mnie na blogu (i wielu innych) to 48, ale można ustawić większą/mniejszą.
  • $default – ścieżka do domyślnego awatara, który wyświetli się, gdy użytkownik nie będzie posiadał swojego. Można użyć tego z MBL, którego zresztą udostępniam.

2. Znów do pliku comments.php należy wstawić pewien kod. Gdzie? Najlepiej w divie, w którym zawarty jest komentarz. Spójrzcie na listing 2.

Co tu dużo gadać, zmienić możemy jedynie zawartość alt.

3. Przydałoby się ostylować Gravatary. U mnie wygląda to tak: cały kod umieszczony jest w divie o klasie gravatar, a sam CSS przedstawia się tak, jak w listingu 3.

4. Gotowe, możemy cieszyć się Gravatarami na naszym blogu :)

Nie lubię grzebać w kodzie

No dobra, podam adres wtyczki (dla leniwych :P ). b4it stworzył wtyczkę, która może wyświetlać nie tylko Gravatary, ale również awatary z serwisów tj. MBL oraz Avatars. Strona wtyczki.


Listingi:

  • Spoko, ja się rejestruję ;)

  • a do samej strony gravatars masz kolejny nick i kolejne hasło, żeby się zalogować, kolejne konto do obsługi, a i tak gdzieniegdzie avatary są większe niż 80×80, co już – jak dla mnie – zdecydowanie przesądza sprawę na “nie”.

  • @kal.
    Co masz na myśli? Kolejne hasło i nick, to chyba logiczne :) A rozmiar awatarów zależy od właściciela bloga – jak mu sie nie podobają takie małe, to robi większe.

  • Gravatar Rulez :) Komentując na zagranicznych stronach fajnie czasem zobaczyć swoją gębę wśród czarnoskórych i skośnookich (internet łączy :)).

  • Super sprawa. Zostaje fanem Gravatara :)

  • Próba avatara :)