Google Website Translator

torstai 11. helmikuuta 2016

Linkillinen kuvatorni sivupalkkiin

Joskus tekee mieli hieman koristaa omilla gadgeteilla sivupalkinkin tietoja. Liityin HelMet-lukuhaasteeseen ja sain idean linkillisen monikuvatornin rakentamiseen samaan haasteeseen osallistuvalta Into et vimma-blogin Riitta K:lta. Tarkoituksenani on rakentaa kuvista kuvatorni ja jokaisesta kuvasarjasta löytyy linkki postaukseen, jossa kerron kuvan kirjoista tarkemmin.

Kuvan teko ja sen lataaminen nettiin


Toteutuksen aloitin tammikuussa tekemästäni kirjapostauksesta. Tein siinä käsitellyistä kolmesta kirjasta kollaasin, pienensin se siten, että kuvan leveydeksi tuli 240px (max. sallittu sivupalkissa on kai 270px) ja tallensin sen koneelleni.


Seuraava vaihe on ladata kuva nettiin. Parasta tässä tapauksessa on ladata käyttämäsi kuva johonkin palveluun, jota itse valvot. Se voi olla joko blogi itse tai esimerkiksi Flikr. Wordpressillä on oma tapansa kuvien lataukseen (Media->Add New). Bloggerilla nopein tapa saada nettiosoite on avata uusi, tyhjä sivu "Luo uusi teksti"-toiminnolla ja lisätä sivulle tarvitsemasi kuva. Kun menet sen jälkeen katsomaan sivun HTML-koodin, Google on tallentanut kuvan omalle palvelimelleen ja kuvan osoite näkyy koodissa.


Kopioi linkin osoite ja talleta se jonkin sanankäsittelyohjelman (esim. Notepad) sivulle.

Gadgetin teko


Jos tallensit kuvasi nettiosoitteen, voit sulkea tyhjän sivun ja poistaa sen. Valitse Bloggerissa sen jälkeen sivun vasemmasta laidasta Ulkoasu. Valitse sivupalkin (joko oikea tai vasen) kohdasta Lisää gadget. Gadgeteissa on kohta "Kuva", mutta sitä kautta saat lisättyä vain yhden kuvan, et rakennettua kuvatornia. Niinpä valitsemme gadgetin muodoksi HTML/Java script.


Seuraavaksi kirjoitamme koodin, jolla gadgettiin saadaan näkymään haluamasi kuva ja kuvaan linkki haluamallesi sivulle. Oma koodini hakee tässä vaiheessa pylvääseen kollaasin "Kirja1" Googlen palvelimelta ja ohjaa sitä klikattaessa avaamaan erilliselle välilehdelle blogipostaukseni "Kivikautta, eläinrakkautta ja Suomen historiaa omituisesti".


Koodi alkaa div-tagilla, joka sijoittaa kuvan kivasti sivupalkin keskelle. Olen lisännyt siihen myös hieman alamarginaalia ajatellen, että seuraava liitettävä kuva ei tule aivan kiinni tähän ensimmäiseen (margin-bottom: valitse noin 10-20px). Eli <div style="text-align:center margin-bottom: 10px">. En sulje lopullisesti tätä tagia, koska haluan sen määritelmien vaikuttavan koko sitä seuraavan rimpsun ajan.
Seuraavaksi luomme ankkuritagin <a></a>.  Sen sisällä kerromme parametrilla href mihin linkin pitää johtaa ja linkin ollessa kuvassa tagilla <img> kuvan osoitteen parametrilla src.
Alussa avaamme tagin a (<a) ja kirjoitamme sen sisään linkin osoitteen href="http://se osoite, jonka haluat avautuvan kuvaa klikatessa".  Ennen parametrin href sulkemista olen lisäksi määritellyt, että linkki aukeaa uuteen välilehteen eli target="_blank". Sen jälkeen suljen parametrin merkillä >, mutten koko a-tagia.
Nyt olemme siis määritelleen, mihin linkki johtaa. Nyt pitää lisätä tagiin kuva, jota klikkaamalla päästään linkatulle sivulle. Tätä varten lisäämme kuvan nettiosoitteen eli kuvan lähteen (source). Lisäämme tagin <img src="tähän nettiosoite, jonka kopioit aiemmin sanankäsittelyohjelman sivulle". Loppu teksti oman tagini sisällä on varmistusta. Jos tallensit kuvasi kuvankäsittelyohjelmalla alunperin haluttuun kokoon, käytä varmuuden vuoksi tässä sen korkeus (height) ja leveys (widht) - pikselimääriä. Jos sensijaan olet tuonut torniisi jonkin mitoiltaan suuremman kuvan, on sinun sovitettava sen korkeus ja leveys sivupalkkiin sopivaksi määrittelemällä sen julkaisukoko. Viimeinen määritelmä alt kertoo kuvan nimen, joka näkyy kuvan tilalla pylväässä, jos kuva ei jostain syystä lataudu (esim lähteen osoite on väärä). Samoin se kertoo hakukoneille, mistä kuva kertoo. Img tagin päättää lopetus />.
Lopuksi päätämme alussa avaamamme a ja div-tagit järjestyksessä viimeksi avatusta ensiksi avattuun eli </a> </div>.

Tallenna koodi, sulje koodinmäärityssivu ja siirrä uusi gadgettisi siihen kohtaan sivupalkkia, jossa haluat sen näkyvän blogisivullasi. Esikatsele blogisivusi ja jos olet tyytyväinen, tallenna sivun asettelu.

Näin kuvapylvääseen on lisätty ensimmäinen linkin sisältävä kuva. Kun lisäät seuraavan, toista koko koodi väliltä <div> </div>. Näin voit lisäillä pylvääseen niin monta allekkaista kuvaa kun haluat.

Kristiina

P.S.Jos tykkäät kikkailusta ja haluat tälle pylväällesi vielä komean otsikon, kirjoita tyylisesi otsikko kirjasinlajeineen, -kokoineen ja -väreineen jollakin HTML-editorilla, kopioi HTML-koodi ja liitä se ylimmäksi tälle HTML/Java-script koodisivulle.

Ei kommentteja:

Lähetä kommentti

Mielipiteesi on aina tervetullut :)