Pinottu kuva ja teksti eli 'Image and text stacked' -komponentti
Pinottu kuva ja teksti -komponentti, eli 'Image and text stacked', on mediakomponentti, jossa kuva ja teksti on pinottu päällekkäin, eli kuvaan liittyvä teksti näytetään kuvan alapuolella. Komponentti sopii parhaiten käyttöön silloin, kun yhdellä sivulla halutaan esitellä esimerkiksi useita eri tapahtumia tai projekteja. Kuvan ja tekstin lisäksi komponenttiin pystyy lisäämään tapahtuman sijainnin sekä linkin ulkoiselle sivustolle.
Komponenttia voi käyttää seuraavissa aalto.fi-sivuston sisältötyypeissä: sivu (engl. article), hubi ja palvelusivu. Komponentti on kaikkien aalto.fi-editorien käytettävissä.
Sivulta alempaa löytyy esimerkki komponentista ja ohjeet sen käyttöön.
'Image and text stacked' -komponentti
Kuva ja teksti 1
Kuvan alla näytetään kuvaan liittyvä teksti. Jos komponenttia käytetään esimerkiksi tulevien tapahtumien esittelyyn, kuvan alapuolella olevassa tekstissä voi kertoa tapahtumasta tarkemmin.
Tekstin pituudelle ei ole merkkirajoitusta. Jos teksti on pitkä, koko tekstin saa auki klikkaamalla painiketta 'Lue lisää'. Tämän jälkeen tekstin voi halutessaan pienentää klikkaamalla painiketta 'Piilota kuvaus'.
Teksti ja kuva 2
Kuvausteksti.
Ohjeet Pinottu kuva ja teksti -komponentin käyttöön
Komponentti sisältää alla esitellyt muokattavat kentät.
Komponentin peruskentät:
- Title (suom. otsikko): Kirjoita otsikko komponentille.
- Description (suom. kuvaus): Kirjoita tarkempi kuvaus komponentille. Kuvausteksti ei ole pakollinen
- Component theme (suom. komponentin teema): Valitse komponentin taustaväri Aallon brändiväreistä. Komponentin oletusväri on valkoinen.
Yksittäisen kuvan ja tekstin muokattavat kentät:
- Title (suom. otsikko): Kirjoita pinotulle kuvalle ja tekstille otsikko. Otsikko näytetään kuvan alla.
- Image (suom. kuva): Lisää haluttu kuva.
- Caption (suom. kuvateksti): Kirjoita kuvalle kuvateksti. Kuvateksti on hyvä mainita valokuvaajan nimi.
- Text (suom. teksti): Kirjoita tekstikenttään kuvan alle tuleva teksti.
- Location icon (suom. sijaintikuvake): Valitse kuvake, joka näytetään ennen sijaintia. Oletuskuvakkeena on paikkamerkki.
- Location (suom. sijainti): Kirjoita tapahtuman sijainti. Sijainnin merkitseminen ei ole pakollista.
- External link: URL (/fi/palvelut/pinottu-kuva-ja-teksti-eli-image-and-text-stacked-komponentti/suom. ulkoinen linkki: URL): Jos tapahtumalla on sivu muualla kuin aalto.fi-sivustolla, lisää komponenttiin ulkoisen sivun URL-osoite.
- External link: Link text (suom. ulkoinen linkki: Linkkiteksti): Kirjoita ulkoiselle URL-osoitteelle linkkiteksti. Linkkiteksti tulee näkyville komponenttiin.
Kun kuva ja teksti on lisätty, voi lisätä niitä enemmän klikkaamalla komponentin muokkausnäkymässä kohtaa 'Add Stacked image & text -item'.
Katso lisää ohjeita mediakomponenttien käyttöön
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.
Kuva tekstillä eli "Image with text" -komponentti
Lue alta lisää kuvan sijoituksesta sekä adaptiivisesta ja oletusasetuksesta image with text -komponenttia käytettäessä.
Kuvien lisääminen, ALT-teksti, kuvan rajauksen ja fokuspisteen muuttaminen
Vaihtoehtoinen teksti (alt-teksti) on oleellista saavutettavuudelle. Kuvan fokuspisteen muuttaminen vaikuttaa kuvan rajaukseen.
