Kredati
{
img Tags and “Embedding” Media in Twine

{ Images and Twine } { How To Put an Image in Twine } { Embedding Things }

Twine is, at its heart, a textual medium. This is even more true in Twine 2.x in the Hawthorne story format. It abstracts away most of the HTML and CSS, and that can be a good thing. Yet, if you'd like to include digital material in your story, Hawthorne makes that kind of a pain. Here are step-by-step instructions for including images, and a slightly more abstracted set of instructions for including a YouTube video.

Images and Twine

First things first, however. Twine parses not only Hawthorne's TwineScript, but also any HTML, CSS, and JavaScript that's included in the story (i.e., in a passage). That means that if you want to make a word bold, you can include strong tags around that word. The most important tag we want to include non-text elements is the image tag, img. There are many other ways to include this sort of content, including iframe and embed, although you won't have to understand how those work to put, say, a YouTube video in your Twine story.

The most straightforward way, conceptually, to include an image, would be to use an img tag. The way you do this is really, really easy:

<img src="filename.jpg"> The filename.jpg that you include, here, has to specify not only the filename but also the location of the file. That's usually done relatively. If the image and the html file are in the same folder, no problem! Everything works. But where are your Twine files?

In Twine 2.x, the Twine story you're working on doesn't exist as an easily accessible file until you export the story to HTML. So if you have a Twine story exported as an HTML file, and an image in the same folder as that file, images will work. But while you're actually writing the story, Twine hides the HTML file from you in the bowels of your browser's filesystem. If you're using a local copy of Twine, you can put an image file in there, but that's inconvenient and inelegant.

The much easier and more elegant solution is to put an image on the web. An img tag can take a web address of an image. Say you put this in a Twine passage:

<img src="http://static.guim.co.uk/sys-images/Music/Pix/pictures/2013/8/28/1377685868574/Beatles-at-the-BBC-008.jpg"> What you'll see is this:

It's still hosted at guim.co.uk, which is the Guardian's image host. So if you want to use other folks' images, you can use Google image search or something similar to find, say, pictures of the Beatles. If, however, you want to use your own images, you'll need to find a place for those images to live on the intertubes. Enter imgur (pronounced “imager”).

{ top }

How to Put an Image in Twine via imgur

Step-by-step:

  1. Go to imgur.
  2. Click on the big blue “upload images” button near the top left.
  3. Choose your file, drag it and drop it, paste it, whatever. You can add more than one.
  4. Click “upload images”—that's exactly what will happen.
  5. You'll see your image on imgur! On the left hand side, there are a series of different bits of code that point to the image. For Twine, you'll want the Direct Link. It'll look like this: http://i.imgur.com/hxBKNVm.gif. When you click on that text, imgur will automatically select the whole link for you. Copy it.
  6. That's your own little corner of the intertubes, now. So in your Twine story, you can now use an img tag that points to imgur's servers, rather than some file floating somewhere around on your filesystem.
  7. In the Twine passage where you want the image to be displayed, you can now write the following code: <img src=""> Then, paste the direct link you copied from imgur between the quotation marks.
  8. View your story in debug or play mode: behold the sublime image of whatever it is you just uploaded to imgur.

{ top }

Embedding Things

If you want a video, or something a bit more advanced than an image, most such services will give you code to copy-and-paste that will embed a video (or other advanced media) in your page. For example, if you want to share a YouTube video, navigate to the video you want to include, click the “Share” button below the video—it has a little incomplete-triangular icon next to it. Below that, you'll see tabs for “Share,” “Embed,” and “Email.” Select Embed, and below that, you'll see a bunch of code that looks like this:

<iframe width="420" height="315" src="https://www.youtube.com/embed/lcOxhH8N3Bo" frameborder="0" allowfullscreen></iframe>

Just copy-and-paste that code into your Twine, and what you'll get is this:

You won't have a deeply beautiful site with all sorts of bells and whistles, but this can get you very far indeed in terms of including more visually compelling media in your Twine stories.

{ top }