Saturday, March 20, 2021

How to display media with relative links in Twine play testing mode

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

  1. 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.)
  2. Open your story and add an image to a story passage using an HTML tag such as <img> or <video>
  3. Test your story. You'll notice that instead of images, you'll get a little default 'missing image' icon. 
  4. 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. 
  5. 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. 
    Screenshot of a Twine game with a broken image link "feet-cc0.jpg". Half the screen is filled with Chrome's developer tool window. The HTML source code is displayed with "feet-cc0.jpg" highlighted. A tooltip show the full filepath, "C://Users/username/AppData/Images/feet-cc0.jpg."

  6. 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
  7. 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.
  8. 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.

You might be wondering: Why not just store my images in the destination folder in the first place? That's not not ideal for two reasons. First, these temporary directories are sometimes automatically deleted by your operating system to clear up space. If you only store your images there, you may lose them to deletion! Second, when you finish your story and are ready to publish it using Twine, Twine expects to find those images in a "nearby" folder with relative paths. If you upload your media online or want to send your game to others, you will need to send them the media as well. 

Let me know if this helped you on your Twine journey, or if you have a different trick you used instead. 


Sunday, February 21, 2021

A blessing for mishmash family

A blessing for mishmash family

Maggie Oates

You are invited to unmute. If the words speak to you or resonate with you, please respond with the words in italics.


There are photos we point to, saying "she looks so much like you!" Twins sharing a secret handshake. A medical history, an inheritance.

Blessed is the family bound by blood. 


There are beacons of food, song, or craft, pulling us together like gravity

Blessed is the family bound by senses. 


Ocean Vuong notes, “In Vietnamese, the word for missing someone and remembering them is the same.” When his mother asks him over the phone in Vietnamese: Do you miss me? he flinches, thinking she meant: Do you remember me? 

He is honest, “I miss you more than I remember you.” 

Blessed is the family missed. 
Blessed is the family not remembered. 


There are places where we have precious refrigerator rights. Dinners at another’s table. A candy from a neighbor. The child that always smiles and drools on you on your usual bus route. 

Blessed is the family borrowed.
Blessed is the family stumbled upon.


There are names and relationships lost to time or to violence. African Americans honoring their ancestors face “the brick wall” of documentation, with few written records of Black families before emancipation. 

Blessed is the family unknown, but felt. 


There are reunions, first-unions, births, awkward hugs and long excavations through time and memory. 

Blessed is the family found.


There are lovers of leaving. As HP Rivers says, “leaving family and familiarity, leaving tables where love is not being served.” Those who could not see a light in us, maybe a queerness or a disability. 

Blessed is the family that needs to be grieved.


There are strange and defiant mishmashes. Ones who clung together at first in survival. Then, held each other gently in thriving.

Blessed is the family that is chosen.


There are ones we will never meet, never know, never find, never even consider. The ones seen in church pews or quiet libraries or playgrounds. May we quietly reach to embrace them.

Blessed is the family bound by spirit.
Blessed is our family.



Written by Maggie Oates for the February 21, 2021 online Allegheny Unitarian Universalist Church service with Rev. Deryck Tines called "Celebrating Family in Black History Month." 

1. Ocean Vuong's words are from his book, On Earth We're Briefly Gorgeous. You can find it in bookstores and libraries. The full quote is
In Vietnamese, the word for missing someone and remembering them is the same: nhớ. Sometimes, when you ask me over the phone, Có nhớ mẹ không? I flinch, thinking you meant, Do you remember me? I miss you more than I remember you.
2. It is very difficult for African-Americans to research their ancestry before the 1900s because "enslaved African Americans were rarely recorded by name in documents of any kind, making the tracing of their antebellum ancestry nearly impossible." However, sometimes this wall is possible to scale. For resources, see Henry Louis Gates Jr and Meaghan Siekman's "Cheat Sheet for Researching African-American Ancestors" and this list of "African American Resources for Pennsylvania." Locally, there is a chapter of the Afro-American Historical and Genealogical Society.

3. HP Rivers wrote "Blessed Are the Queer."


Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.