Avatar kezelés .htaccess-szel

Ha van egy közösségi oldalunk, akkor biztos van benne avatar kezelés is. Felhasználóink előszeretettel töltenek fel magukról/maguknak képeket, mely sokszor okoz mosolygós pillanatokat. A sok felhasználó sok kis képet szül, egy kis kép akár másik kettőt is, lássuk hogy lehet ezt szépen megoldani.

Avatar kell:

  • hozzászólásokhoz (90×90 px; ~ 3kiB;)
  • profiloldalra (240×240 px; ~13kiB)
  • valahova máshova, például egy listába (40×40; ~1kiB)

Pistike Bt nem szarozna, 240×240-be megcsinálná a képeket egy könyvtárba, majd width és height attributummal beállítaná a htmlben. Ezt tovább lehet fokozni, hogy a 40×40-es képet jeleníti meg 240×240-ben.

Oldjuk meg szebben!

Felhasználónk mondjuk jpg és png (transzparencia miatt mondjuk, de ha nem akarjuk, akkor png2jpg és minden jpeg lesz) képet tölthet fel, vagy akár gif-et is, de anim gif-et konvertálni php-ben nehéz, így most azt nem engedjük. Adva a minőségre, elkészítjük a 3 különböző méretű képet. Ha van mondjuk 30.000 regisztrált tagunk, akkor kapásból 90.000 képünk is lehet.

Hogyan akarjuk linkelni az avatarokat?

Szépen. Pl:

  • /avatar/003/001 a hozzászólásokhoz
  • /avatar/003/001/profile a profiloldalra
  • /avatar/003/001/small a listához

Az 003/001 a 3001-es id-vel rendelkező felhasználónkat jelenti. Az belátható, hogy 90.000 képet nem rakhatunk egy könyvtárba, kénytelenek vagyunk szétbontani. A profile a small és a “semmi” az avatar méreteket jelöli. Tartozik hozzá egy szép mod_rewrite, lássuk:

## AVATAR KEZELÉS ###
## elobb jpeget nézunk
ReWriteCond %{REQUEST_URI} ^/avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$
ReWriteCond %{DOCUMENT_ROOT}/userdata/%1/%2/avatar_%3.jpg -f
RewriteRule ^avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$ /userdata/$1/$2/avatar_$3.jpg [L]

#majd ha az nem van png
ReWriteCond %{REQUEST_URI} ^/avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$
ReWriteCond %{DOCUMENT_ROOT}/userdata/%1/%2/avatar_.png -f
RewriteRule ^avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$ /userdata/$1/$2/avatar_$3.png [L]

## majd a defaultra, gif nem megengedett
ReWriteCond %{REQUEST_URI} ^/avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$
RewriteRule ^avatar/([0-9]{3})/([0-9]{3})/?(profile|small)?$ /userdata/base_avatar_$3.png [L]
## AVATAR KEZELES VEGE ##

A fájlok fizikailag a $_SERVER['DOCUMENT_ROOT'].’/userdata/003/001/’ könyvtárban vannak (mindenkinek saját könyvtár), a következő nevekkel: avatar_profile.jpg, avatar_small.jpg, avatar_.jpg. Első blokkban megvizsgáljuk van-e avatar_valami jpg a user könyvtárában, ha van, akkor (profile|small|’semmi’) véggel kitoljuk, LAST RULE. Ha nem teljesül a jpg-s feltétel, akkor ugyanilyen elven a png jön, majd a gif, ha kell, és végül ha egyik sem, akkor egy alapértelmezett avatart tolunk ki.

Természetesen mivel apró fájlokról van szó, elengedhetetlen egy mod_expires, mod_cache és mod_mem_cache, hogy ne húzassuk állandóan a disket. Ezekről majd később lesz írás.

Előnyei:

  • szép url
  • url módosítás nélkül változtathatóak a fileok helyei
  • nem kell a felhasználó mellé letárolni az avatar adatait (jpeg vagy png, van-e egyáltalán)
  • mivel nem kell tárolni, nem kell minden lekérdezésbe beletenni, hurcolni, vizsgálni, gyorítótárazni
  • a 003/001-et megkaphatjuk akár smartyban is, egy saját modifier segítségével: <img src=”/avatar/{$user.id|userpath}/small” alt=”" />, ahol az userpath egészoszt 1000-rel, majd maradékososzt 1000-rel.

Hátránya:

Ha lighty alá valaki megírja ezt a rewrite-ot,  akkor szóljon (nekiálltam, de nem sikerült).
Nincs tapasztalatom a mod_rewrite teljesítményéről (egy kis kutatást igényel), hogy a fájlrendszer ilyen sűrű kéregetése milyen terhelést okoz, illetve milyen az ilyen irányú cache (ha jól rémlik ez kernel szinten van megoldva, nem biztos). Továbbá ugyanez nagy számú kérések esetén. Ha van valami jó írásotok a mod_rewrite teljesítményéről, azt szívesen fogadom.

Használhatjuk tehát ezt a megoldást minden hasonló szituációban. Akár felhasználókhoz, mint itt, vagy cikkhez egy alapértelmezett képnek.

Vélemény? Javaslat? Ötlet?

A bejegyzés kategóriája: webfejlesztés
Kiemelt szavak: , , , .
Közvetlen link.

Avatar kezelés .htaccess-szel bejegyzéshez 4 hozzászólás

  1. gphilip hozzászólása:

    Szép szép :)

    A gond az, hogy az olyan nagy méretű portáloknál, ahol ez gondot okoz, biztos, hogy használnak egy static szervert is (esetleg némi DNS loadbalancinggal) ahol nem nagyon lehet tekergeni a dolgokat még olyan egyszerű eszközökkel sem, mint a mod rewrite.

    Valami nagyon lightos webszerver és csókolom.

    Ebben az esetben marad a milestone és a ronda url:
    http://static.valami.hu/avars/123000/123456/small.jpg

    Oszt’ nincs is ezzel semmi gond :)

  2. cadmagician hozzászólása:

    hát lehet ezt variálni. bár nagyon nem vagyok benne a balanceolásban, de tán az urlbe lehet tenni számokat, ami megmondja a balancernek hogy hova dobja. a többi már lehet ez. akár. a kilométer hosszu urlnek sem vagyok híve…

  3. cadmagician hozzászólása:

    ezt pl lehet variálni mod_proxyval. szerintem…

  4. Robika hozzászólása:

    Szerintem ez az elnevezési konvenció azért nem jó, mert a rewrite meg a php lassít egy csomót. Én úgy csinálom, hogy az url-ben megjelenő cím egy az egyben megfeleljen egy valós fájlnak. Például http://www.valami.hu/thumbs/avatar/small/abc.jpg a szerveren a WEBROOT/thumbs/avatar/small/abc.jpg -nek felel meg. Ez azért lesz jó, mert az apache rewrite általában úgy néz ki, hogy csak akkor van rewrite, ha az url-ben lévő cím egy nem létező fájl (RewriteCond %{REQUEST_FILENAME} !-f ). Tehát ha ott van a fájl, akkor egyből kitolja azt, php meghívása nélkül. Ha nincs ott, akkor megy a rewrite, és ilyenkor le kell generálni a thumbnailt (az url-ben a small alapján tudom, hogy mekkorát csináljak), el kell menteni a fenti mappába, és utána kitolni a fájlt a megfelelő header-ökkel.

    Ez azért is jó, mert ha az apache önmagában már kevés, és rakunk elé egy reverse proxyt, akkor abban is könnyen meg tudjuk vizsgálni a fájl elérhetőségét, és csak akkor adjuk át az apachenak a kérést, ha nem létezik még a thumbnail. Nginx-ben például a try_files -szal lehet szerintem megcsinálni, bár ezt még nem próbáltam ki.

ITT és MOST VÁRJUK A HOZZÁSZÓLÁST!

Email cím (nem tesszük közzé) A kötelezően kitöltendő mezőket * karakterrel jelöljük

*

A következő HTML tag-ek és tulajdonságok használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>