Az éppen aktuális munkám egyik részeként egy webes fotógalériát kellett összehoznom. Természetesen - mint általában minden projektnél - az idő volt a legnagyobb ellenség, így spórolás végett bátran nyúltam már meglévő, más fejlesztők által megírt komponensek után, amiket aztán egyszerűen tudtam implementálni a saját környezetembe. A galériával szemben támasztott alapkövetelmények a következőek voltak (rögtönzött megrendelői specifikáció következik):
Galéria tetején cím, dátum, leírás, mellette valami látványos szavazó, ahol az aktuális galériát lehet értékelni. Ez alatt az adott kép, két oldalán jobbra balra léptető nyíl, képre kattintva eredeti méret (rendes fotók, min 1280*1024-es felbontással), alatta az előző/következő néhány kép előnézeti képe 100*100-as méretben. Ez a képarány nyilván nem stimmel, hiszen egy fotó nem négyzet alakú, úgyhogy a bélyegképeket croppolni kell, lehetőleg középen, hogy a lényeg látszon. A bélyegképek sávja alatt kommentek.
Tiszta sor, a határidő is a szokásos: minél hamarabb, de inkább
tegnapra. Nincs mese, nem állok neki kódolni, nézzük meg mivel lehet
spórolni. A szerveroldali részeken nem, azt meg kell írni, de mivel pár
tíz sornál nem lesz több egy képlistázó, plusz a galéria adatait
adatbázisból kiolvasó kód, ez nem is veszélyes. A megjelenítést
rábíztam a Smarty-ra.
Mivel az admin felületen a nagy felbontású képeket töltik fel, ezekből
szükség lesz egy kisebb, fix szélességű változatra, ami a galéria fő
helyén jelenik meg, illetve kell majd egy kisebb, ami a 100*100-as
előképhez kell. Ehhez egy Mike Lopez nevű fejlesztő blogján
találtam egy használható eszközt, ami nagyon szépen végzi a feladatát,
de a nagy felbontások miatt nem érdemes (és egyébként sem ajánlott)
futásidőben generálni a bélyegképeket, így ehhez készíteni kellene
valamiféle chachelést. Aztán kell még egy szavazó a galéria
értékeléséhez. A Starbox
megoldás tökéletes, bár ezzel először meggyűlt a bajom, de erről majd
később. A bélyegképek kezeléséhez is szükségem volt egy eszközre, mivel
megkötés volt, hogy négyzet alakúra kell vágni őket, álló, illetve
fekvőképek esetén egyaránt. Úgy döntöttem nem fárasztom magam a
szerveroldalon, hiszen erre a problémára is létezik számos megoldás - végül egy prototype-ra épülő scriptet választottam.
Ha már JavaScript, akkor a kommentelésnél is illene valamilyen AJAX-os
megoldást használni. Problémás is lenne a klasszikus POST küldés,
hiszen a galériában az egyes képek között is kvázi JS-el váltunk, így
macerás lenne az űrlapküldés, és az adott képhez való visszatérés
(természetesen egy egyszerű hidden mezővel megoldható lenne, de
felesleges, és az eddigiek tükrében nem is lenne túl elegáns megoldás).
Létezik egy shoutbox nevű képződmény (a fogalommal ma találkoztam
először... kvázi "csetfal" (?)), ami tökéletesen megfelel az egyes
galériák kommentelésére, így utána is néztem a fellelhető
változatoknak. Az Ajax Daddy-n találtam is egy jQuery-t használó megvalósítást,
ami fájl alapú ugyan, de mivel a képek kommentjei között nem lesz
szükség keresésre, nekem még szimpatikusabb is ez a megoldás - így nem
kell újabb táblát létrehoznom az adatbázisban.
A felhasznált eszközök többsége gond nélkül, egyszerűen implementálható. Módosításra csak a bélyegképek gyorsítótárazásához, illetve a shoutbox ékezetes karaktereihez volt szükség.
A bélyegképek gyorsítótárazása egyszerű feladat. Azon az elven alapszik, hogy minden esetben a bélyegképet generáló (nálam thumb.php) fájl hívódik meg ami paraméterként a kért kép eredeti nagy felbontású példányának elérési útját, valamit a generálandú bélyegkép felbontását kapja. A script elején, mielőtt megkezdődne az eredeti kép beolvasása, átméretezése, kimenetre küldése, leellenőrizzük, hogy az adott képből szerepel-e már kért felbontású példány a gyorsítótár mappában. Ezt úgy valósítottam meg, hogy az eredeti kép tartalmából generált md5 (minden képnél egyedi hash) és a kért méretből álló fájlnév létezése esetén automatikusan azt küldjük tovább válaszként. Ez lehet egy a cache-re mutató HTTP redirekt, de tapasztalataim szerint gyorsabb, ha közvetlenül a bélyegképfájl tartalmát, küldjük a kimenetre. Ha az adott képből/felbontásból még nem szerepel példány a gyorsítótár-mappánkban, akkor a fenti script segítségével legeneráljuk azt, majd a kimenetet nem csak továbbítjuk a kliensnek, hanem le is mentjük azt a gyorsítótárba.
A shoutbox modifikációjára azért volt szükség, mivel a magyar (és úgy általában az ékezetes) karaktereket helytelenül kezeli. Ennek oka, hogy a daddy-shoutbox.php fájlból el kell távolítani a $_POST['nickname'] = htmlentities($_POST['nickname']); és $_POST['message'] = htmlentities($_POST['message']); sorokat. Ez után a változtatás után már nem lesz gond az ékezetes betűkkel.
A fenti eszközökkel gyakorlatilag egy délután alatt össze lehet dobni a
fenti elvárásoknak megfelelő, színvonalas megoldásokat felvonultató
galériát.
