Kuvien lisääminen, ALT-teksti, kuvan rajauksen ja fokuspisteen muuttaminen

Aalto.fi-sivuston komponenttipohjaisen rakenteen vuoksi sivustolle ladattuja kuvia voidaan käyttää eri kokoisina eri komponenteissa. Kuvat voivat näkyä esimerkiksi sivujen pääkuvina (main image), nostoissa (liftup) tai kuvagallerioissa. Suurin sallittu tiedostokoko kuvalle on 10 mb. Pidä kuitenkin kuvakoko mahdollisimman pienenä ilman, että kuvan resoluutio kärsii. Tavallisesti kuvan kooksi riittää 1 mb.

Sivustolla käytetään vain Aalto-yliopiston omistamia valokuvia. Ethän käytä ulkopuolisista kuvapankeista peräisin olevia kuvia.

Pääkuva

Kaikilla sivutyypeillä (hub, artikkeli, uutinen, jne.) on yksi pääkuva (main image). Pääkuva näkyy sivun lisäksi esimerkiksi nostoissa. Käytä pääkuvana aina vaakakuvaa.

Lisää pääkuva sivulle, kun sivun muut perustietokentät on täytetty.

1. Klikkaa kohtaa “Main image” lisätäksesi pääkuvan. Voit asettaa pääkuvan tyyliksi “default”, “medium no-crop” tai “hide”. Pääkuvan piilottaminen poistaa kuvan näkyvistä itse sivulta, mutta kuva näkyy silti sivusta tehdyissä nostoissa.
2. Lataa haluamasi kuva sivustolle valitsemalla “Upload”. Voit joko etsiä kuvan tiedostoistasi klikkaamalla “Select file” tai raahaamalla halutun kuvan suoraan kohtaan “Drop files here to upload them”.

Kun lisäät sivulle uuden kuvan, täytä seuraavat tiedot:

Kuvan nimi (name)

Anna kuvalle selkeä ja informatiivinen nimi, ja kerro kuka kuvan on ottanut. Esim. Ekonominaukio 1 sisältä, Aalto-yliopiston kauppakorkeakoulun päärakennus / Matti Meikäläinen. Kuvan nimi näkyy vain muokkaustilassa.

• Huom. Sivustolla ei käytetä lyhenteitä koulujen nimistä.

Kuva (image)

Kuva, jonka olet juuri ladannut.

Vaihtoehtoinen teksti (alternative text eli alt text)

Vaihtoehtoinen teksti on yksi tärkeimmistä kuvalle lisättävistä tiedoista, sillä se liittyy sivuston saavutettavuuteen ja esteettömyyteen. Esimerkiksi näytönlukijat ja hakukoneet käyttävät vaihtoehtoista tekstiä. Teksti näytetään myös silloin, jos kuva ei jostain syystä lataudu.

Kun kirjoitat vaihtoehtoista tekstiä, älä ainoastaan kerro mitä kuvassa on. Vaihtoehtoisen tekstin tulisi myös osoittaa kuvan tarkoitus suhteessa sivun muuhun sisältöön. Mieti tilannetta, jossa lukija ei näe kuvaa vaan kuulee ainoastaan kirjoittamasi tekstin: saako hän tekstin avulla kattavan käsityksen kuvan sisällöstä?

Hyvä esimerkki:

Kauppakorkeakoulun päärakennuksen sisätilat. Ihmisiä kävelee portaita alas ja jotkut istuvat pöytien ääressä.

• yksityiskohtainen kuvaus kertoo, mitä kuvassa näkyy ja tapahtuu

Huono esimerkki:

Kauppakorkeakoulun päärakennus

• liian yleinen teksti ei kerro tarpeeksi kuvan sisällöstä

Kuvateksti (caption)

Kuvatekstin lisääminen ei ole pakollista, mutta kerro aina kuvaajan nimi kun se on mahdollista. Voit käyttää kuvatekstissä samaa kirjoitustyyliä kuin vaihtoehtoisessa tekstissä (esim. Kauppakorkeakoulun päärakennuksen sisätilat - kuva: Aalto-yliopisto, Matti Meikäläinen)

Tallenna

Muista tallentaa kun olet täyttänyt kaikki tiedot.

Voit tarkistaa miten fokuspisteen muuttaminen vaikuttaa kuvan rajaukseen eri komponenteissa käyttämällä "Preview"-painiketta (esikatselu), joka löytyy kuvan alta sivun muokkaustilassa (ks. alla oleva kuva).

Eri kuvakoot on nimetty kuvasuhteeseen viittaavilla kirjaimilla ja numeroilla, kuten "2.3_1380w_600h_n". 2.3 viittaa leveyden ja korkeuden suhteeseen (leveys = 2.3 * korkeus). Tämän numeron jälkeen tulee leveyden ja korkeuden pikselikoot (1380 pikseliä leveä ja 600 pikseliä korkea). Jotkin esikatselun kuvakoot on nimetty tietyn komponentin mukaan, kuten "small liftup", jotta näet miltä kuvasi näyttäisi kyseisessä komponentissa.

Muut kuvat

Mikäli käytät sivullasi kuvina infografiikkaa tai diagrammeja, huomaathan, että saavutettavuuden varmistamiseksi niiden tulee olla sivulla myös tekstimuodossa.

Pääkuvan lisäksi voit ladata sivuille kuvia käyttämällä seuraavia komponentteja:

• Quote (kun lisäät lainauksen kuvan kera)
• Image with text (kun lisäät tekstiä kuvan kera)
• Single image (kun lisäät vain kuvan, koossa: M, L tai XL)
• Gallery (kun lisäät monta kuvaa samaan kohtaan kuvatekstien kera)
• Slider (kun esittelet lyhyitä nostotekstejä kuvien kera)

Opi, miltä nämä komponentit näyttävät!Kaikki edellä mainitut komponentit voidaan piilottaa kieliversioista tarvittaessa. Piilottaaksesi komponentin, ota valinta pois komponentin alussa olevasta kohdasta "Show this component in this language".