Images for Twine?

5,779 views
Skip to first unread message

Patrick Schroeder

unread,
Apr 16, 2012, 1:34:47 AM4/16/12
to Tweecode / Twine
Just a odd question I had brought up to me when showing a story

Since Twine is HTML driven, is it possible to show a image in your
story? If you can, what would the code look like?

CodeDuck

unread,
Apr 16, 2012, 6:09:12 AM4/16/12
to Tweecode / Twine
You can add images very easily or just about any custom html. just put

<html><IMG SRC="http://www.green-innovations.asn.au/Twine/Twine-
Twee.gif"></html>

...Taz

Måns

unread,
Apr 16, 2012, 7:11:39 AM4/16/12
to Tweecode / Twine
Hi Patrick

> Since Twine is HTML driven, is it possible to show a image in your
> story?  If you can, what would the code look like?

Since the finished story is powered by TiddlyWiki, you can use this
shorthand for images:

Simple Images

[img[http://wikitext.tiddlyspace.com/fractalveg.jpg]]


Tooltips for Images

[img[tooltip|http://wikitext.tiddlyspace.com/fractalveg.jpg]]


[img[http://wikitext.tiddlyspace.com/fractalveg.jpg][http://
www.flickr.com/photos/jermy/10134618/]]


Floating Images with Text

[<img[http://wikitext.tiddlyspace.com/fractalveg.jpg]]

Displays as image floating to the left.

@@clear:both;display:block; @@

Will then clear the float.

[>img[http://wikitext.tiddlyspace.com/fractalveg.jpg]]

Displays as image floating to the right.

Enjoy

Måns Mårtensson

FS3D

unread,
May 20, 2012, 11:52:32 AM5/20/12
to twee...@googlegroups.com
While discussing the addition of media, is it possible to add background sound to Twine passages? I'm thinking it might be useful if someone wanted to add a spoken word track for partially-sighted people, or to add background music if anyone was so inclined.

D

unread,
May 21, 2012, 4:16:41 PM5/21/12
to twee...@googlegroups.com
I think there's a way to use HTML code to have music. Something like this:

<html>  <embed type="audio/x-mp3" 
src="testing.mp3" autostart="true" loop="true" width="2" height="0"></ 
embed> </html>

I don't know if this works just for individual pages or for the whole doc (probably depends on if you put it in the title script or on the script of an individual page.)

Måns

unread,
May 22, 2012, 4:16:23 AM5/22/12
to Tweecode / Twine
Hi FS3D

> is it possible to add background
> sound to Twine passages? I'm thinking it might be useful if someone wanted
> to add a spoken word track for partially-sighted people, or to add
> background music if anyone was so inclined.

You can use googles audioplayer like this:
<html><embed type="application/x-shockwave-flash";
flashvars="audioUrl=http://podcast.tiddlyspace.gir.dk//test.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
width="400"height="27"quality="best"></embed></html>

Example: http://tinyurl.com/825r38y

Cheers Måns Mårtensson

Lita Hayata

unread,
May 2, 2013, 10:29:03 AM5/2/13
to twee...@googlegroups.com
Hi!

I've tried

[[[img[http://wikitext.tiddlyspace.com/fractalveg.jpg]]|Passage]]

to add a clickable image, but it's not working.
Is it possible to have clickable images or must I add text to go through passages?

Thank you!

Talita.

Leon Arnott

unread,
May 6, 2013, 4:54:10 AM5/6/13
to twee...@googlegroups.com
The clickable image syntax in Twine is [img[http://wikitext.tiddlyspace.com/fractalveg.jpg][Passage]].

Leon Arnott

unread,
May 6, 2013, 4:55:44 AM5/6/13
to twee...@googlegroups.com
I have written a set of macros for playing sound files, available here.

Timm Woods

unread,
Jun 2, 2013, 5:12:05 PM6/2/13
to twee...@googlegroups.com
I've been adding a great number of pictures to my current story, but since I'm not hosting them myself I'm worried about copyright and/or losing them if the sites go down. Plus, my pictures only work if the internet's working. Does anyone know a way to have Twine draw pictures from a particular folder of your computer, so that I wouldn't have to rely on external sources for my pictures?
Message has been deleted

David Yang

unread,
Jun 18, 2013, 10:00:59 AM6/18/13
to twee...@googlegroups.com
if you don't want to attach images with the html, use base64 conversion and
call for it in a html...

http://webcodertools.com/imagetobase64converter can be used to convert images to
non-binary format :] fair warning though, your file will grow immensely
especially if there's animated gifs... (a 1.81mb animated gif image took up
2.42mb o_o)

David Yang

unread,
Jun 18, 2013, 10:03:06 AM6/18/13
to twee...@googlegroups.com
fyi, it supports most image formats. :) size it first though...
Reply all
Reply to author
Forward
0 new messages