Images in Twine Passages

Images in Twine Passages

Individual images for characters etc.

To add images in Twine passages, use the img HTML tag. You will need to add images in each individual passage, not the style passage, if you want to show changing character poses. Use the code below, but replace the file name and alt text with your image and info.

<img src="nia_thinking.png" alt="Jeanne with 1 finger pointing up">

You can either link to images online using a full URL (like we did for the background image) or link to images with a relative link. In this case, I put all of the images in the same folder as the published scenario. The images in this scenario are from the eLearning Art “designer realistic” illustrated character set.

7 thumbnails of an illustrated character in different poses in a folder with a file called stakeholder_feedback.html

Note that when you Play a scenario in Twine, it will only show the alt text for the image. You must publish the scenario for image links to work correctly.

Organizing files

You may prefer to put all of the images in an images folder. This is especially helpful if you’ll have a lot of images and want to sort them better, or if you’ll also have audio or other multimedia assets. If you use an images folder, you need to include that in the path to the relative link.

<img src="images/nia_thinking.png" alt="Jeanne with 1 finger pointing up">

Image width

If your image is full width and above or below paragraphs of text, you don’t need to add anything else. This is the simplest option. If you do this, you can ignore the rest of this page.

If you want your image and text side-by-side, you will either need to resize the images outside of Twine or use the width property plus either float style or a multi-column layout.

Width for images can be absolute (with a number of pixels) or shown as a percentage. Percentages usually adjust better for different screen sizes.

width=80%

Float images

One way to format the images in Twine is to use the html float style. This adapts to screen size nicely, but the images sometimes extend outside of the borders around the passages. With the float option, you adjust the width percentage to make it fit your content.

<img src="images/nia_thinking.png" alt="Jeanne with 1 finger pointing up" width=40% style="float:right">

Two columns

Another option for setting up images is to use two columns. One column has your text, and the other has a character. In this example, I’ll show how to set up a wider left column for text plus a narrower right column for an image.

The columns button in the toolbar is the same as the alignment button.

Alignment and columns button in the Harlowe toolbar
  1. Click the Alignment and columns button.
  2. Select Columns.
  3. Select the number of columns in the dropdown. In this case, set it to 2. The preview at the top of the window will change so you can see how it will look.
  4. To align the left column of text, set the Column 1 left margin to 0.
  5. Set the Column 2 right margin to 0.
  6. If you want the text column wider than the image column, change the width. This part is a little tricky; you have to think about the total width of the passage. If you want the left column to be 75% of the width, you need to set the width of the left column to 3 and the right column to 1. (3+1 = a total width of 4, and 3 is 75% of the total.)
  7. Click Add.
Columns dialog box showing the options described in the directions
  1. You will see the markup code for the columns as shown to the right.
    • The vertical pipes show the width of the column. A column with ||| is three times wider than a column with |.
    • The equals signs show the margins.
    • Two pipes with two equals signs between them marks the end of the columns. Everything below that will be the full width of the passage or container. |==|
    • Hover your mouse over the column markup to see an explanation of each part of it.
    • It may help to read the documentation on column markup to understand how the markup works.
  1. Replace the text “Column 1” with your passage text (except for the choices).
  2. Replace the text “Column 2” with your image. You may have to include a width percentage to make it fit. I used 80%.
  3. Add your choices below the columns. Your passage should now look something like this.
Twine passage with 2 columns as described in the instructions
  1. Click Build > Publish to File to view the results. It may take you a few tries to get the results exactly the way you want them. Try adjusting the image width, column margins, and column width until it looks the way you want.