Adding pictures

I have some nice chapter title images made but i dont know how to add them to twine. Like i dont have the option to right click and i cant drop images into it. Help? Im using sugarcube thank you

Maybe one of these two links can help:

https://www.motoslave.net/sugarcube/2/docs/#guide-media-passages-creation
http://twinery.org/cookbook/images/sugarcube/sugarcube_images.html

Did you take a look at the “Image” section of the SugarCube documentation? It explains how to do it with examples there.

Additionally you might want to take a look at the “Displaying Images in Twine” section of my Twine/SugarCube sample code collection.

Finally, I should mention that you can import other Twine games into the Twine editor if you want to take a look at their code to see how other games have done it.

Hope that helps! :slight_smile:


Actually, that “Media Passages” section specifically recommends against using media passages, unless it’s only for a very few small media files. It’s far better to link to external files, since using media passages will cause the game to take longer to start, makes the data larger, and may even risk making the game unplayable in some browsers if there is too much data included that way (I’ve seen this happen).

The Cookbook suggestion is equally problematic, since it’s basically just another way of doing what media passages do.

For that reason, I wouldn’t go around recommending either of those methods/links for adding images.

Using standard image links and including those image files with the game’s HTML file should be the method that you recommend.

1 Like

For technical reasons we generally advise against embedding images as base64 data directly within a Twine project.

The linked Twine Cookbook recipe does include an example of using a HTML <img> element to display an image that is stored/hosted on web-site, using an Absolute URL as the src attribute value.

And Jasper’s comment in the I would like to display images in twine thread of this forum shows an example of using a Relative URL as the src of a <img> element.

1 Like