Step-by-Step #3 2014 Maaliskuu

Haaste!  Miten tuon yksittäisen valokuvan sivustolle!

A)     Muokkaa valokuva esim. Step-by-Step 2014 Helmikuun ohjeiden mukaan

 1) Rajaa kuva; 2) Määritä kuvan koko verkossa (esim. leveys 300 pikseliä); 3) Määritä resoluutio 96 dpi; 4) Tallenne kuva jpg-muotoon. 

B)      Muokkaa tiedoston nimi esim. muotoon vvvvkkpp_klubinimi_aihe
Kuvagalleria

(lyhyenä esim. 20140129_Hki-Kallio_hallitus.jpg)Nimeämislogiikassa on kaksi tärkeää asiaa!

– nimi on looginen ja ei sekoitu jos joku muu lataa esim. klubinsa kuvan samana päivänä samalla nimellä – siksi vvvvkkpp ja klubinimi (LYHYENÄ!!)
– nimen tulisi kuitenkin olla kohtuullisen lyhyt – esim. Inner Wheel Suomi Finlandin Kansallisen Neuvoston puheenjohtajan valokuvan voisi lyhentää 20140129_IWF_KN_pj.jpg –muotoon
– tiedostonimessä ääkköset, erikoismerkit ja välilyönnit saattavat aiheuttaa ongelmia!

C)      Kuvatiedoston laittaminen sivulle (kuva omalla tietokoneella)

1) Kirjaudu omalle sivutollesi muokkauspuolelle (mustareunuksinen)
2) Avaa All Pages –valikkosta sivuluettelo
3) Valitse haluamasi sivu muokattavaksi
4) Mene sivulla siihen kohtaan johon haluat tuoda liitettävän valokuvan
5) Paina Add Media –painiketta
6) Paina Upload Files –välilehteä
7) Paina Select Files –painiketta sivun keskeltä
8) Valitse avautuvasta Windowsin-valikosta omasta kansiostasi haluamasi valokuva ja paina Avaa
9) WordPress lataa kuvasi Media Libraryyn vasemmalle ylös ja oikealta näet ko. tiedoston tietoja (joita voit muokata tarvittaessa)
10) Kuvan esimuokkaus ennen sivulle liittämistä:
a) Tarkista että äsken tuomasi kuva on aktiivinen (reunustettu ja merkki oikeassa yläkulmassa)
b) Tarkista kuvakoko (esim. kuvassaIrfanview_400x300_72.jpf)
c) Voit kirjoittaa kuvalle nimen ja muita tietoja (kannattaa kirjoitta hakujen helpottumiseksi!)

    • Title (Otsikko = kuvan nimi
    • Caption = Teksti näkyy kuvan alapuolella ns. kuvatekstinä
    • Alt Text = ”vaihtoehtoinen teksti”, näkyy joissakin selaimissa hiiren ollessa kuva yläpuolella tai jos käyttä ei lataa kuvia
    • Description = ”kuvaus”

d) Alignment -kohdasta valitset kuvan asemoinnin esim. oikealle (right)
e) Link to -kohtaan ei tarvitse tehdä mitään
f) Harmaassa ikkunassa on tiedoston nimi ja koko sijainti polku jos sitä tarvitaan!
g) Voi valita kuvakoon pienemmäksi kuin esikäsittelmäsi kuva oli

11) Paina Insert into page –näppäintä oikealta alhaalta
12) Haluamasi kuva ilmestyy sivulle
12) Voit muokata vielä kuvan paikkaa
13) Vahvista lisäys lopuksi Update –painikeella jolloin muokkaus tulee julkiseksi

D)     Kuvan paikan muuttaminen tekstissäWP-pics_tasaa

Kun kuva on tuotu haluttuun paikkaan, voidaan sen sijaintia muuttaa vielä helposti esim. vasempaan tai oikeaan reunaan.
1) Kosketa kuvaa jotta se aktivoituu (muuttuu siniseksi)
2) Paina WP:n tekstin muokkauspainikkeista a) tasaa vasemmalle, b) keskitä tai c) tasaa oikealle -painiketta. (kuvassa oikealla)
3) Update -painikkeella vahvistat siirron pysyväksi. Toiminnon voi muuttaa

E)     Kuvan voit tuoda sivulle myös valmiiksiladatusta kirjastosta!WP-pic-edit_1

Tälläin toimitaan kuten kohdassa C, mutta kuvaa ei haetakkaan Upload Files -toiminnolla omalta koneelta vaan valitaan Media Libery -välilehdltä haluttu kuva ja toimitaan muuten kuin kohdassa C.

F)     Tuodun kuvan muokkaaminen

1) WordPressissä tuotua kuvaa voi muokata aktivoimalla kuvaa jolloin se muuttuu siniseksi.
2) Paina yläkulman ”postikorttia” Edit Image -painiketta (sininen kuva oikealla)
3) Avautuvasta Edit Image -välilehdestä (kuva alla oikealla) voit muokata kuvan %-kokoa pienemmäksi; Asemoidan vasemmalle, keskelle tai oikealle; Nimetä kuvaa kuten kohdassa C;
4) Advanced Settings -välilehdellä (kuva alla oikealla) voit em. lisäksi muokata koko pikseleittäin; luoda kuvalle marginaaleja ja reunuksia; Antaa kuvalle hyberlinkin jolloin kuvan klikkaaminen vie uudelle nettisivulle.
5) Käytännössä nämä asetukset eivät aina tunnu toimivan!

WP-pic-edit_2

WP-pic-edit_3

 

 

 

 

 .

.

.

 

G)      Käy välillä katsomassa varsinaiselta sivulta, miltä kuvasi asemoituu tekstiin.

Jos olet tekemässä monien valokuvien albumeita, Innerwheelin sivuilla se tehdään NextGENGallery -ohjelmalla. Tähän ohjelmaan perehdymme myöhemmin.
Sivulle voidaan laittaa näkyviin myös videokuvaa. Sen asentaminen opastetaan myös erikseen.

Jos ladattavan tiedoston koko on hyvin suuri (esim. yli 5 MB) ja tiedosto on jossain muualla (esim. esite yrityksen sivulla) voit kopioida vain linkin jolloin itse lataaminen tapahtuu suoraa ko. yrityksen sivulta eikä sitä tarvitse ladata IW-sivustolle!

Lisätietoja weblaku