A method for using relative media links for Twine development on Windows

Twine Version:
Version 2+, all story formats that support HTML tags

The problem

This problem has to be universal for anyone who creates Twine games with images or other media and wants to see their images when testing and once uploaded to a web server.

This is a problem I REALLY wish the author of Twine would help solve, because I see reddit posts about it quite often, and I will admit it bedevils me every time I start to develop a new Twine game with media.

The main solutions so far

The problem, further

I don’t love any of them! I primarily develop on Windows 10/11 or I’d use a symlink as a workaround! I never knew actually until recently that Windows does have directory symlinks and there’s a way to make this work.

The main oddness is that Twine “pre-publishes” its files when you press the “play” button when developing to an odd per-user “temp” directory.

My solution

So, here’s my solution, let me know if you have thought of anything better:

1. Create a “publishing directory”

This is the entire directory you will upload to the web or zip up for itch.io

This publishing directory is separate from the place where Twine saves its working file. For example, let’s say I just put it on my desktop:

C:\Users\[YOUR USER]\Desktop\game-name ← publish your HTML files here
C:\Users\[YOUR USER]\Desktop\game-name/game-img ← put your media here

2. Create your symbolic link

First, make sure “dev mode” is enbled or you aren’t allowed to do this:
Settings >> For developers >> Developer Mode >> on

Then, launch cmd.exe by typing it into the search bar.

At the prompt, make a symbolic link from your game media folder to the folder twine puts its temporary HTML files, C:\Users\[YOUR USER]\AppDate\Local\Temp with the following command:

mklink /D "C:\Users\[YOUR USER]\AppData\Local\Temp\game-img" "C:\Users\[YOUR USER]\Desktop\game-name\game-img"

It should output:

symbolic link created for C:\Users\[YOUR USER]\AppData\Local\Temp\impasto-journey <<===>> C:\Users[YOUR USER]\Desktop\impasto-journey

3. Use relative links in your images

Now you should be able to simply refer to images like this in your IF:

<img src="game-img/your-image.jpg">

Those should work when you’re developing locally AND when you upload your game-name directory to your server, and you don’t need to do any weird javascript URL rewriting or change the URL if you put it on a different server.

Questions? Comments? Want to show how to do this on Linux or OS X?


Regarding storing your own files within the Window’s Temporary file area.

As explained in this TenForum Tutorial, later builds of Windows 10 includes a Storage Sense feature that automatically deletes files from the Window’s Temporary file area when specific criteria is met, and technically a symlink (or a folder even) is just another type of file. Windows 11 also has this same Storage Sense feature.

Note: The Twine v2.8.0 (and later) Desktop release was changed so it now stores the temporary Story HTML files generated by the Play and Test related options in a scratch folder, instead of within the Operating System’s Temporary file area.

1 Like

Thanks for this heads up. I could have sworn I had the newest Twine installed but I’m on 2.5.x. I’ll revise this for 2.8.x if I get a chance.

1 Like

The process outlined above is what I do: Create a “Publish” directory where the index.html is always published to, which includes supporting folders with media called by relative URLs. If you run index.html, it will open in your browser and display/play media from the resource files correctly.

If you want to test it truly online and share with testers without sending them a zip with the html and files every time, I use itch.io - create a project and set it to “Draft” mode which will prevent it from being displayed, promoted, or searched online, with a secret difficult URL nobody will guess but can be shared for testers to direct link to the page where it’s playable as normal. On itch, you upload a zip of the game where the main game file is named index.html and it must be in the top layer of the zip file with the directories (called in the game by relative URLs) for the system to find the index.html and display it online.

This also lets you truly work on the presentation page for the game, and once everything is completed, you can change the status to “published” so the public can see and play the game on itch.