Inserire immagini
Una volta che conosciamo qual è l' URL dell’ immagine è semplice visualizzarla nella nostra storia. È preferibile caricare immagini e file audio su un nostro sito Web (o ospitarli su Google Drive o Dropbox).
<img src="https://www.lezionilatino.it/Twinery-story/leone%20trasparent.png" width="500" height="600" alt="leone">
< img src="l'URL della tua immagine"alt="leone">
La parte relativa alla larghezza e all'altezza del codice controlla la dimensione dell'immagine sulla pagina.
Se si lasciano disattivati, visualizzerà l'immagine nelle dimensioni originali.
È possibile anche inserire il [[codice di incorporamento]](text-colour:orange)[
[Inserire un’immagine di sfondo
Per aggiungere un'immagine di sfondo o un .gif animato, assicurati di selezionare un'immagine di alta qualità/grande dimensione. Vai all'editor CSS:
tw-story { background-image:url(INSERIRE IL TUO URL QUI) background-size:cover; }]
[Se vuoi inserire lo sfondo ad un solo passaggio devi prima creare l’etichetta nel passaggio (in alto c'è l'opzione “+ tag" o “etichetta”) e modificare il codice per lo stile in questo modo
tw-story[tags~="tag nodo"] {background-image:url("URL immagine"); background-size:cover; }]]
(bg:orange)[[[aggiunta di un video | video]]
[[audio]]
[[incorporamento]]]Per incorporare un video da un servizio come YouTube o Vimeo, devi ottenere il codice di incorporamento ed eventualmente personalizzarlo.
Una volta che hai il codice, inseriscilo così com'è nel tuo passaggio per visualizzarlo. Ad esempio, su Youtube: premi "condividi" e seleziona "incorpora", copia e incolla il codice hmtl nel tuo passaggio
<iframe width="560" height="315" src="https://www.youtube.com/embed/VEqYjNT3iAQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
(text-colour:white)[[audio]]
(text-colour:white)[[incorporamento]] di applicazioni web
(text-colour:white)[[Immagine]]
(text-colour:white)[[immagine di sfondo]] Il codice per aggiungere un effetto sonoro di base (Harlow, predefinito) è come il seguente. Questo andrebbe nel passaggio in cui vuoi che inizi il suono ...
<audio src="http://www.seriousplaylab.com/twine20/twinesound.mp3" autoplay>
L'attributo “autoplay” fa in modo che venga riprodotto non appena viene visualizzato il passaggio in cui si trova.
colonna sonora
<audio src="http://www.lezionilatino.it/audio/videoplayback.mp3" autoplay>
<iframe src="https://drive.google.com/file/d/1TTGAyFN6FWGnEtcBrzNv6KvjYXv4sGES/preview" width="640" height="480" allow="autoplay"></iframe>
[[incorporamento]]Aggiungi HTML
Per aggiungere HTML alla tua storia, ad esempio del testo che hai personalizzato o hai un codice per incorporare una risorsa come un video di YouTube, puoi aggiungerlo direttamente al testo del tuo passaggio. Verrà visualizzato esattamente come lo hai inserito.
Esempio incorporamento di un gioco fatto con learning apps immagine inserita con codice di incorporamento
<iframe src="https://drive.google.com/file/d/1icsBrIUbGfsCfxbjy_l0mvttkscxQjhp/preview" width="640" height="480" allow="autoplay"></iframe>
Come inserire le [[immagine di sfondo]]
Con codice di incorporamento si possono inserire anche i [[ video]]