Adding chapter title images on twine?

So im very confused with this. I am trying to add chapter title images in my game. I have the images created and saved in my files already but i cant for the life of me get them to show on the game. I am using Twine sugarcube

In general, images won’t show when you’re testing in the Twine app. You need to export the HTML file and make sure it’s in the same folder as the images (or in a folder that satisfies whatever relative path to the images you’ve defined in your source) in order for them to display.

2 Likes

do you have like an example or somthing i can look at to make sure im doing it right?

What exactly do you mean by “saved in my files”?

1: Generally you would use a Relative URL when referencing external media file from within a Twine project.
eg. some examples of such Relative URLs.

/* assigning background image using CSS within Story Stylesheet area. */
#story {
	background-image: url('images/forest.png');
}


/* showing image within a Passage. */
<img src="images/forest.png">

/* showing video within a Passage. */
<video controls>
	<source src="video/spinning-earth.mp4" type="video/mp4">
</video>

/* defining a audio track within StoryInit. */
<<cacheaudio "boom" "audio/explosion.mp3">>

2: Storing external media files locally for a Twine project.

The Play & Test options of the Twine 2.x application generate a temporary Story HTML file, which is generally saved to your Operating System’s “temporary files” area. Which makes it difficult to see/hear external media files referenced by a Relative URL when those options are used.

For this reason it is generally recommended that you first setup a folder structure to story your media files, and to use the Publish to File option to save the Story HTML file it generates within that folder structure, this allows external media to be seen/heard when that Story HTML file is opened within a web-browser. And the files within this folder structure can later be archived and uploaded for others to access.

The following is a basic Windows example of such a folder structure that demonstrates the relative relationship between the Story HTML file and the media files it references. The example assumes the project will be named Adventure and the “published” Story HTML file will be named adventure.html

c:\adventure\
	adventure.html
	audio\
		explosion.mp3
	images\
		forest.png
	video\
		spinning-earth.mp4

NOTE: You do not need to use the same “child” folder names as the above example, nor do you need to create the “parent” project folder directly on the main drive of your computer.
What is important is the “parent” and “child” relationship between the folder into which the “published” Story HTML file is saved into and folder(s) into which the media files are stored.

i mean i have the title pictures created and made save on my computer

Right, but it matters where they’re saved. If you do [img[squirrel.png]] then for them to show up you’ll have to publish your Twine piece to a file and put the file in the same folder as the image.

Also the capitalization of the image name and the reference to the image name in Twine should match. If the capitalization doesn’t match it’ll work ok on a Windows computer, but if you try to put it online it’ll break.

Like here: this should work. But if you move the html file somewhere else and then try opening it, the image will be broken.
sugarcube-image-test.zip (151.7 KB)

ok so all i have to do is put them in the same folder? And im not able to see it when testing but when its properly published it can be seen?

Right, if you publish to an HTML file on your computer that’s in the same folder with the images, the you should be able to open that HTML file in your browser and see the images.

But when you click the Test button in Twine it puts the HTML in a weird temporary folder so the images won’t work.

Ok awesome got it. One more question is there any code i need to add to my stylesheet so i cant do the pictures?

That depends on what you want to do. The images should show up just fine without any stylesheet. The stylesheet is for changing how they’re scaled and whether the text flows around them and so on. But that gets trickier.

1 Like