Kuopassa.net

Lisää kirjoituksia netistä.

Etsi blogista

Köntsävaroitus

Huomaan täällä blogissa nurisevani asioista niin usein, että koen tarpeelliseksi varoittaa lukijoitani mikäli he ovat saamassa silmilleen valituspitoisen blogipostauksen. Tämä postaus on tunnistettu sellaiseksi. Jos valittaminen ei just nyt inspaa, siirry lukemaan jotain muuta.

Näin tein kuvagallerian Textpatternilla

Kirjoitettiin
Päivitettiin 8. kesäkuuta 2014 kello 01.44

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.

Saatat olla kiinnostunut näistä:
Tietoa kirjoittajasta

"Näin tein kuvagallerian Textpatternilla" on saanut pisteet 6 yhteensä 10 pisteestä. Julkaisu on pisteytetty 1 kerran. Tämä juttu mukaan laskettuna blogissa on julkaistu yhteensä 1286 kirjoitusta. Tämän sivun niin sanottu kestolinkki on tässä siltä varalta jos haluat linkittää siihen esimerkiksi blogista tai joltain foorumilta. Tagi tai tagit: .

Tsekkaa myös minkälaisia valokuvia teen: www.pjti.fi