Drupal: Aalto.fi-sivusto

Kuvasuhde

Kuvat ovat erittäin tärkeä osa aalto.fi-kokemusta. Kuvien avulla käyttäjille tarjotaan miellyttävä ja mielenkiintoinen verkkovierailu. Sisällöntuottajien työn tukemiseksi on luotu työkaluja, joiden avulla voidaan miettiä ja kontrolloida tapaa, jolla kuvia käytetään alustalla: komponentista ja laitteen koosta riippuen kuvia voidaan leikata niin, että ne sopivat eri kuvasuhteisiin.

Mikä on kuvasuhde?

Kuvasuhteella tarkoitetaan kuvan leveyden suhdetta kuvan korkeuteen riippumatta siitä, miten suuri kuva tosiasiassa on. Se ilmaistaan yleensä kahdella numerolla, joiden välissä on kaksoispiste, esimerkiksi 16:9.

 
Nykyiset aalto.fi-alustalla käytettävät kuvasuhteet
Alkuperäinen kuvasuhde 1:1 1.6:1 1.8:1 2.3:1
Original aspect ratio
Alkuperäinen kuvasuhde (Original ratio)

Alkuperäinen kuvasuhde (Original ratio)

Voit esittää kuvia aalto.fi-sivustolla niiden alkuperäisessä kuvasuhteessa (ilman leikkauksia). Tätä suositellaan silloin, kun kuva on esitettävä kokonaisuudessaan, esimerkiksi infografiikka tai logo. Tässä komponentit, joissa kuvat esitetään alkuperäisessä suhteessa:
 

  • Yksittäinen kuva: kun lisäät sivullesi yksittäisen kuvan, valitse Medium-esitystapa. Lue lisää kohdasta Yksittäinen kuva
  • Kuva tekstillä: kun lisäät yksittäisen kuvan sivullesi, valitse oletusesitystapa. Lue lisää kohdasta Kuva tekstillä
  • Huom. Sisältösivuilla vain pääkuvassa: kun kuva määritetään pääkuvaksi, valitse asetukseksi keskisuuri, ei leikkausta.

1:1 Aspect ratio
Neliökuvasuhde (Square ratio)

1:1 – neliökuvasuhde (Square ratio)

Neliökuvasuhde leikkaa kuvan neliön (tai ympyrän) muotoiseksi. Tätä kuvasuhdetta käytetään alustalla eri kohdissa, mukaan lukien:

  • Manual Liftups
  • Uutis- ja tapahtumaluettelot (pöytäkonenäkymässä)

Vain hub-toimittajille:

  • Käyttäessäsi Hero magazine -komponenttia, kuva on automaattisesti aina kuvasuhteessa 1:1 eli neliö.

  • Voit muokata oman hub-sivusi pääkuvan sopimaan 1:1-ympyrään Hub description -komponentilla valitsemalla Medium-esitystavan. Lue lisää kohdasta Hub description -komponentti.

Aspect ratio 1:6
Vaakakuvasuhde (Landscape ratio)

1.6:1 ja 1.8:1 – vaakakuvasuhde (Landscape ratio)

Nämä kuvasuhteet ovat lievästi vaakamuodossa. Niitä käytetään alustalla eri paikoissa, mukaan lukien:

  • Single Image, Large ja Extra large, mobiililaitteissa
  • Events Liftups
Aspect ratio 2.3:1
Voimakas vaakakuvasuhde (Very Landscape ratio)

2.3:1 – voimakas vaakakuvasuhde (Very Landscape ratio)

Tämä kuvasuhde on voimakkaasti vaakamuodossa. Sitä käytetään suurten ja rajattomien kuvien esittämiseen, minkä avulla voit luoda visuaalisesti vaikuttavia sivuja. Komponentit, joissa kuvat esitetään 2.3:1-suhteessa:

  • yksittäinen kuva: kun lisäät sivullesi yksittäisen kuvan, valitse Large tai Extra Large -esitystapa. Lue lisää kohdasta Yksittäinen kuva
  • Hub description -komponentti: voit tehdä oman hub-sivusi pääkuvasta rajattoman valitsemalla Large-esitystavan Hub Description -komponentille. Lue lisää kohdasta Hub description -komponentti.

UKK

Lisää ohjeita kuvista ja kuvakomponenteista

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

Vaihtoehtoinen teksti (ALT-teksti) on oleellista saavutettavuudelle. Kuvan fokuspisteen muuttaminen vaikuttaa kuvan rajaukseen.

Väre building in the campus. Inside shot of natural light filled dark wood staircase criss-crossing in white surroundings. Light through skylights. Photo by Aalto University / Tuomas Uusheimo

Aalto.fi-sivuston kuva- ja mediakomponentit

Kuva- ja mediakomponentteja voi näyttää usealla eri tavalla aalto.fi-sivustolla. Lisätietoja media slider-, galleria- ja videokomponenteista sekä kuvista.

Vinkkejä kuvien käyttöön aalto.fi-sivustolla

Kuvat ovat oleellinen osa sisällön luomista aalto.fi:ssä. Tässä blogissa katsomme tarkemmin millaisia kuvia voit sisällössäsi käyttää, miten kuvia voi muokata, jotta ne näyttävät hyvältä kaikilla laitteilla ja mitä taas tulee välttää kuvaa valitessa.

Ihmisiä istumassa seinässä olevissa koloissa. Kuvaaja: Unto Rautio / Aalto-yliopisto
  • Julkaistu:
  • Päivitetty: