Arvosanan esittäminen. Tyylikkäästi.
- Julkaistiin sunnuntaina 11. maaliskuutata 2007.
- Ei saa kommentoida!
- Luettu 2369 kertaa
- Tagit: css, textpattern
Tässä kirjoituksessa kerrotaan miten Textpatternilla julkaistun artikkelin yhteydessä esitettävän arvosanan tai -numeron voi korvata sen graafisella vastineella. Arvosana syötetään TXP:ssä sille varattuun custom_field-kenttään. Kenttään syötetty numero tai muu arvo tunnistetaan TXP:n sisäänrakennetun if_custom_field-toiminnon avulla ja korvataan CSS:n avulla sen graafisella vastineella.
Idea on yksinkertainen ja sen toteuttaminenkin on melko helppoa. Varttitunnissa saat rakennettua esim. levyarvosteluja varten helppokäyttöisen arvostelutoiminnon. Toimiva esimerkki löytyy Gootti.net-sivustolta, jossa on levyarvostelu Scream Silence -nimisen bändin uusimmasta albumista. Arvostelun lopussa nähdään albumille annetut “pisteet”. Tuossa tapauksessa pisteet annettiin väliltä 0–5. Levylle annettiin neljä pistettä (kts. kuva), jotka korvattiin julkaistussa artikkelissa kuvatiedostolla.
“Korvaaminen” on tässä tapauksessa harhaanjohtava termi, sillä käytännössähän teksti vain piilotetaan kuvan alle.
Aloitellaan. Luodaan ensin Textpatternin hallintapaneelista uusi custom_field, jonka nimeksi annetaan Levyarvostelun pisteet (0-5). Kun tuo kenttä on luotu, se näkyy TXP:n “Kirjoita”-välilehdessä, siinä vasemmassa sivupalkissa.
Seuraavaksi laitetaan ehtolauserykelmä kuntoon. Se on melko helposti toteutettu:
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="0"><p class="pisteet pist0"><span>Pisteet:</span> 0/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="1"><p class="pisteet pist1"><span>Pisteet:</span> 1/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="2"><p class="pisteet pist2"><span>Pisteet:</span> 2/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="3"><p class="pisteet pist3"><span>Pisteet:</span> 3/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="4"><p class="pisteet pist4"><span>Pisteet:</span> 4/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="5"><p class="pisteet pist5"><span>Pisteet:</span> 5/5</p></txp:if_custom_field>
Näyttääkö monimutkaiselta ja hankalalta hahmottaa? Ajatus tuon toiminnon takana on äärimmäisen yksinkertainen. Otetaanpa yksi if_custom_field-koodi käsiteltäväksi ja katsotaan mitä se oikein tekee:
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="0"><p class="pisteet pist0"><span>Pisteet:</span> 0/5</p></txp:if_custom_field>
Tuossa yläpuolella näkyy siis pätkä koodia, mikä siis laitetaan siihen Textpatternin lomakkeeseen, jota käytetään artikkelissa. Koodi tarkistaa onko custom_field-kentässä, minkä nimi on Levyarvostelun pisteet (0-5), arvo 0. Arvo tarkoittaa tässä tapauksessa pisteitä (arvosanaa!). Jos arvo on 0, silloin esimerkissä tulostetaan tällaista (X)HTML-merkkausta:
<p class="pisteet pist0"><span>Pisteet:</span> 0/5</p>
Yllä näkyy siis normaali tekstikappale, mille on annettu kaksi ryhmäselektoria (pisteet ja pist0). Ne viittaavat CSS-merkkaukseen, jota kirjoitamme myöhemmin. Voisimme toki käyttää myös id-selektoria, mutta vain siinä tapauksessa, ettei samalla nettisivulla taatusti näytetä kahta artikkelia, joissa käytetään tätä arvostelusysteemiä. Ryhmäselektorien käyttäminen on järkevää jos esim. levyarvosteluja on samalla sivulla useita kappaleita.
Tekstikappaleen sisälle on laitettu sana “Pisteet”, joka on kääritty span-elementin sisälle. Tämä sen vuoksi, että voimme tarttua siihen myöhemmin CSS:n kautta — laitamme nimittäin kaikki muut tekstikappaleen sisälle tungetut kirjaimet ja merkit piiloon CSS:n avulla. (Koska haluamme laittaa tavallisen tekstin tilalle grafiikkaa.)
Yllä näkyvä tekstikappale tarkistaa mikäli sille määritellyn custom_field_-kentän arvo on 0. Tämähän on selvä juttu. Jos se arvo on se, niin arvosana on 0. Argh. Onpas monimutkaista. Jos arvosana on 0, niin ruudulle tulee näkyviin tällaista:
Pisteet: 0/5
Tuohan se tulee näkyviin. Ei mitään muuta. Jos kyseisen custom_field-kentän arvo on jokin muu kuin 0, silloin tätä yllä näkyvää tekstikappaletta ei näytetä. Tuohon voimme kuitenkin ulottaa CSS:n lonkerot. Olemme valmistelleet ko. tekstikappaleen merkkauksen siihen pisteeseen, että voimme korvata tekstikappaleessa näkyvän “0/5”-pötkön kuvatiedostolla. Meillä on tekstikappaletta varten selektori, millä siihen pureudutaan. Tässä vaiheessa itse kunkin on syytä tuntea itsensä hyvin miehekkääksi ja voimakkaaksi. Meillä on nimittäin keinot pistää tuo pikkuruinen p-elementti sellaiseen solmuun, ettei mitään rajaa.
Tuo pistemäärä voidaan piilottaa ja laittaa sen tilalle vaikkapa tähtiä. Vaikkapa viisi kappaletta tähtiä. Tyhjiä, himmeitä, tähtiä. Esimerkiksi sellaisia, mitä tuossa alapuolella näkyy.
Voimme käyttää myös noita tämän artikkelin alussa näkyviä tähtiä. Siinä on yksi iso läjä tähtiä, joita voi käyttää. Kaikki tähdet on sijoitettu ja tallennettu samaan kuvatiedostoon, jota käytetään kaikkien pistemäärien esittämisessä. Ei tarvitse nysvätä useiden eri kuvatiedostojen kanssa kun pidetään koko tähtikokoelma samassa kasassa.
CSS-merkkaus
p.pisteet {
text-indent: -9999px;
overflow: hidden;
display: block;
height: 50px;
/* Pituutta kannattaa varata riittävästi: */
width: 200px;
/* p-elementti relatiiviseksi, jotta span-elementtiin kääritty teksti saadaan irrotettua haluttuun kohtaan: */
position: relative;
}
p.pisteet span {
/* span-elementtiin käärittyä tekstiä ei piiloteta: */
text-indent: 0;
/* Sijoitetaan span-elementti p-elementin sisällä haluttuun paikkaan: */
position: absolute;
top: 15px;
left: 10px;
}
/* Seuraavaksi vuorossa itse tähdet: */
p.pist0 {
background: url(pisteet.png) no-repeat 40px 100%;
}
p.pist1 {
background: url(pisteet.png) no-repeat 40px -200px;
}
p.pist2 {
background: url(pisteet.png) no-repeat 40px -150px;
}
p.pist3 {
background: url(pisteet.png) no-repeat 40px -100px;
}
p.pist4 {
background: url(pisteet.png) no-repeat 40px -50px;
}
p.pist5 {
background: url(pisteet.png) no-repeat 40px 0;
}
Kannattaa huomata, että tuossa yllä näkyvässä tähtien esitystapaa määrittelevässä CSS-litaniassa ylimmäisenä määritellään se kuva, jonka pisteet (tai arvosana) on 0. Ylimmäinen koodiklimppi esittää siis esimerkkikuvan alimmaiset tähdet.
Toinen huomionarvoinen seikka, joka koskee samaa CSS-rypästä, on pisteet.png-kuvatiedoston sijoittaminen p-elementin pituussuunnassa alkamaan 40 kuvapikseliä vasemmasta laidasta. Esimerkissähän p>-palikka on 200 pikseliä pitkä. Siihen pituussuuntaan sijoitetaan sekä span-elementtiin kääritty teksti, että kuvatiedosto. Teksti on sijoitettu tässä tapauksessa tähtien vasemmalle puolelle.
Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.
Luetuimpia blogimerkintöjä
Blogimerkintää "Arvosanan esittäminen. Tyylikkäästi." muokattiin viimeksi 5834 päivää sitten, eli maanantaina. Kirjoitukseen on julkaistu kommentteja 2 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Korinaa kuopasta: Arvosanan esittäminen. Tyylikkäästi.
Selaat tällä hetkellä blogimerkintää Arvosanan esittäminen. Tyylikkäästi. Se julkaistiin 11. ä. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!