⚈ Kuopassa.net

Lisää kertomuksia netistä. 摆烂

Artikkelikuva kuvatekstillä

Tämäkin on TXP-aiheinen minivinkki. Textpatternilla toimivalla nettisivustolla voidaan liittää blogimerkintään tai muulle sivulle oma artikkelikuvansa hyvin helposti, sillä siihen tarvitaan vain kuvan ID-numero, joka tallennetaan artikkelin kirjoitussivulla sitä varten varattuun tekstikenttään. Sen jälkeen järjestelmä voi tarvittaessa näyttää kuvan jossakin kohdassa yksittäistä artikkelisivua tai artikkelien listausta, mikäli tarvittava tagi kun käytössä. Kuvan esittäminen edellyttää yksinkertaisimmillaan <txp:article_image />-tagin lisäämistä vaikkapa single-lomakkeessa johonkin kohtaan. Artikkelikuvasta voidaan näyttää sen alkuperäinen koko, tai miniatyyriversio. Tässä oppaassa liitetään artikkelikuvan yhteyteen kuvateksti. Se onnistuu luomalla yhden custom_field-kentän.

Kuvatekstiä varten tarvitaan siis custom_field-kenttä, jonka nimeksi voidaan laittaa vaikkapa Kuvateksti. Sen jälkeen avautuu paljon mahdollisuuksia. Kuvateksti voidaan esimerkiksi liittää artikkelikuvan alapuolelle, tai yläpuolelle, tai sivuun tai jättää se kokonaan näyttämättä. Vaihtoehtoja riittää. Esimerkissäni kuva näytetään vain jos sille on olemassa kuvateksti. Teksti laitetaan kuvan alapuolelle. Esimerkki kuuluu:

<txp:if_custom_field name="Kuvateksti">
<p class="artikkelikuva">
<txp:article_image escape="html" thumbnail="1" />
<strong><txp:custom_field name="Kuvateksti" escape="html" /></strong>
</p>
</txp:if_custom_field>

Tämä koodi tsekkaa aluksi onko Kuvateksti-nimiseen kenttään kirjoitettu jotain. Jos on, sen jälkeen luodaan tekstikappale, jossa ryhmäselektorina on artikkelikuva. Tuon selektorin avulla tekstikappale voidaan CSS:n avulla nykäistä sivuun floattaamalla tai jotenkin muuten. Kuvateksti kääritään strong-tagin sisälle. Sitä ei tietenkään ole pakko kääriä mihinkään, vaan voi yhtä hyvin tehdä oman maun mukaan. Tässä lopuksi esimerkki CSS-muotoiluista:

p.artikkkelikuva {
float: right;
margin: 0 0 10px 10px;
}

p.artikkelikuva img {
display: block;
clear: both;
}

Tietoa kirjoittajasta