Portál o technologiích a vývoji

Obrázky ve webových aplikacích – Avatary

Autor: Adam Klvač Datum: 24.10.2013 Počet shlédnutí: 6 002 068x

V seriálu jsme se věnovali základům zpracování obrázků, které k nám uživatelé různými způsoby nahrávají. V závěru seriálu bych se ale rád věnoval obrázkům, které už uživatelé nahráli. Mám tím na mysli především avatary. Používám je osobně rád, ale nemám rád, když je musím do nějaké aplikace nahrávat – většinou to dopadne tak, že se tím neobtěžuji. Je to ale podle mne škoda, obrovská spousta uživatelů má Facebook, Google účet a najde se i řada uživatelů služby Gravatar. Tu používám už nějaký ten pátek a myšlenka je výborná – například do komentářů na webu mohu zadat vlastní e-mail a skrze Gravatar se zobrazí můj avatar. Implementace je triviální a uživatelé navíc mají, stejně jako při použití účtu sociálních sítí, změnit svůj avatar všude, kde komentovali.

Obrovskou výhodou pro nás je také fakt, že obrázky jsou fyzicky uloženy u poskytovatele služby. My na obrázek pouze odkazujeme, ale nemusíme jej ukládat do naší aplikace, což ušetří i mnoho režie.

Facebook

V aplikaci je leckdy implementováno přihlášení přes Facebook. Je to relativně pohodlný způsob přihlášení, uživatelé nemusí prozrazovat své heslo (které mají samozřejmě všude stejné) a e-mail. Při přihlášení získáme unikátní ID v rámci Facebooku – buď jako číslo, může to být ale také login. Uživatelé již nemají adresy profilu ve formátu facebook.com/<číslo>, ale ve formářu facebook.com/<login>. Pomocí veřejného Facebook Graph API můžeme získat snadným způsobem avatar:

<img src="https://graph.facebook.com/<id>/picture">

Tím zobrazíme avatar uživatele ve výchozí velikosti 50×50 pixelů. Je možné použít i jiné velikosti:

<img src="https://graph.facebook.com/<id>/picture?square"><!-- 50x50 -->
<img src="https://graph.facebook.com/<id>/picture?small"><!-- 50px na šířku s proměnnou výškou -->
<img src="https://graph.facebook.com/<id>/picture?normal"><!-- 100px na šířku s proměnnou výškou -->
<img src="https://graph.facebook.com/<id>/picture?large"><!-- 200px na šířku s proměnnou výškou -->
<img src="https://graph.facebook.com/<id>/picture?width=150&height=100"><!-- 150x100 -->

 Google

U uživatelů s Google účtem je situace velmi podobná, URL přijímá 2 parametry – ID uživatele a velikost obrázku. Obrázek bude mít čtvercový rozměr.

<img src="http://profiles.google.com/s2/photos/profile/<id>?sz=<velikost>">

Pokud není zadána velikost, zobrazí se obrázek ve velikosti 512×512 pixelů (pozor, parametr v takovém případě nesmí být v URL).

Gravatar

Získání avataru ze služby Gravatar je jednoduché. Stačí vytvořit otisk e-mailu uživatele a tento otisk poté použijeme v URL obrázku.

$mail = strtolower('mail@example.com');
$hash = md5($mail);
<img src="http://www.gravatar.com/avatar/<?php print $hash ?>"><!-- 80x80 -->
<img src="http://www.gravatar.com/avatar/<?php print $hash ?>?s=200"><!-- 200x200 -->

Pokud avatar neexistuje, je zobrazen výchozí obrázek. To lze ovlivnit parametrem default/d.

<img src="http://www.gravatar.com/avatar/<?php print $hash ?>?d=<?php urlencode('http://www.example.com/default-avatar.jpg') ?>">

Jako hodnotu parametru d lze také odeslat řetězec 404. V takovém případě se nezobrazí výchozí obrázek, ale vrátí se hlavička 404 Not Found. To se hodí v případě, že chceme ověřit existenci avataru.

// Zavináčem potlačíme chybu
$avatar = @file_get_contents("http://www.gravatar.com/avatar/$avatar?d=404");
if(!$avatar) {
    // Avatar neexistuje
}

U Twitteru je situace docela nešťastná. S příchodem API 1.1 je nutné odesílat autorizované požadavky a z nich poté získat URL avataru, kterou si navíc musíme uložit. Služba OpenIDAvatar se zase moc nevyužívá a v základních atributech OpenID pro avatary ani není místo. Dle mého je ale možnost použití avatarů z Facebooku a Google příjemná a dovolil bych si tvrdit, že pro drtivou část uživatelů to je dostatečné řešení.

 

Štítky: | | | |

Žádné komentáře

Poslat komentář

Vaše e-mailová adresa nebude zveřejněna.