Temiranje Views, pravimo šablone view.tpl.php (polja, redovi, blokovi, stranice). Povezujemo jQuery plugin EasySlider

U ovom članku ćemo se upoznati sa konstruktorom upita za Drupal - modulom Views (http://drupal.org/project/views). Views omogućava prikazivanje polja različitih tipova sadržaja, komentara, termina, korisničkih informacija i drugih podataka iz baze podataka. Za ovaj modul postoji grafički interfejs koji omogućava lako pravljenje upita ka bazi pomoću miša.

Pažnja!!! Ako želite odmah koristiti easySlider u narednom satu, toplo preporučujem da koristite modul. Ovaj članak je prvenstveno namenjen za razumevanje Views šablona i njihove tematizacije. Za podešavanje izgleda easySlider-a moraćete sami da menjate CSS.

Nakon što smo prikazali potrebna polja, treba ih rasporediti kako nama odgovara. Za to postoje fajlovi šablona za prikaz. Po defaultu se koriste fajlovi iz foldera theme.

Postavimo jQuery plugin EasySlider za podatke koje prikazuje modul Views. Postoji gotov modul integrisan sa Views za EasySlider, link ka njemu je http://drupal.org/project/easySlider

Ako treba prikazati slike kao slider, možete samo instalirati taj modul. Ovaj članak uči kako raditi sa Views šablonima.

Za početak treba instalirati module Views, CCK, Imagecache i skinuti fajlove plugina easySlider ovde ili na drugom mestu putem pretrage. Kako instalirati plugin u Drupal temu opisaću kasnije, nakon podešavanja CCK polja.

1. Kreirajte novi tip sadržaja

Dodajte polje za upload slike i sačuvajte. Poziciju polja možete pomeriti gore.

Za polje podesite neograničen broj slika i dodajte opise slika.

2. Kreirajte čvor (node) tipa Baner i učitajte nekoliko slika za prikaz u baneru.

3. Napravite preset za slike koje ćete prikazivati. Ja sam napravio preset 200x200 px, možete koristiti svoje dimenzije.

Dodajte obradu slike Scale And Crop, ponavljam, moje dimenzije su 200x200, vi možete druge.

4. Spremni smo za prikaz (kroz modul Views) polja sa slikama kao listu u posebnom bloku:

Kreirajte novi view (prikaz)

Dodajte polje Slika

Podesite da nema grupisanja vrednosti, uklonite naslov polja, i izaberite veličinu slike koju ste kreirali presetom.

Filteri:

• Sadržaj: Objavljeno - da
• Sadržaj: Tip - Baner

Osnovne postavke:

• Stil: HTML List

Dodajte prikaz u blok.

Ovako će izgledati preview:

5. Dodajte blok u neki region i pogledajte prikaz.

Nije baš slider. Instaliraćemo easySlider.

6. Raspakujte easySlider, koji ste skinuli na početku članka. U folderu plugina postoje primeri prikaza slidera, uzimamo drugi primer iz 2.html. Kopirajte CSS iz tog primera u style.css vaše teme, a slike iz foldera images plugina u folder images vaše teme.

7. U folderu js plugina nalazi se fajl easySlider1.5.js koji treba kopirati u folder vaše Drupal teme, najbolje u folder js. Povežite fajl u fajlu teme ime_temate.info dodavanjem koda za učitavanje tog JS-a.

Očistite keš i proverite da li je fajl easySlider1.5.js povezan:

Otvaranjem tog fajla videćete uputstvo koji blok treba da ima slider za ispravan rad.

Sada pogledajte blok kroz Firebug za Firefox, Dragonfly za Opera ili DOM-inspector u Chrome-u. Ja koristim Firebug jer mi je najzgodniji.

Vidimo da Views dodaje mnogo divova koji pomažu u pravljenju izgleda, ali sada smetaju i treba ih ukloniti.

8. Vratite se u kreirani view i kliknite na link Theme: information gde dobijate listu šablona koje možete menjati za prikaz.

Šabloni sa podebljanim nazivom su oni koji se koriste po defaultu u folderu theme modula Views. Pored njih su imena fajlova koje možete kreirati za override. Da biste prepisali šablon napravite fajl sa odgovarajućim imenom, na primer views-view-fields--view-banner.tpl.php.

Prvo pogledajte sadržaj fajla views-view-fields.tpl.php:

Na vrhu je komentar označen zelenom bojom. Ceo prikaz je u foreach petlji koja ispisuje svaku stavku. Sledeći su separatori polja koje ne želimo prikazivati, ali ih nećemo uklanjati u originalnom fajlu već ćemo napraviti kopiju sa imenom views-view-fields--view-banner.tpl.php i kopirati je u temu. $field->label je naslov polja, kod nas ga nema pa ćemo i njega ukloniti. Dalje ide $field->inline_html koji obično obavija svaki zapis u div, to ćemo izbaciti i ukloniti odgovarajuću zatvarajuću liniju:

<?php print $field->inline_html;?>

Sačuvajte šablon, obrišite Drupal keš i pogledajte kod u Firebugu:

Sada su li tagovi blizu slika, ostalo je ukloniti span tagove. U šablonu to je:

<?php print $field->element_type; ?> class="field-content">

i

<?php print $field->element_type; ?>

Nakon čišćenja ostao je ovakav kod:

Smanjili smo dosta od default šablona, ali je to dovoljno. Sačuvajte i pogledajte prikaz:

Već mnogo bolje, uskoro slider radi. Sada ćemo koristiti drugi šablon da uklonimo:

<div class="view-content"><div class="item-list">

To ćemo uraditi preko još jednog šablona views-view--view-banner.tpl.php koji kreiramo u temi, a kod uzimamo iz views-view.tpl.php. U tom šablonu su korisni blokovi sa klasama koji obavijaju ceo prikaz:

<div class="<?php print $classes; ?>">

Naslov view-a (ne polja, već sam naslov koji se posebno podešava):

<?php if ($header): ?>
  <div class="view-header">
    <?php print $header; ?>
  </div>
<?php endif; ?>

Izloženi filteri (exposed filters) koji omogućavaju dinamičko filtriranje view-a:

<?php if ($exposed): ?>
  <div class="view-filters">
    <?php print $exposed; ?>
  </div>
<?php endif; ?>

Prilozi pre prikaza view-a:

<?php if ($attachment_before): ?>
  <div class="attachment attachment-before">
    <?php print $attachment_before; ?>
  </div>
<?php endif; ?>

Polja prikazana u view-u:

<?php if ($rows): ?>
  <div class="view-content">
    <?php print $rows; ?>
  </div>
<?php elseif ($empty): ?>
  <div class="view-empty">
    <?php print $empty; ?>
  </div>
<?php endif; ?>

Pager (paginacija):

<?php if ($pager): ?>
  <?php print $pager; ?>
<?php endif; ?>

Prilozi posle view-a:

<?php if ($attachment_after): ?>
  <div class="attachment attachment-after">
    <?php print $attachment_after; ?>
  </div>
<?php endif; ?>

Link "read more":

<?php if ($more): ?>
  <?php print $more; ?>
<?php endif; ?>

Footer view-a:

<?php if ($footer): ?>
  <div class="view-footer">
    <?php print $footer; ?>
  </div>
<?php endif; ?>

RSS ikona:

<?php if ($feed_icon): ?>
  <div class="feed-icon">
    <?php print $feed_icon; ?>
  </div>
<?php endif; ?>

Izostavimo sve suvišno i dobijemo sledeći rezultat:

Sada uklonimo

<div class="item-list"></div>

Ovaj blok je definisan u šablonu views-view-list.tpl.php, zamenjujemo ga fajlom views-view-list--view-banner.tpl.php.

Da bismo uklonili ostale nepotrebne div-ove, dodajemo izmene u šablon block.tpl.php. Ako nemate ovaj šablon u temi, kopirajte ga iz modula Block u temu kako biste mogli da ga menjate.

Izmenićemo kod u block.tpl.php da uklonimo suvišne blokove i dodamo blok sa id="slider", dodajući uslov if:

Promenljiva $block->delta generiše Drupal zavisno od modula koji pravi blok. U mom slučaju za baner je ova vrednost označena plavom bojom:

Obrišite keš i pogledajte stranicu, trebalo bi da izgleda ovako:

Prvo ide div id="slider", zatim ul, pa li tagovi (ul > li).

Sada dodajte mali JavaScript za inicijalizaciju slidera:

JavaScript možete dodati direktno u page.tpl.php ili u poseban fajl, npr. js/custom.js

EasySlider radi, ali je potrebno još podesiti CSS za ispravan izgled:

Naravno, lakše je koristiti gotov modul za prikaz karusela ili slidera. Ali šta ako takvog modula nema, a postoji jQuery plugin? Ne treba čekati da neko napiše modul za vas.