Artikkelien komponentit – osa 2

Kuvat ovat tärkeä osa nettisivuja. Niiden avulla sisällöstä saadaan visuaalisempi, ne ylläpitävät lukijan kiinnostusta ja voivat antaa lisätietoa. Uudella viestintäalustalla on kaksi kuvatyyppiä – Single image ja Image with text – sekä galleriakomponentti.

Single image

Single image -komponentti on sivuston peruskomponentti kuville.

Tässä vaiheessa komponentissa on kolme kokovaihtoehtoa:

• Medium: tämä vaihtoehto näyttää kuvan kiinteän kokoisen harmaan laatikon sisällä ilman, että kuvaa rajataan
• Large: tämä vaihtoehto näyttää kuvan leveämpänä kuin teksti, maksimileveys on 1380px. Korkeus on kiinteä, minkä vuoksi kuva saattaa rajautua jonkin verran.
• Extra large: tämä vaihtoehto näyttää kuvan koko sivun levyisenä. Käytä tätä kuvaa vain korkealaatuisille ja -resoluutioisille kuville! Myös tässä koossa kuva saattaa rajautua jonkin verran, koska korkeus on kiinteä.

Myöhemmin valittavana on myös pienikokoinen single image -komponentti, joka on optimaalinen pystykuville, kuten postereille ja infograafeille.

Alla näet esimerkit medium-, large- ja extra large -kokoisista single image -komponenteista.

Image with text

Image with text -komponenttia käytetään esittämään kuva tekstisisällön vieressä.

Voit valita, onko kuva tekstin oikealla vai vasemmalla puolella. Suosittelemme vaihtelemaan näiden välillä, jos käytät komponenttia useammin samalla sivulla.

Tämän hetken versiossa kuvalle varattu alue vaihtaa kokoa sen perusteella, kuinka paljon tekstiä sen vieressä on. Tulevaisuudessa on myös vaihtoehto, jossa kuva mahdutetaan aina kokonaisuudessaan tekstin viereen ilman rajausta, mikä mahdollistaa esimerkiksi infograafien lisäämisen tähän komponenttiin.

Galleria

Tämä komponentti on kokoelma kuvia, jotka on ryhmitelty galleriaksi. Galleria voi sisältää otsikon ja kuvauksen ja vapaavalintaisen määrän kuvia. Jokaisella kuvalla voi olla myös lyhyt kuvateksti.

Kuvien lisäämisessä muistettavaa:

1. Nimeä kuva. Kirjoita nimikenttään kuvan nimi ja valokuvaaja. Esimerkiksi Aalto-yliopisto / kuvaajan nimi
2. Kirjoita kuvalle ALT-teksti! Aalto University / image description / photographer: name of the photographer, esimerkiksi: Aalto University / students at Aalto University / photographer: Matti Meikäläinen. Tämä on erittäin tärkeää, koska ruudunlukijat ja hakukoneet käyttävät tätä tekstiä tai jos kuvaa ei voida ladata, tämä teksti näkyy käyttäjälle.
3. Anna kuvalle kuvateksti, jos haluat
4. Muista valita kuvalle koko, jossa haluat sen näkyvän.

Muista valita myös kuvan sijainti suhteessa tekstiin (oikealla vai vasemmalla) Image with text -komponenttien kanssa.

Ensi kertaan!