Avaleht » Ajaveeb » kaido ajaveeb

Kuidas luua kena galerii kasutades Drupal CCK moodulit ja pisut CSS-i

November 7, 2009 lisas kaido
Posted in

Soovisin mõnda aega tagasi lisada igale sissekandele eraldi pildigaleriid. Ja kuna ma olen ise olen suhteliselt laisk ja samas usun mu kliendid ei soovi koodiga jännata (Tegelikult neid ei huvitagi see), siis lisasin Drupalile sellise toreda süsteemi, mis võimaldab kliendil lisada igale sissekandele täpselt sellise hulga pilte nagu ta soovib. Ja nagu tänapäeval galeriidele kohane on lisatud ka slaidisõu ja muud vidinad. Vaata näidet.. http://liilialilled.ee/pulmaseaded

Ok, alustame töödega. Esmalt laeme alla mõned moodulid ja paigaldame need Drupal sisuhaldusplatformile lisades need Sinu drupal kataloogi sites/all/modules/ kausta.

Lülita moodulid järgi.   jäta järgi panematta ImageAPI ImageMagick.

Mine www.endaveeb.ee/admin/build/imagecache ja seadista imagecache moodul. Esmalt vali lisa uus vaade  ja seadista vaated. Tegin 2 vaadet pisipilt ja suurem vaade.


Järgnevalt saan seadistada cck väljad. Esmalt valid administratsioonis sisu tüübi lisamise / muutmise ja  seal saad lisada uue välja. Välja tüübiks valid fail ja järgmisest rippmenüüst image / Pilt

ning seadistad valides display fields / seadista väljad

Nüüd on su võimalus lisada / hallata lehele lisatavaid pilte. Lisades uut sissekannet tekib sulle allolev võimalus. 

Siiski ei ole meie töö lõpuni viidud. Nüüdseks on meil lehel üksteise all asuvad pildid, kuid me soovime neid gruppeerida. Soovime seda galeriid lisada üles alla või kusagile kolmandasse kohta. Siin tuleb appi CSS. 

Esmalt määratleme klassid millele soovime lisada reegleid. Selles on abiks Google Chrome Developer tools (parem klõps ja inspekteeri elementi. Võib ka vaadata lihtsalt allikat (view source inglisekeelsetes sirvijates).  Arendaja vaade Firefox puhul on Firebug.

Nüüd tuleb siis määratleda CSS reeglid. Siin olevad reeglid kirjuta kasutades tekstiredaktorit enda css faili kujul.

.field-field-pildid-all .field-item {
display: inline;
float:left;
height:160px;  /* see oleneb teie enda faili kõrgusest.. ja seda ei ole vaja kaasa lisada, mis kaldkriipsu ja tärni vahel*/
width:33% /* st teil on kolm faili teineteise kõrval ja mahuvad kenasti ;) */
}

 Juhul kui soovite sarnaseid raame lisage css dokument veel paar rida.

field-item-pildid-all .field-item img {
border: solid grey 5px;
}