Kuopassa.net

Lisää kirjoituksia netistä.

Etsi blogista

Artikkelikuva kuvatekstillä

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

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;
}

Saatat olla kiinnostunut näistä:
Tietoa kirjoittajasta

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