I would like to display images in twine

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:
Story Format:I have the latest version of Twine. I attempted to get pictures to display over a year ago and followed a tutorial by Adam Hammond, which seemed pretty comprehensive. Anyway I followed his tutorial to the letter and still the pictures would not load. I see Twine has a new version out now, and I would like to know if it is easier to get images to display and what Format I need to use to accomplish this. Sugarcube? Harlow3?
I don’t need full screen, but I must use the images that I download and place in the images folder. I don’t want to use images and link to them on the web. Isn’t this CSS? Thank you so much for your kind replays for this noob.

2 Likes

Hey,

Can you tell us…

  1. How you are trying to display the images? What does the contents of your twine passage look like?
  2. Where the images are stored? What folder on your computer? Or are they stored online?
  3. Are you using the web version of Twine (just hitting Use Online on their website) or did you download it to your computer?

Putting images into Twine isn’t that difficult once you know what you’re doing. Letting people know what you’re trying right now will help them figure out where you are going wrong.

I use Twine with Sugarcube, there it works like this:

<img src="images/yourPicture.jpg"/>

The picture will only be shown once you published your story and play the HTML file. It does not show when you use the PLAY button in Twine. Not sure if other Story formats work the same.

1 Like

Hi,

code to place images is basic html,

However, you cant use images in your local harddrive until you have published your game. But there is a workaround for this and it requires you have a chance to upload your images somewhere at the internet.

There are several free hosting companies which you can use temporally while developing the game.

In your storyinit add variable, $imgPath = “http://www.path.to.your.images.com/”

Now, in your passage, you can use this as <print: “<img src’” + $imgPath + “myImage.jpg’ / >”>
After publishing your game and having images, lets say in gamepath/images folder, you just change the $imgPath to “/images”.

1 Like