Adding images to your Twine game is as easy as adding HTML tags to your passage. You will need a hyperlink to an image, this is a bit more work if you are making your own images as you need a place on the internet to host them. We recommend using WordPress for this. You can simply upload your image your sites Media Library, click on it and copy the images URL that display in the attachment details!

Let’s say our game has an entryway with two doors and you found an image on Unsplash you will download the image and upload it to your media library in WordPress then add the following image HTML tag to your passage. (If you copy and paste the text the image will display from my media gallery and that is OK)

<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg">

Now let’s say you want to center the image we will add the CSS center class we made.

<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class="center">

When we view the page we notice the image is huge! We will add the width and height attributes to the image tag! You can play with the percentages to see what works best for your game.

<img src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class="center" width="50%" height="50%">

Photo by James Balensiefen on Unsplash

UnSplash is nice as we can give credit to the photographer by simply copying the credit line they provide.

Let’s add some sounds!

If you are not making your own sounds then we recommend finding your sounds on Freesound. Freesound is a collaborative database of Creative commons Licensed sounds!

The following code will play the sound of a door opening! Once again we have to upload the audio file to our WordPress site and copy the URL into the audio HTML tag.

<audio src="http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/321086__benjaminnelan__open-door-1.wav" autoplay></audio>

—

What would you like to do next?