Otsikosta voisi olettaa mahtavampaakin ohjelmanpätkää, mutta tämä on itse asiassa aika yksinkertainen ja suoraviivainen projekti. Minun piti luoda visuaalinen lisäke eräälle WordPress-pohjaiselle webbisivustolle, jota juuri olin uudistamassa, ja käytin ensiksi WordPressin omaa galleriatoimintoa. Galleriassa oli viisi kuvaa testejä varten. Kuvat asettuivatkin kahteen riviin siten, että ensimmäisellä rivillä oli kolme ja toisella kaksi kuvaa. Sattumalta niistä siis muodostui eräänlainen portaikko. Sain siitä idean portaikon täydentämiseksi kolmiportaiseksi vielä yhdellä rivillä ja yhdellä kuvalla. Kuvat valittaisiin satunnaisesti suuremmasta galleriasta.
WordPressin oman gallerian hyödyntämisen haittapuolia on, että se sisällyttää galleriaan omat CSS tyylit ja HTML tagit. Jotta tästä päästäisiin eroon on teeman functions.php tiedostoon lisättävä yksi funktio.
add_filter (
'gallery_style', create_function (
'$a',
'return preg_replace("%<style type=\'text/css\'>(.*?)</style>%s", "", $a);'
)
);
Olen rikkonut koodin rivejä, jotta ne mahtuisivat tähän tilaan, mutta tämä on käytännössä yksirivinen pätkä. Gallerian alkuperäiset tyyliohjeet, jotka pitää nyt lisätä style.css tiedostoon voit katsoa sivel.net:istä, josta löysin ylläolevan koodinkin.
Mutta, sepä siis ei vielä riitä. Tarkoitustani varten minun piti luoda galleria tyhjästä ja päästä vaikuttamaan sen HTML tageihinkin. Ensiksi täytyy luoda uusi sivu ja siihen kuvagalleria. Tämä sivu toimii näkymättömänä kuvapankkina. Sivu voi olla myös yksityinen ja sen ei siis tarvitse näkyä millään lailla. Tarinaa lyhentääkseni esitän nyt koodin, jolla kuvat noudetaan ja galleria esitetään PHP:lla. Käytin koodin pohjana WP outfitter -blogin artikkelia.
<?php
echo '<div>';
$images = get_children(array( 'post_type' => 'attachment',
'numberposts' => 6,
'orderby' => 'rand',
'post_status' => null,
'post_parent' => 104,
'post_mime_type' => 'image'
));
if ($images) {
$k=1;
foreach ( $images as $image ) {
$img_title = $image->post_title;
$img_url = wp_get_attachment_url($image->ID);
$img_thumb = wp_get_attachment_thumb_url($image->ID);
echo '<dl id="image_'.$k.'"><dt>';
echo '<a href="'.$img_url.'"><img src="'.$img_thumb.
'" alt="'.$img_title.'" /> </a>';
echo '</dt></dl>';
$k++;
}
}
echo '</div>';
?>
Koodi hakee kuusi satunnaista kuvaa postauksesta numero 104, joka minun tapauksessani on näkymättömän galleriasivun numero. Seuraavaksi haettujen galleriakuvian titlet sekä alkuperäisen kuvan että kuvaa vastaavan thumbnailin osoitteet tallennetaan muuttujiin. Ylhäällä oleva PHP-pätkä on sijoitettava siihen template-tiedostoon, johon haluavat uuden gallerian tulevan.
Olen tässä käyttänyt echoa tuottamaan samat HTML-tagit kuin mitä WordPressin alkuperäinen galleria käyttää, ja tagien joukkoon sisällytetään muuttujat tallennettuine tietoineen. Ylläolevalla koodilla on siis mahdollista paketoida galleria mihin tahansa HTML-tageihin. Muuttuja $k on kiinnostava, koska sitä käytetään ainutlaatuisen ID:n luomiseen jokaiselle kuudelle kuvalle. Ensimmäinen kuva saa id=”image_01″ ja niin edespäin. Tämä on tärkeää, koska jQueryn pitää yksilöidä kuvat. Seuraava koodinpätkä pitäisi sijoittaa edellisen PHP-kokonaisuuden jälkeen.
<script>
jQuery(document).ready(function() {
jQuery('#image_1,#image_2,#image_3').wrapAll('<div id="upperrow" />');
jQuery('#image_4,#image_5').wrapAll('<div id="middlerow" />');
jQuery('#image_6').wrapAll('<div id="bottomrow" />');
});
</script>
Tässä jQuery poimii tietyn ID:n omaavat kuvat ja paketoi ne vastaavilla DIVeillä. Tämän olisi luultavasti voinut tehdä PHP:lla, mutta menee itselleni liian vaikeaksi. jQueryllä oikeat työkälut olivat suoraan valmiita. Kaikilla DIVeillä on sama tyylisääntö {float:left;clear:both}, jolloin ne sijoittuvat eri riveille.
Valmista galleriaa voi ihailla Yacht Club Recordsin etusivulla. Jos jQuery-osuuteen rakentaisi silmukoita ja laskimia ja muuttaisi alkuperäistä kuvien määrää suuremmaksi niin olisi mahdollista luoda varsin suuria kuva/ikoni tai liitetiedostogallerioita ja satunnaisia visuaalisia elementtejä.
