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
- Use a javascript rule to rewrite all the URLs in your game dynamically depending on if you’re running the file locally or not like this: Troubleshooting image path for online Twine test playing
- Use story format code like this: How to use a variable to define a path to an image? - #2 by HiEv
- Do a big find-and-replace before you deploy
- Use a local web server to serve your images and map the URL to the URL of your remote server
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?