Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

twinery 2 how to add images?

Sorry if this has already been asked but I searched this forum and here:

How do I add images/ audio/ videos to twinery2?

Here's the video of what I tried

max upload to forum is _tiny_ so here is the HTML story


  • The Twine Wiki will be of little use to you if you are testing the Twine 2 beta because it only contains information for the Twine 1.x related GUI and its built-in story formats. It is the story formats that define and control what features you can use in your story.

    I don't believe the Twine 2 beta supports embedding images (via a menu or drag-n-drop), and after looking at the Harlowe source code I was not able to find a built-in macro supporting the displaying of embedded images.

    If you are running a locally installed version of the Twine 2 beta then I would suggest using a standard HTML <img> tag to display an image stored within the same (or sub) directory as the GUI.
  • Right now, Twine 2.0 does not support embedding images as 1.4 does. Using an <img> tag to connect to a separate image file should work fine, however.
  • @greyelf

    Here is the code:

    Here is my image.

    It is not responsive.

    <img src=""; alt="Twine Forum">
  • Maybe this will help, although I'm running Twine 2 locally. I started running Twine 2 locally on my chromebook. I have Twine unzipped on a SD card.

    I had an issue where the browser could not find the image I added to my story. To fix it I had to add the full file path of the image as the src attribute (see below):

    <img src="file:///media/removable/SD%20Card/AR_day_1.png" alt="Map of AR">

    I imagine the absolute path is needed for video and sound files.

  • poppedlatte wrote:

    Maybe this will help, although I'm running Twine 2 locally. I started running Twine 2 locally on my chromebook. I have Twine unzipped on a SD card.

    I had an issue where the browser could not find the image I added to my story. To fix it I had to add the full file path of the image as the src attribute (see below):

    <img src="file:///media/removable/SD%20Card/AR_day_1.png" alt="Map of AR">

    I imagine the absolute path is needed for video and sound files.

    Thank you!
  • Yikes! Keep in mind that an absolute path like that will not work if you give the story to someone else, or publish it on the web. What you want is a path that is relative to where your published story is saved.
  • Is there much hope for supporting images in twine 2? Is it super intensive to code for image support?

    When I click on the WYSIWYG the .js pops in
    <img src="" alt="undefined" />
    Are their similar WYSIWYGs that could possilbly maybe work with the Twine 2 code base?
    I found a few WYSIWYGs built on/for Jquery. (I noticed you switched over to JQuery) Chris Klimas 6a96db9 Start using jQuery 2.x 2014-12-08

    one of which is!

    I mention this with utmost humility as I have great respect for what you do, as I can only imagine and you accomplish.

  • It is very easy to use images in the current local version of Twine 2:
    (note: you don't have to use the same folder/directory names as my example, Im using Windows but the same steps should work on any OS)

    To see images when using the Test or Play features do the following:

    1. Download and unzip the local version of Twine into its own folder/directory.
    I unzipped mine in a directory named c:\Twine2

    2. Create a new sub-folder/sub-directory named images below the one from point 1, this is where you will store the images that will be displayed when using the Test and Play features of Twine 2.
    My directory structure looks like the following: c:\Twine2\images

    3. Use an img HTML tag to display an image within your story.
    (note: you don't have to specify the alt, height, or width properties but it is a good idea to.)

    Below should be a smiley face image.
    <img src="images/smilyface.png" alt="smiley face" height="100" width="100" />
    4. Use the Twine 2 Test or Play features to view your story and you will see your image, providing you placed it in the images sub-folder/sub-directory.

    To see images after using the Publish to File feature do the following:

    5. Remember to select one of your passages as the Starting Point of your story using the Rocketship feature.

    6. Create a new folder/directory to store the story file you're about to generate in.
    I created a directory named c:\mystory

    7. Use the Publish to File feature to generate your HTML file and save it within the folder/directory from point 6.

    8. Copy your images sub-folder/sub-directory from point 2 into the folder/directory from point 6.
    I copied my c:\Twine2\images directory so I ended up with a c:\mystory\images directory.

    9. Open the HTML file you created in point 7 in your browser and you should see your image.

    10. Ever time you add a new image to your story you will need to save a copy of the file in both of your images folders/directories.
  • This a much better idea. Thank you!
  • Hay thanks, its a great advice!

    Also, I've tested this using hyperlinks of images from the internet and it works, so you can attach images in the online editor too :)
  • I've tested
    [[<img src="img/image-name.jpg" alt="image-title" />|link-name]]
  • While everything works in the directions above when I'm viewing on my computer -- even after I've published to file -- things fall apart once I try to upload the HTML.  The format I'm using is SugarCube.

    I have a folder called story.  Inside that folder, I've placed my images, sound files, and the html "publish-to-file" version of my story.  I have hosting on a website, so I go into the c-panel and upload the html file into the public html section of the site.  That part is fine -- all the words show up.  But the images/sound files don't, even when I upload them to the c-panel.

    Should I upload all the images I'm going to use directly to the c-panel and then use <img src = ""; />.  Would that even work?
  • Yep -- that worked.  So I uploaded all the images and sound files to the public_html section of the c-panel, grabbed the url for the images or sounds, dropped them into my game, and then did publish to file for the game.  Then I uploaded that HTML file, and because the images/sounds are all pointing to where they are hosted, it works.

    But it sounds like there is an easier/neater way from the directions above?
  • If your HTML file and the sound/image files are in the same directory / folder on the web-server then your img (sound) tags should look something like the following:

    <img src="imagename.jpg">
    You should also be able to check if they are accessible to the web-browser by loading your hosted story HTML and changing the URL slightly to reference the image.

    eg. if your story URL in the web-browser is then changing the URL in the browser to should show the image.
  • I have tried everything above and the only thing which works is if I put the full local computer link there which will not work if I send it. Use Twine 2.0.8

    I have put:
    <img src="Knight on Bridge.jpg" width="640" height="360" alt="Knight on Bridge" >
    This is the file in the main folder where the HTML file resides - Didn't work

    <img src="images/Knight on Bridge.jpg" width="640" height="360" alt="Knight on Bridge" > This is the file in the images folder with the HTML one folder below.

    In both instances the graphic size is there and a small graphic icon but no images.

    Again the only way for it to work for me is the place the entire path there:

    <img src="C:\Users\XXXXXXXXXX\Documents\Twine\Stories\Troll on Bridge\images\Knight on Bridge.jpg" width="640" height="360" alt="Knight on Bridge" >

    Another option I just found is to upload a image to an offsite host like Tinypic and place a URL link there. Note I tried to share with my Google drive and this did not work. I am not sure what the best option for uploading is and will look into more options.

    <img src=""; width="640" height="360" alt="Knight on Bridge" >

    Hopefully this will help those having the same issues I was having.
  • One common trap programmers fall into when referencing files in HTML is that file names in HTML are case-sensitive, this especially catches people using Windows. Space characters can also cause issues so it is generally a good idea to not use them in files you are going to reference in HTML.

    So "Knight on Bridge.jpg" and "knight on bridge.jpg" are considered to be two different files, where as Windows may think they are the same file.

    Try naming your files using lower-case letters and replacing the space characters with underscores, and see if that fixes your problem with referencing files using relative URLs.

    eg. "knight_on_bridge.jpg"
  • I'm dredging this thread up because I'm actually having a problem with using images similar to DavidMP's!

    My images are only working when I use my full path, for example: <img src="c:/twine 2/images/test.png">. Anything less than that causes a broken image link! Whilst I know you can use online links to get the same outcome, I'd really rather not painstakingly upload everything that I could just as easily toss into a file.

    I've tried using the foldername as most people have as above, but that doesn't appear to be working for me! Am I just going to have to use online images instead, or is there a reason I need the whole path?

    Thank you to anyone who has a clue! :D
    I am going to assume that the "c:/twine 2" folder in your example is not the folder you installed the Twine 2 application into, that it is a folder you created to save your story HTML files into. If it is not then you should create one.

    The following steps should allow you to see your images:

    1. Place your images within the "c:/twine 2/images" folder.
    2. Change the src attribute of your img elements to reference the images folder:
    <img src="images/test.png">
    3. Use the Publish to File to create a story HTML file and save that file into the "c:/twine 2" folder.
    4. View your story HTML file using your web-browser, and you should see the images.
    5. Repeat steps 3 and 4 each time you change your Story Project.
  • Hello,

    First post here, but I have been lurking for a while. Thank you very much for all the tips!

    In this case, I have the same problem than the others, meaning I see my images only when I use the full path.

    I double checked the installation folder, and even reinstalled Twine (2.0.11) to make sure I was looking into the right directory, but that didn't solve my problems. I can also confirm the name of the file is not an issue. This is with Harlowe, Windows 7, full administrator rights.

    I can't guarantee that I didn't install and uninstalled Twine some times ago though. Could something have been added somewhere (in the registry?) which prevents Twine identifying now where to start looking from?

    Sorry, I am not a developer!

    Thank you very much
  • @azaphal
    The folder you installed the Twine 2 application in is not important.

    I suggest you create your own folder somewhere on your hard-drive and save any Story HTML file you create using the Publish to File option into it. This folder (or sub-folder contained within it) is where you should store any media files (like image or audio files) you want to use in your story.

    For example:
    a. Create a new folder on your C: drive named projects. eg. c:\projects

    b. Within the projects folder create a new folder named media. eg: c:\projects\media

    c. Place all the images (and audio files) into the media folder.

    d. Change the img elements in your story like so: <img src="media/imagename.png">

    e. Select the Publish to File option and save the HTML file into the projects folder.

    f. View the HTML file using a web-browser and you should see the image.
  • @greyelf

    That works! My bad for the installation folder, and thank you very much for the answer!
  • edited May 2016
    How do you do this with the OS X Twine 2.0 version? It's not installed into directories, and trying to relatively link to a folder in both the OS X Applications directory as well as the User/Documents/Twine/Stories/ html file doesn't actually work when playing/testing the story from the Twine 2.0 editor.
  • As I stated in my previous posts, where you install the Twine 2 application and where the application locally stores your Story Project HTML files has little if no effect on where you should locally store your story's media files.

    Just create a directory somewhere on your hard-drive, save/move the Story HTML file you create using the Publish to File into that directory, store your media files either in that directory or within a sub-directory of that directory, and make the links within your story use a relative reference to that directory/file-name.

    One of the reasons that locally referenced media files don't work when using the Test and Play options is that the resulting temporary DOM created in memory may not have a temporary physical HTML file representing it so there is no file for the media files to be relatively to, and even if there is a temporary physical file you have no control over where it will be created.

    eg. is the temporary file created relative to the application executable, to the webkit runtime, to the story project HTML file, to the OS temp file directory, etc....?
  • Yes, I can publish it and it works fine, but that's an untenable solution if you're working with something in progress and need to ensure everything is correct as you go along.
  • mixvio wrote: »
    but that's an untenable solution
    It may be untenable but unless the developers change the application to actually create temporary HTML files in a known location then that is just how it is.
Sign In or Register to comment.