Korinaa kuopasta

Jo 582 juttua!

Tilaa RSS tai Atom

Satunnainen taustakuva CSS:n ja PHP:n avulla

Laitoin tänään aamulla tähän blogiin sellaisen uudistuksen, joka ilmenee blogin käyttäjille taustakuvion vaihtumisena satunnaisesti jokaisen sivulatauksen päätteeksi. Tämä satunnaisen taustakuvion valitseminen on toteutettu parilla rivillä PHP-koodia ja CSS-merkkausta. PHP on se, joka valitsee annettujen sanojen sopasta jonkun satunnaisen sanan ja printtaa sen sivun lähdekoodiin avaavan body-elementin selektoriksi. Sen jälkeen kun selektori on paikoillaan, voidaankin kopeloida ulkoasun esitystapaa (kuten sitä taustakuviota) CSS:n voimin.

Ensimmäisenä on luotava PHP-koodilitania, jolla sen CSS-selektorin arpominen onnistuu. Löysin tätä tarkoitusta varten jonkun koodikikkareen, jota vähän virittelin sopimaan parhaiten uutta tarkoitustaan varten. Lopputuote alla. Todennäköisesti Jukka osaisi tämän koodin tehdä tiiviimmin ja toimivammin, mutta hänen magiaansa odotellessa tämä alla näkyvä toimikoon esimerkkinä.

<?php
$taustakuvio[] = "punainen";
$taustakuvio[] = "vihrea";
$taustakuvio[] = "harmaa";
$taustakuvio[] = "violetti";
srand ((double) microtime() * 1000000);
$randomizoi = rand(0,count($taustakuvio)-1);
echo $taustakuvio[$randomizoi];
?>

Tämä koodi tekee tiedettävästi ainakin sen, että se valitsee sanoista punainen, vihrea, harmaa ja violetti satunnaisesti jonkun ja sitten laittaa sen näkymään nettisivun lähdekoodiin. Ruudulle ilmestyy kerralla vain yksi noista sanoista, ei siis useita eikä kaikkia. Arvottu sana ilmestyy lähdekoodissa siinä kohdassa, jossa tämä PHP-juttu suoritetaan. Jotta tämä koodi toimisi body-elementissä selektorina, laitetaan vaikka näin:

<?php
$taustakuvio[] = "punainen";
$taustakuvio[] = "vihrea";
$taustakuvio[] = "harmaa";
$taustakuvio[] = "violetti";
srand ((double) microtime() * 1000000);
$randomizoi = rand(0,count($taustakuvio)-1);
echo "<body id=\"".$taustakuvio[$randomizoi]."\">;
?>

No niin. Tuo PHP-koodi olisi nyt sitten sullottava nettisivun lähdekoodiin oikealle paikalle. Jos lähdekoodista löytyy jo entuudestaan sellainen tsydeemi kuin <body>, niin laitetaan yllä näkyvä arpakone sen tilalle.

Seuraava vaihe on viimeinen. Laitetaan CSS-merkkaus paikoilleen. Meillä on tässä koodiesimerkissä yhteensä neljä eri selektoria. Laitetaan neljän erilaisen taustakuvan CSS-merkkaukset kuntoon. Niistä yksi aktivoituu satunnaisesti. Käytän näissä taustakuvaa liittyvissän hommeleissa mallina tämän blogin tyylitiedostosta (rakenne.css) löytyviä merkkauksia.

body {
background-color: #000;
background-repeat: repeat;
background-attachment: fixed;
}
body#punainen {
background-image: url(../images/tausta.jpg);
}
body#violetti {
background-image: url(../images/tausta2.jpg);
}
body#vihrea {
background-image: url(../images/tausta3.jpg);
}
body#harmaa {
background-image: url(../images/tausta4.jpg);
}

Tässäpä nyt sitten nähdäänkin nääs, että sellaiset sivut, joissa ei ole käytössä minkäänlaista CSS-selektoria sen aikaisemmin mainitun body-tagin kohdalla, ulkoasun taustaväri tulee olemaan pelkästään musta — taustakuviota ei ilmesty lainkaan.

“Tämän” kytkeminen Textpatterniin

Tällaisen toiminnon kytkeminen Textpatterniin onnistuu useilla eri tavoilla, mutta niissä kaikissa on syytä olla järjestelmän hallintapaneelin asetuksista sallittu PHP-koodin suorittaminen yleisellä tasolla ja sivupohjissa. Textpatternissahan on oletuksena deaktivoitu kaikenlaisten PHP-koodien käyttäminen ilmeisesti tietoturva-asioiden takia. Textpatterniin kytkeminen ei välttämättä vaadi erikseen muutoksia tuohon yllä esitettyyn CSS:ään.

Satunnaisen taustakuvan arpovan masiinan installoiminen TXP:hen esittämässäni ratkaisussa kaipaa yhden lomakkeen luomista. Lomakkeen nimeksi annetaan randomizaattori ja lomaketyypiksi asetetaan misc. Lomakkeen sisälle laitetaan nämä rivit:

<txp:php>
$taustakuvio[] = "punainen";
$taustakuvio[] = "vihrea";
$taustakuvio[] = "harmaa";
$taustakuvio[] = "violetti";
srand ((double) microtime() * 1000000);
$randomizoi = rand(0,count($taustakuvio)-1);
echo $taustakuvio[$randomizoi];
</txp:php>

Sen jälkeen kun tuo lomake on laitettu valmiiksi, se kutsutaan käyttöön sivupohjassa laittamalla tällaista:

<body id="<txp:output_form form="randomizaattori" />">

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ää "Satunnainen taustakuva CSS:n ja PHP:n avulla" muokattiin viimeksi 4079 päivää sitten, eli maanantaina 28.12.2009 kello 09:09.Tähän kirjoitukseen ei ole naputeltu yhtään kommenttia.

Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 0 kommenttia. Tämä artikkeli on lokeroitu kategoriaan . Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2009/08/22/satunnainen-taustakuva-cssn-ja-phpn-avulla.

Korinaa kuopasta: Satunnainen taustakuva CSS:n ja PHP:n avulla.

Selaat tällä hetkellä blogimerkintää Satunnainen taustakuva CSS:n ja PHP:n avulla. Se julkaistiin 22. päivä elokuuta 2009. 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!