Newbie Question! How to import images?

Willyth

I'm just getting started and have created a story and now want to add images. Maybe I'm completely missing something, but I don't see any "Import Image" Menu item. Indeed, I have only two menu items, Twine and Edit.

When I tried to drag an image onto the storyboard (not sure what you call it), it took up the whole window and all my passages disappeared. After quitting and restarting, my story came back.

I'm running Twine from my laptop, Windows 10.

greyelf

The Twine 2 application does not have an import image option.

Your choices are:

1. Store the image file in a location that is relative (same folder or a sub-folder) to where you are saving your Story HTML file (generated via the Publish to File option) and then use a relative URL in either your HTML img elements or CSS properties.

eg. the following assumes media files stored in media sub-folder.

<img src="images/image-name.png">

or

body {
background-image: url("images/image-name.png");
}

2. Host your image files on a image hosting site or a web-server.

note: If your Story HTML file is hosted on same web-server then you can relative URL's like those in point 1 otherwise you will need to use full references like the following.

eg. Files hosted on web-site named domain-name.com in images folder.

<img src="http://domain-name.com/images/image-name.png">;

or

body {
background-image: url("http://domain-name.com/images/image-name.png";
}

3. Base64 encode image file and embed the contents into a passage.

note: Only SugarCube has built-in support for this in special Twine.image tagged passages. These passages can be use with img markup.

[img[name-of-passage]]

4. Base64 encode image file and embed using a data URL.

Format is data:[<mime type>][;charset=<charset>][;base64],<encoded data>

<img src="data:image/gif;base64,R0lGOD.....jIQA7">

or

body {
background-image: url("data:image/gif;base64,R0lGOD.....jIQA7");
}

Willyth

Thanks Greyelf!! I'll give some of these a try...

Greatly appreciated!

I have to say, I don't get why a version 2.0 has less capability than 1.0...

greyelf

Willyth wrote: »

I have to say, I don't get why a version 2.0 has less capability than 1.0...

Twine 2 is not really an upgrade of Twine 1, it is just a different Twine editor application written in a different programming language. So it is a bit like comparing Microsoft Word and OpenOffice Writer, they are both word processor applications but they don't have all the same features.

In the web-browser based release of Twine 2 the maximum size of your Story Projects is controlled by the maximum size of the web-browser's local storage cache, which defaults to 5-10MBs depending on which brand/version of web-browser is being used.

It does not take many images to fill up 5-10MBs which is one reason there is no image embedding.

The Twine 1 application also has a limit on how large the total size of a Story Project can become before the build option runs out of memory, it is somewhere between 50-100MBs.