⚈ Kuopassa.net

Lisää kertomuksia netistä. 摆烂

Näin tein kuvagallerian Textpatternilla

Textpatternissa ei ole WordPressin tapaan shortcodea [gallery], mutta samanlaisen järjestelyn voi toteuttaa asentamalla esimerkiksi oivan Stef Dawnsonin koodaaman ja ilmaiseksi julkaiseman smd_gallery-lisäosan. Pluginin avulla voi järjestää Textpatterniin tallennettuja kuvatiedostoja ja pullauttaa niitä esille yksittäisissä artikkeleissa, lomakkeissa tai sivupohjissa, sekä kytkeä niihin jonkin lightboxin. Kuopassa.netin kohdalla ei ainakaan vielä ole lightboxia kuva-albumeissa, koska sellaisen laittaminen tarkoittaisi jonkin JavaScript-kirjaston lataamista jne. Haluan pitää blogin mahdollisimman pelkistettynä. Siksi kuvat näytetään yksittäisissä albumeissa thumbnaileina. Thumbnailia napsauttamalla avautuu kuvatiedosto alkuperäisessä koossaan.

Kuvagalleriapluginin smd_gallery voi käydä noutamassa Dawsonin nettisivuilta. Se asennetaan kuten mikä tahansa muukin Textpatternin lisäosa: liitetään ilmeisesti base64-koodattu koodilitania Textpatternin hallintapaneelissa sille varattuun tekstikenttään, tallennetaan ja lopuksi aktivoidaan. Sen jälkeen saadaan käyttöön esimerkiksi alla näkyvä shortcode:

<txp:smd_gallery category="raspberry-pi"
sublevel="all" thumb="0:1" thumbsize="470" wraptag="" break="p" form="galleria" />

Tuo koodi poimii kaikki kuvat kategoriasta, jonka nimi on raspberry-pi. Kohdassa thumbsize on pikseleinä "peukalonkynsikuvan" leveys. Siihen voi kai jotenkin kaksoispisteellä erottamalla liittää myös kuvan halutun korkeuden. Kohdassa wraptag halusin laittaa tyhjäksi tuon, koska siitä tulee jotain ylimääräisiä divejä tai muuta roskaa lähdekoodin täytteeksi. Attribuutti break tarkoittaa jokaisen kuvan erottelevaa tagia. Se tagi on tässä tapauksessa tekstikappaleen tagi, mutta siihen voisi tietysti laittaa luettelosolun jutskan. Lopuksi form tarkoittaa sen lomakkeen nimeä, jota käytetään yksittäisissä kuvissa. Tässä tapauksessa olen luonut Textpatternissa lomakkeen, jonka nimeksi on tallennettu galleria ja tyypiksi article. Tuo lomake sisältää tällaisen koodin:

<a rel="lightbox-{category}" href="{url}"
title="{alt}"> <txp:thumbnail id="{id}" /><br />{alt}</a>

Jokainen kuva siis ympäröidään linkillä, johon on varmuuden varalta tulevaisuuden hifistelyjä ajatellen laitettu rel-arvo. Sen voi tietysti jättää pois, kuten voi poistaa myös title-tekstin. Sen jälkeen linkin sisältä löytyy varsinainen thumbnaili ja sen alle laitetaan pakotettu rivinvaihto, eli br-tagi. Rivinvaihdon alle tulee vielä kuvalle kirjoitettu alt-teksti. Sen sijaan voisi käyttää title-tekstiä kirjoittamalla koodiin hakaväkäpäkäsulkujen sisälle {title}. Koska meikäläisen blogissa kuvilla on yleensä vain alt- eikä title-teksti, koodi näyttää tältä.

Jos haluat katsoa miltä tämä homma näyttää livenä, tsekkaa Darkest Hour -albumi. Siinä on useita thumbnaileja ja yksittäisten kuvien alla näkyy alt-teksti. Klikkaamalla tekstiä tai kuvaa kuvan pitäisi kuvan avautua koko komeudessaan.

Tietoa kirjoittajasta