0 votes
by (120 points)
Hi, I have used TWINE in early 2017 and I remember adding an image without many complications, but this time, I cannot. When I dragged and dropped a PNG in to the Story Map, TWine crashes. When I read you link, in another post here, to Add an image, I do not understand what the 'link to an URL means'. Would someone explain the easiest way to add an image.

Thanks!

1 Answer

0 votes
by (159k points)

> I do not understand what the 'link to an URL means

URL is an acronym of Uniform Resource Locator which is technical way of saying "where is the external file you want stored", and they are used to tell a web-browser where to load a resource (like a HTML file, a media file, etc..) from. A URL has two basic formats:

a. Fully Referenced.

This format includes is generally used to reference resources (files) that are stored remotely, the URL (in your location bar) being used to access this question is one of them. They are generally made up of three main parts:

i. The protocal to use to access the resource: for this question its http
ii. The domain name of the web-site: for this question its twinery.org
iii. The file-path of the resource: for this question its
/questions/39875/i-am-using-harlowe-2-1-0-and-i-cannot-seem-to-add-an-image

b. Relative

This format is used to describe a resouce that is being stored relative to the HTML file that referenced it.

/*
Ex 1. Remotely hosted files.

If your story HTML file is stored at
http://some-domain.com/my-story.html

... and it needs to show an image stored at
http://some-domain.com/images/forest.png

... then the relative URL used to reference the image from the HTML file would be
*/
<img src="images/forest.png">

/*
Ex 2. Locally stored files. (on your machine)

If your story HTML file is stored at
C:\my-projects\adventure\my-story.html

... and it needs to show an image stored at
C:\my-projects\adventure\images\forest.png

... then the relative URL used to reference the image from the HTML file would be
*/
<img src="images/forest.png">


Twine Background.

It sounds like you were previously using the Twine 1.x application, this application included support for adding the contents of image files (as base64 data inside a special type of Passage) to the story project, and such content was then embedded within the story HTML.you generated via the application's build option.

The developers of the Twine 2.x application, which isn't a later version of Twine 1.x, decided (for technical reasons) not to include this Image Embedding feature when they first created this new application. Three of the reasons were:

1. The web-browser based release of the Twine 2.x application, which was the first release to be created, uses your web-browser's Local Storage cache to store the contents (Passages) of each of your story projects. Commonly used web-browsers set the default maximum size of this cache to 5-10 MBs per domain, which is quite small and would be quickly filled if the data of embedded images were added to it.

2. When a story HTML file is viewed within a web-browser all the contents of that file needs to be loaded into memory before the first Passage can be shown to the Reader, and if the HTML file's content also contain 10's -> 100's of MBs of embedded image data then all of that data also needs to be loaded into memory before the first Passage can be seen. 

3. Web-browsers include a built-in caching system for retrieving & locally storing externally stored resources like media files. The media related sub-systems of modern web-browsers have been designed to unload out of memory any media data that isn't currently being referenced, which frees up that memory for other usages.

by (120 points)
edited by
Hi thanks for this explanation. What I mean is that I know what a URL is in general but I cannot seem to understand what to do add an image to my TWINE application on MAC. I tried to drag and drop as your guide suggested but TWINE crashed.

I mean: how can i add it if it crashes like this? How do I store an image to link a URL? My images are in my Macbook Pro drive. I will try the Relative reference to my C drive, as suggested above, and see if it works.
by (120 points)
still unable to do this. I tried to add a relative URL within my Twine story. Example:

one dice to rule them all
<img src="images_used/dice_icon.png">
 

The image is in another FOLDER that is sits within the folder holding the HTML story file, BUT, it does not show up. Am I doing something wrong?
by (159k points)

> I tried to drag and drop as your guide suggested but TWINE crashed.

Those (image embedding) drag-n-drop instructions are for the Twine 1.x application, as I previously explained the Twine 2.x application does not support this functionality.

note: I don't have a Mac so the following is writen from a Windows user's point-of-view.

1. Create a parent folder to store your "Publish to File" generated story HTML file in.

eg. c:\my-adventure

2. Create a folder to store all your image files in, it should be a child of the one created above.

eg. c:\my-adventure\images

3. Add your image files to the above child folder.

eg.  c:\my-adventure\images\dice_icon.png

4. Use a Relative URL based img element within your Passage to display the above image file.

<img src="images/dice_icon.png">


5. Save the story HTML file you create via the Publish to File option within the parent folder.

eg. c:\my-adventure\my-adventure.html

6. View the above story HTML file within your favorite web-browser, and the image should display.

...