Kuva tekstillä eli "Image with text" -komponentti
Image with text -komponentti
Image with text -komponentissa kuvan voi sijoittaa joko vasemmalle tai oikealle. Suositeltavaa on, että kuvien sijoittelua käytetään sivuilla vuorotahdissa, eli esimerkiksi ensin vasemmalla, sitten oikealla ja taas vasemmalla jne.
Lisäasetuksena kumpaankin kuva-asetteluun (oikea tai vasen) valitaan vielä joko Default- tai Adaptive-asetus. Katso kuvat alla, joista näkee, kuinka teksti asemoituu tämän komponentin eri asetusten kanssa.
Suosittelemme, että vaihtelet näitä asetuksia, jos käytät Image with text -komponenttia useamman kerran samalla sivulla.
Otsikko
Tässä näet Image with text -komponentin, jossa kuva on sijoitettu oikealle rajauksella "default" (media placement: default image on the right). Tämä asetus säilyttää kuvan alkuperäisen kuvasuhteen riippumatta sen vieressä olevan tekstin pituudesta. Pidempi teksti kiertyy kuvan alle.
Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.
Alla tekstiä latinaksi täytteeksi, jotta näet miltä komponentti näyttää pitkän tekstin kanssa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Otsikko
Tässä näet Image with text -komponentin, jossa kuva on sijoitettu oikealle rajauksella "adaptive" eli mukautuva (media placement: adaptive image on the right). Tämä asetus venyttää kuvaa suhteessa sen vieressä olevaan tekstiin. Pidempi teksti ei kierry kuvan alle. Tätä asetusta suositellaan käytettävän kuvituskuville, joilla ei ole selkeätä fokuspistettä.
Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.
Alla tekstiä latinaksi täytteeksi, jotta näet miltä komponentti näyttää pitkän tekstin kanssa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Otsikko
Tässä näet Image with text -komponentin, jossa kuva on sijoitettu vasemmalle rajauksella "default" (media placement: default image on the left). Tämä asetus säilyttää kuvan alkuperäisen kuvasuhteen riippumatta sen vieressä olevan tekstin pituudesta. Pidempi teksti ei kierry kuvan alle.
Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.
Alla tekstiä latinaksi täytteeksi, jotta näet miltä komponentti näyttää pitkän tekstin kanssa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Otsikko
Tässä näet Image with text -komponentin, jossa kuva on sijoitettu vasemmalle rajauksella "adaptive" eli mukautuva (media placement: adaptive image on the left). Tämä asetus venyttää kuvaa suhteessa sen vieressä olevaan tekstiin. Pidempi teksti ei kierry kuvan alle. Tätä asetusta suositellaan käytettävän kuvituskuville, joilla ei ole selkeätä fokuspistettä.
Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.
Alla tekstiä latinaksi täytteeksi, jotta näet miltä komponentti näyttää pitkän tekstin kanssa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Muita Drupal-vinkkejä ja ohjeita
Komponentit: kuinka luot sisältöä?
Täältä löydät tietoa eri komponenteista ja siitä, miten niitä voi käyttää aalto.fi-sivustolla.
Single liftups -komponentti
Single liftup -komponentin avulla voidaan nostaa toiselta sisäiseltä sivulta kuva ja johdantoteksti.
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.
Kuvasuhde
Aalto.fi-sivustolla hyödynnetään erilaisia kuvasuhteita, jotka skaalautuvat niin pienille kuin isommillekin näytöille. Kerromme, kuinka voit hyödyntää tätä toimintoa ja varmistaa, että kuvasi näyttävät hyviltä.
Viestintäpalvelut
- Julkaistu:
- Päivitetty: