I, blackshtef

Vidjeli ste ovo na mnogim blogovima, mali dio obično negdje u footeru (kod mene je baš gore :) ), gdje se uzimaju slike sa Flickr accounta blogera, i random izborom prikazuju kao mali thumbnailovi (okej, znam da je ovo pleonazam, al eto). Isto sam i ja htio imati kod sebe, i ovaj template je i imao to već, ali mi se nije sviđalo kako je to izvedeno.

Naime, uz ovaj template dođe flickrRSS plugin i samo ga treba aktivirati, te podesiti koliko slika da prikazuje. Također, potrebno je bilo nekako izvući i svoj ID sa Flickra, al dobro, postoje alati za to, poput flickr IDgettr. Zapravo, nije toliko to ni problem, pogotovo jer je prikaz plugina moguće potpuno prilagoditi svojim potrebama u CSS-u, ali čemu posebni plugin, kad sâm Flickr nudi nešto takvo?

Izrada bedža i dobivanje potrebnog kôda

1. Klik na gornji link. Ili ovdje.
2. Ono što nama treba jest HTML badge, ne Flash. HTML nam treba jer ćemo iz njega izvući komad JavaScript kôda koji u biti sve radi. Ostatak CSS-a ćemo maknuti/izmjeniti prema svojim potrebama, ali nama je trenutno najbitnijij taj JS kôd. Klik na Next: Choose photos
3. Na ovom koraku odabirete koje će slike prikazivati. Vaše, tagirane, iz nekog seta, ili sve s flickra. Tu odaberete što hoćete, ali valjda ćete na svom blogu prikazati svoje slike :)
   Uglavnom, ja sam odabrao All of your public photos i kliknuo na Next: Layout
4. Pod layout opcijama, maknite vašu buddy ikonu (smeta samo), broj fotografija za prikaz uzmite bilo koji (njega kasnije mijenjamo, i možemo staviti broj koji mi želimo, iako je tu ograničeno na samo par izbora), which ones – vama na izbor, what size preporučam na square i pod orientation odaberite zadnju opciju, None, jer ste kul i sami ćete sve izdizajnirati ;)
   Klik na Next: Colors.
5. Ovdje samo kliknite Next: Preview & Get code, ili eventualno – stavite kvačicu na No background i No border.
6. Dobili ste vaš bedž. Ispod njega se nalzi textbox sa kôdom kojeg jednostavno copy/pasteate na pravo mjesto i to bi trebalo biti to. Ali idemo to malo izmjeniti.
   Ja sam dobio sljedeći kôd:

www.flickr.com
 

Editing The Code

Možemo vidjeti da se ovaj kôd u biti sastoji od tri dijela. Prvi dio sadržava stilove za sve, drugi dio jest za ono www.flickr.com, a treći dio je zapravo ono bitno, skripta koja će prikazivati naše fotografije.
Bitan nam je ovaj dio:

Ako se malo bolje zaviri u kôd, možete vidjeti ustvari koje stvari trebamo promijeniti, da mi dobili ono što hoćemo:

count=3 - broj fotografija za prikaz, remeber, po defaultu je bilo samo par opcija, ovdje može biti proizvoljan brojdisplay=random - način prikazasize=s - oblik (square, thumb...)
source=user - naše fotke ili sve itd.
user=56394744%40N00" - od kojeg usera. Nisam probavao, ali vjerojatno možete prikazivati i nečije fotke, samo sa idGettrom treba pribaviti odgovarajući ID

Kod mene je jedino promijenjen broj fotografija sa 3 na 4, pa ta linija kôda u konačnici izgleda ovako:

Styling

Idemo sad to malo urediti. Prvo treba maknuti sav onaj CSS koji nam je Flickr stavio, jer ga nećemo koristiti.

1. Definiramo izgled samog DIV-a u kojem će se prikazivati slike

   .Flickr { width:214px;height:154px;
   padding:14px 0 0 0px;
   margin-top:10px;
   margin-bottom: 80px;
   }

2. Zatim ćemo definirati izlged thumbnailova

   .Flickr img { float:left;margin:0 0px 5px 5px;
   border: 1px dotted #555;
   background:#0097CA;
   padding:10px;
   width:70px;
   height:70px;
   }

3. Na kraju, mali dio koji će nam uljepšati one hover trenutke, osobno volim kada pređem mišem preko linka, pa se nešto promijeni, nešto blicne, promjeni boju i slično.

   .Flickr img:hover { background: #09182A;border: 1px solid #555;
   }

Tako. Dalje je ostalo možda još malo šminke, prilagođavanje dizajnu vašeg bloga i slično. Ovo kod mene je jedan odličan template za WordPress, made by Design Disease, pa sam prilagodio njemu.

Inače, ovo je moj prvi tutorial onak, pa ako sam previše otišao u detalje, neka :)

Kategorija: Tutorials