While Twine 1 allows for media imports, Twine 2 (which this tutorial covers) does not. As a result, you have two options to embed media like images in your story using links: linking to media already online and linking to media you're storing locally on your computer. In this tutorial, we'll be covering the former, but we can help you use your own images or images not available online if you'd like to use them. Note that that the formatting used below is for the default Harlowe 3.1.0 Story Format (see Overview). If you change your Story Format, the markup and HTML might be different.
You can embed media already available online into your story. This type of deep linking leverages content hosted online by third parties. Using an image as an example, first locate the unique URL for the image you want to use (ensure the image allows reuse through creative commons licensing - Wikipedia and Wikimedia are great sources!). For this tutorial, we'll use an image of the Nott Memorial from Wikipedia. To get the correct image URL, right click the image and select "Open image in new tab" and copy the URL. You can tell it's an image URL by the ".jpg" at the end: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/NottMemorialPano.jpg/1024px-NottMemorialPano.jpg
To embed the image, open the passage window for the passage you want to add the image to. Copy and paste the URL in the following format in the location you want the image to appear:
<img src="URL" alt="descriptive text">
For example: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/NottMemorialPano.jpg/1024px-NottMemorialPano.jpg" alt="Photo of the Nott Memorial">
The descriptive text is not a caption, but rather 'alternative text'. Alternative Text appears if the image is no longer accessible so your reader has a sense of what should have appeared there. It is also used by screen readers to communicate the content of images to visually impaired readers. If you want a caption, include that text under the image with no formatting.
One negative aspect of this approach is that you rely on an unknown person or organization to keep your selected media accessible online. If this third party takes down or restricts access to it, it will appear as an error icon in your story. Another consideration is that linking to online media requires your reader to access the internet while they're reading your story.
You can see the final result using the example code below:
Don't forget to always credit your sources and the copyright holder!
