Foto galerija, foto albumi na Drupalu
Foto albumi, foto galerija ulepšaće svaki sajt, bilo da je to autorski blog ili sajt kompanije. Lepi fotografije su ono što zadržava ljude na Kontaktima, Facebooku i drugim društvenim mrežama. Zato hajde da dodamo foto galeriju na svoj Drupal sajt.
Predlažem da napravimo jednostavnu galeriju pomoću efekata Colorbox. Colorbox je jQuery dodatak, bolji za korišćenje umesto thickbox i lightbox. Colorbox je praktičan jer automatski prilagođava fotografije ekranu monitora. To je veoma korisno jer danas postoje razni monitori različitih dijagonala i rezolucija.
Počnimo. Pokazaću kako napraviti foto galeriju na Drupal 7, slično je i za Drupal 6.
Biće nam potrebni sledeći moduli:
- Colorbox - http://drupal.org/project/colorbox
- Libraries API - http://drupal.org/project/libraries
- Views - http://drupal.org/project/views
- Fields API (za Drupal 7 je deo jezgra, za Drupal 6 to je modul CCK)
- Imagecache - http://drupal.org/project/imagecache
- File (za Drupal 7 deo jezgra, za Drupal 6 Filefield)
- Image (za Drupal 7 deo jezgra, za Drupal 6 Imagefield)
Za Drupal 6 je potreban i modul jQuery update da bi se ažurirao jQuery na verziju 1.3.2.
Preuzmite i instalirajte ove module.
Sada treba preuzeti sam colorbox. On se preuzima zasebno sa ovog sajta:
http://colorpowered.com/colorbox/
Arhiv sa colorbox-om treba raspakovati i potom kopirati u folder sites/all/libraries. Ako folder libraries ne postoji, napravite ga i tamo kopirajte colorbox.
U samom folderu libraries treba da imate folder colorbox:
Verovatno ste primetili da sam kopirao ceo colorbox sa primerima. Uradio sam to da biste uvek mogli pogledati kako colorbox radi.
Ako ste sve uradili ispravno, u izveštaju o stanju sistema treba da stoji:
Odlično, sve je podešeno i moduli su uključeni. Priprema je završena, hajde da kreiramo galeriju.
Galeriju ćemo napraviti u obliku albuma. Kreiraćemo novi tip sadržaja Foto album.
/admin/structure/types/add
Na ovoj stranici popunite polja:
Sada idemo na uređivanje polja novog tipa sadržaja na sledećoj stranici:
/admin/structure/types
Dodajemo novo polje Fotografije. Tip podataka za skladištenje je Slika.
U podešavanjima polja podesite neograničen broj slika za upload. Ili možete ograničiti broj fotografija u albumu, na primer na 10.
Sačuvajte polje. Naš tip sadržaja album je spreman. Ako želite da ograničite prava za kreiranje albuma, to možete podesiti na stranici za dozvole korisnika:
/admin/people/permissions
Napravimo nod albuma fotografija.
/node/add
Popunite naziv i opis foto albuma i dodajte fotografije:
Sačuvajte nod.
Trenutno se fotografije prikazuju u originalnoj veličini, ali nas zanima lepa galerija. Za to ćemo koristiti modul ImageCache.
ImageCache omogućava sečenje, menjanje veličine i boje slika koje su prikačene na node, kao što su one koje smo dodali za foto album. Kada uključite ovaj modul, biće dostupna stranica za podešavanje presetova slika. Preset je unapred definisana obrada slike, na primer, možemo napraviti preset za sečenje slike na 100x100 piksela.
Na stranici za konfiguraciju sajta pronađite podešavanja imagecache:
admin/config
Kliknite na Dodaj stil i popunite polja za naziv. Ja obično koristim naziv prema budućem preset-u, na primer scale150x150 za skaliranje 150x150 piksela. Napraviću preset crop150x150 koji će iseći sliku na 150x150 piksela. Dodajte ovaj efekat:
Odaberite širinu i visinu 150, 150. Sačuvajte efekat. Sada će naš preset crop150x150 biti dostupan na stranici za podešavanje prikaza nod-a.
Idite na stranicu sa svim tipovima sadržaja:
/admin/structure/types
Izaberite prikaz polja:
Sada podesite prikaz našeg polja za slike kao colorbox:
Nastavite sa podešavanjem prikaza polja:
Izaberite opciju Node image style: crop150x150, to jest naš kreirani preset.
Sačuvajte podešavanja.
Sada se slike prikazuju sa colorbox efektom i u dimenziji 150x150 piksela. Ali treba još malo dotjerati. Dodajte sledeći CSS kod:
.field-name-field-photos .field-item{
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
Možete prilagoditi CSS po potrebi, možda ćete imati drugačiji klasu za polje sa fotografijama ili drugačije margine. Evo konačnog rezultata – foto album prikazan kao poseban album-node:
