Päivitämme Lyytiä jatkuvasti ja tästä syystä näkymäsi ei välttämättä täsmää 100% artikkelin näkymän kanssa.  

Artikkelissa kuvataan, miten ilmiottautumissivulle voidaan lisätä kuvia tekstieditoria hyödyntäen. Lisäksi artikkelissa käsitellään miten lisätyn kuvan saa skaalautumaan myös mobiililaitteella. 

 Tässä artikkelissa on seuraavat osiot:

• Lisää kuva ilmoittautumissivulle
• Kuvan skaalautuminen mobiilissa

Lisää kuva ilmoittautumissivulle

Jos haluat lisätä ilmoittautumissivulle ulkoasun lisäksi myös muita kuvia (joko alkutekstiin tai kysymysten välille esim. koristeellisia väliviivoja tai muuta visuaalisuutta), lataa kuvat ensin materiaalipankkiin ja lisää ne materiaalipankin kautta ilmoittautumissivulle näin:

1. Muokkaa ensin kuva oikeanlaiseksi Lyytin ulkopuolella.
2. Tallenna kuva materiaalipankkiin (Materiaalit > Materiaalipankki > Lisää tiedosto)
3. Mene Lyytissä sen tapahtuman ilmoittautumissivulle, johon kuvan haluat.
4. Klikkaa oikeasta yläkulmasta Avaa materiaalipankki ja kopio kuvan osoite eli tiedostolinkki ketjukuvakkeesta. (Jos haluat kuvan ilmoittautumissivun alkutekstiin, jatka kohtaan 6.)
5. Jos haluat kuvan keskelle ilmoittautumissivua, rullaa ilmoittautumissivun alareunaan ja klikkaa Huomioteksti. (Kuvan voit myös lisätä ilmoittautumissivun alkutekstiin, ohje on samanlainen sen osalta.)
6. Klikkaa tekstieditorista Kuva-kuvaketta.
7. Liitä Kuvan ominaisuudet -ruudun Osoite-kenttään materiaalipankista saamasi osoite.
8. Valitse Kohdistus, jos haluat asemoida kuvasi oikealle tai vasemmalle.
9. Paina OK.

Vinkki: Jos haluat asemoida monta erillistä kuvaa vierekkäin, tee kuvapalkki kokonaisuudessaan valmiiksi ensin Lyytin ulkopuolella ja tuo se valmiina Lyytiin. Määritä kuvapalkin leveydeksi ulkoasusi leveys miinus 80 pikseliä. Esim. jos ulkoasusi on leveydeltään 750 pikseliä, tee kuvapalkista 670 pikseliä leveä. Ohjeet kuvapalkkien tekoon löydät kohdasta Luo oma ulkoasu. 

Kuvan skaalautuminen mobiilissa

Mikäli toivot että kuva skaalautuu oikein myös mobiilissa, voit lisätä kuvan lisäominaisuuksiin tekstin img-responsive.

1. Klikkaa kuvan kohdalta ja sen jälkeen kuva-kuvaketta, jotta saat kuvan asetukset auki
   
2. Lisää Tyyliluokat-kenttään teksti: img-responsive
   
3. Tarkista vielä että Kuvan tiedot -välilehdellä ei ole määritelty erillistä leveyttä ja korkeutta
   
4. Valitse ok