V tomto návode chcem (okrem toho čo sa píše v názve) ukázať hlavne dve veci: 1) netreba na každú "hlúposť" sťahovať modul 2) ak sa budeme správať podľa bodu 1), naučíme sa veci, ktorých použitie je mnohokrát univerzálnejšie a použiteľnejšie a nestaneme sa nám, že pri použití nejakého modulu narazíme na jeho limity a ostaneme v koncoch. Ukážeme si ako pridať jQuery do témy, ukážeme si ako sa dá jednoducho upravovať template súbor pre Views a pomocou tohto si prispôsobiť zobrazenie Views prakticky akokoľvek. Budem používať štandardnú inštaláciu Drupalu 6 - pokojne si ju niekde vytvorte a môžte ísť "so mnou" krok o kroku. Tento návod som písal počas toho ako som to robil, takže by nemalo chýbať nič podstatné. 1. Nainštalujeme moduly CCK, FileField, Imageapi, ImageField, ImageCache a Views. Predpokladám, že viete ako sa to robí a ktoré submoduly presne treba pozapínať aby ste boli schopní vytvoriť typ obsahu s poľom pre obrázok, prípadne pridať takéto pole k existujúcemu typu obsahu. 2. Pridáme obrázok k typu obsahu Story. Nebudem v článku rozoberať dopodrobna ako sa to robí, predpokladám, že vytvoriť pole pomocou modulu CCK vie každý, kto sa o Drupal čo len obtrel, ale upozorním na dôležité veci. Ak z nejakého dôvodu povolíte uploadovať obrázky návštevníkom stránky, venujte pozornosť obmedzeniam veľkosti aby vám nezaplnili diskový priestor zbytočne veľkými obrázkami. Keďže chcem ukázať ešte jednu užitočnú fintu vo Views, nechajme toto pole nepovinné. [* http://petiar.sk/sites/default/files/cck_obrazok.png *] *** Naše nové CCK pole 3. Pre účely tohto článku som nechcel vytvárať novú tému, ale budeme potrebovať mierne upravovať css a budeme tiež do adresára témy pridávať súbory a keďže nie je dobrý nápad robiť to v adresári tém dodávaných s Drupalom, skopírujme si Garland do nášho adresára (sites/default/themes/), takže adresár našej témy bude sites/default/themes/garland. 4. Teraz si vytvoríme nejaký testovací obsah, to znamená niekoľko článkov na ktorých budeme testovať ako sa naša slideshow zobrazuje. Vytvorte jeden článok aj bez obrázku. Na to, ako sa obrázky zobrazujú v článkoch ako takých teraz ohľad brať nebudeme. Pravdepodobne ich máte v originálnej veľkosti pod textom článku, ale o to teraz nejde. Nám ide o to ako sa budú zobrazovať v rámci View(s). 5. Poďme si teraz vytvoriť ImageCache preset, ktorý budeme používať. Slideshow budeme umiestňovať do ľavého stĺpca, ktorého vnútorná šírka v téme Garland je 195px, takže túto zvolíme aj pri vytváraní ImageCache presetu. [* http://petiar.sk/sites/default/files/left_195px.png *] Ten nazveme napríklad slideshow a pridáme mu akciu Add Scale. Zaškrtnutím Allow Upscaling zaručíme aby boli aj obrázky užšie ako 195px zväčšené na 195px. Nevýhodou je, že v tomto prípade budú obrázky nekvalitné, takže ak sa tomuto chcete vyhnúť, špecifikujte minimálne rozlíšenie už pri vytváraní poľa pre obrázok (bod 2). [* http://petiar.sk/sites/default/files/imagecache_preset.png *] Samozrejme, že takto vytvorený preset môže mať za následok, že jednotlivé obrázky budú mať rôznu výšku, ak nemajú rovnaký pomer strán. Ak chcete aby mali obrázky v slideshow aj rovnakú výšku, použite akciu Add Scale and Crop. 6. Teraz vytvoríme View. Bude celkom jednoduché - zobrazíme obrázok, názov a celé to bude aktívny odkaz na článok. Lenže nebudeme využívať možnosti Views ako napríklad Link this field to its node (prelinkovať pole na článok), pretože my budeme robiť kúzla vo Views template. Takže obrázok, názov i cestu vytvoríme len ako jednoduché polia bez popisov. Na zobrazenie obrázku použijeme vytvorený ImageCache preset a cestu k článku generujeme absolútnu, takže výsledné View bude vyzerať nejako takto: [* http://petiar.sk/sites/default/files/view_prve.png *] Všimnite si, že môj prvý článok No image at all nemá žiadny obrázok a preto ho v slideshow nechceme. Ako takýto článok vyfiltrovať? Tu je tá finta - vytvorte Relationship pre pole Obrázok a nastavte ho ako požadovaný (Require this relationship). To je celé. Čo teraz potrebujeme spraviť? Chceme, aby sa nadpis článku nachádzal niekde vovnútri obrázku a aby sa odkaz nezobrazoval, ale bol použitý na to, aby celý obrázok odkazoval na svoj článok. Preto ideme upraviť template pre toto view a tuto začína celé krásne kúzlo témovania Views. Ak ste to ešte nespravili, vytvorte display typu Block. V základných nastaveniach kliknite na Theme: Information. Ukáže sa vám kompletný zoznam súborov, ktoré sa dajú použiť pre prispôsobenie zobrazovania Views. Zhora dole ide o skupiny súborov pre jednotlivé úrovne View - od template súboru pre celkové View až po súbory pre jednotlivé polia. Style output a Row style output sa samozrejme prispôsobujú podľa rovnako pomenovaných vlastností v základných nastaveniach. V rámci jednej úrovne sú potom jednotlivé templaty zobrazené podľa ich platnosti - od najvšeobecnejších po najkonkrétnejšie, pričom aktívny súbor je zvýraznený tučným písmom. Napríklad súbor **views-view-fields.tpl.php** (pri Row style output) bude platiť pre všetky Views, ktoré majú nastavený Row style na Fields (polia), ale súbor **views-view-fields--slideshow--block-1.tpl.php** bude platiť len pre View s názvom slideshow a len pre prvý Block display. Takto si môžte určiť na ktoré Views majú mať vaše úpravy dopad - či sú všeobecné pre všetky alebo špecifické, pre jedno konkrétne View, prípadne display. My si vyberme napríklad súbor s názvom **views-view-fields--slideshow--block.tpl.php** - tento platí pre všetky display typu Block v rámci View slideshow. Vytvoríme súbor s týmto názvom v adresári témy. Keď kliknete na názov typu súboru (Row style output), zobrazí sa vám jeho východzí obsah. Skopírujte ho do nami vytvoreného súboru a uložte. Keď to máme, vráťme sa do Theme: Information a kliknime na Rescan Template Files. Systém prehľadá template súbory a zistí či niekde nejaký nepribudol. Keďže nám pribudol, mal by sa miesto **views-view-fields.tpl.php** zvýrazniť tučným súbor **views-view-fields--slideshow--block.tpl.php**. Tak vieme, že Drupal bude pri generovaní View brať do úvahy nami vytvorený template súbor. A teraz sa na ňom poďme vyblázniť! [* http://petiar.sk/sites/default/files/theming_info.png *] Ten súbor ako taký je veľmi konvenčný - vezme každé pole a zobrazí ho podľa jeho nastavení, pričom mu pridá blokový alebo inline oddeľovač. To nechceme, my si vytvoríme úplne iný HTML markup, takže celý ten súbor (okrem komentárov, tie sa môžu zísť) zmažeme. Obsah každého poľa sa nachádza v premennej $fields['nazov_pola]->content, pričom nazov_pola je identifikator konkrétneho poľa. Ten najlepšie zistíme tak, že pôjdeme do nášho View, v zozname polí klikneme na úplne posledné a tam na Rewrite the output of this field. Vzory pre nahradenie nám ukážu identifikátory jednotlivých polí: [* http://petiar.sk/sites/default/files/field_names.png *] Teraz už vieme, že naše polia sa nachádzajú v týchto premenných: /---code php $fields['field_story_obrazok_fid']->content \--- (obrázok), /---code php $fields['title']->content \--- (názov) a /---code php $fields['path']->content \--- (odkaz). A poďme na náš templatovací súbor! Z celkom pochopiteľných dôvodov, ktoré pramenia zo znalostí CSS a ktoré tu preto nemusíme dopodrobna rozoberať, napíšeme niečo takéto: /---code html
\--- Všimnite si, že náhľad sa nám už trochu zmenil - síce to stále ešte nie je slideshow a názov článku je stále pod obrázkom, ale celý ten slide je odkazom na článok, aha: [* http://petiar.sk/sites/default/files/view_druhe.png *] V tomto momente sme s View skončili, pretože všetko ostatné už spravíme pomocou CSS a jQuery, takže View môžme uložiť a pridať ho do ľavého bloku, úplne hore nech nemusíme skrolovať. Tak poďme na to CSS najprv, nech sa pohneme trošku ďalej. Vytvorme si v adresári témy súbor slideshow.css a do súboru garland.info pridáme tento riadok (prečo, o tom píšem v inom návode): /---code stylesheets[screen][] = slideshow.css \--- Do súboru slideshow.css napíšeme zhruba toto /---code css .obrazok {position:relative;} .nazov {position:absolute;top:10px;left:10px;background:#fff;} \--- a nemusíme to vysvetľovať, keďže CSS by ste mali vedieť. Vy pravdepodobne budete chcieť, iné, možno s priehľadným pozadím, atď, toto je len taký základ pre účely tohto návodu. Nie moc pekný, ale funkčný. Naše View v ľavom bloku teraz vyzerá takto nejako: [* http://petiar.sk/sites/default/files/view_tretie.png *] Nakoniec nám chýba túto slideshow ešte rozhýbať. K tomu je úplne ideálny jQuery plugin Cycle, o ktorom sa viac dozviete na stránke http://jquery.malsup.com/cycle/. My potrebujeme len tento plugin stiahnuť a súbor jquery.cycle.min.js nakopírovať do adresára témy a podadresára js, nech je v tom poriadok. Ale ešte musíme drupalu o tomto súbore povedať. Dá sa to dvojako, buď v súbore template.php takýmto riadkom: /---code php drupal_add_js(drupal_get_path('theme', 'garland') .'/js/jquery.cycle.min.js'); \--- alebo doplníme odkaz na tento súbor do garland.info, asi takto: /---code js scripts[] = js/jquery.cycle.min.js \--- Vy si môžte samozrejme vybrať nejaký iný plugin, pre jQuery je ich strašne veľa. Posledný krok, ktorý nám ostáva, je aplikovať tento plugin na nami vytvorené View. Vytvoríme si preto súbor pre nami definované jQuery funkcie, nazvime ho napríklad functions.js, nakopírujem do podadresára js adresára témy a pridajme do Drupalu jedným z vyššieuvedených spôsobov. Do súboru functions.js napíšeme (v zmysle dokumentácie k Cycle pluginu) toto: /---code js $('document').ready(function() { $('.view-slideshow .view-content').cycle(); }) \--- Prečo práve tento selector? Plugin Cycle funguje tak, že vezme všetky podradené elementy daného selectoru a z tých potom vytvorí slideshow. No a keďže vo Views sú riadky obalené práve triedou .view-content, použili sme tú. Ale aby sa tento plugin neaplikoval na všetky Views na našej stránke, obmedzili sme tento selector použitím .view-slideshow. To je všetko, po tomto kroku by ste mali mať slideshow obrázkov, ktoré sa menia takým fade efektom. Praktický príklad si pozriet napríklad na titulke mpba.sk (je to neziskový projekt). Ak chcete použiť iný efekt, musíte si preštudovať možnosti Cycle pluginu, prípadne použiť iný plugin - to už je na vás, základy javascriptu/jQuery by ste mali vedieť. V tomto návode sme upravovali len jeden template súbor pre Views, ale pozrite si aj iné. Práca s týmito súbormi je základ úprav grafického vzhľadu akéhokoľvek webu v Drupale. Nabudúce mám pre vás nachystané už takmer hardcore úpravy týchto súborov, tak sa pripravte.
Pridať nový komentár