Twine is great, and the Twine 2 UI is a fantastic little tool for developing nonlinear stories. But as of this writing, it's great for text and not-so-great for other media. You can easily embed media using html, but it's not easy to work with as you're developing or testing your game. One frustrating note from the Twine documentation:
If you are using relative links for your multimedia, you will need to publish your story to the correct location on your computer so that the references point to the right place. If you have an image tag whose source property is “myimage.jpeg”, for example, then your published file must be placed in the same folder as the file myimage.jpeg. Learn more about relative links
If you are using relative links, testing or playing your story inside Twine will unfortunately not work.
I was using many local, relative links for images and video as I was working on OnlyBans and got annoyed enough by this to make a temporary solution for myself. To use this, you need a file syncing tool.
- Make a media/ directory in the same location that your Twine story lives. This is likely your Twine/Stories directory. Drop your images here: Twine/Stories/images/myimage.jpg. (This step is largely for convenience.)
- Open your story and add an image to a story passage using an HTML tag such as <img> or <video>
- Test your story. You'll notice that instead of images, you'll get a little default 'missing image' icon.
- Open the developer view tool for your browser. Find your image in the HTML source panel. You can often hover over the icon to locate it.
- Right-click on the image name, hover over it, or open the image in a new tab to find an expanded file path. The specific filepath will vary by browser and operating system. The image below shows one way to view the expected path in Chrome. For example, on my Windows machine my browser expected to find the file at C://Users/username/AppData/Temp/Images/myimage.jpg. Our goal now is make sure that there's a copy of our image in this location.
- Open or download a file syncing tool. For Linux or people comfortable with the command line, I recommend Rsync. Right now I'm using Windows, so I used SyncFolder.
- Sync these two folders. The source directory should be Twine/Stories/images/ and the destination directory should be the one from your browser, C://username/AppData/Temp/Images/. If syncing feels too complicated to you, you can also just manually copy and paste your images to the destination directory.
- Every time you add an image, alter media, change the name of a file, or close/re-open your browser, you may need to Sync that folder again. You can set up your syncing tool to run frequently, or you can manually run the sync job by pressing 'Sync' in your tool.
