Displaying Images

Here’s my project:

anon@tc Witch]$ ls -l
total 2728
drwxr-x--- 2 anon anon    4096 Jun 17 14:27 images
drwxr-x--- 2 anon anon    4096 Jun 17 14:28 src
-rw-r----- 1 anon anon 2782218 Jun 17 14:28 Witch.html
(home-3.12.1) [anon@tc Witch]$ ls *
Witch.html

images:
badge.png

src:
Banned.tw  Play.tw  Start.tw  StoryData.tw  StoryTitle.tw

I compile it using:

[anon@tc Witch]$ tweego src images -o Witch.html

I see tweego has helpfully base64 encoded badge.png and included it in the compiled Witch.html file

<tw-passagedata pid="4" name="badge" tags="Twine.image" position="475,100" size="100,100">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABwgAAAcICAY........ (more omitted)

How do I display the image using harlowe 3?

The example I found has you creating a css class with the image data and setting the class of a div to the class you created.

But tweego already automatically encodes the image data as a passage. It seems there has to be some standard non-awkward harlowe tag that will display an image stored this way by name. Anyone know what that is?

Hi there!

I am not sure the Twine.image tag works for harlowe? But you can have use the <img> markup with your Base64 image in one passage, and (display:) macro to display it on the passage you want. (See tutorial here)
I think in your case, it would be:
(display: "badge")

From what I have read in the tweego docs, this sort of image passage is only supported by the Twine 1 story formats, so if you are using Harlowe 3 you are out of luck (and I’m a bit surprised Tweego even creates a passage for it).

edit: " Note: As of this writing, image passages are only natively supported by SugarCube (all versions) and the Twine 1 ≥v1.4 vanilla story formats." – Tweego Documentation

I tried that without the quotes and it said ‘badge’ was not defined.

With the quotes it displays literally

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABwgA.....

but not the image… This is the first trace I found of the data though… I wonder why it doesn’t display as an image…

Ahh, that’s a bummer. I’ll try it with sugarcube then.

Including image data in the HTML is not a very good idea anyway, because everything in that HTML needs to be loaded before the game can start. Just reference images the regular way, with <img src="image.webp" /> or similar, and make sure to upload the image as well when you publish your fic.

(This doesn’t properly work from within the Twine editor, unfortunately. One of my biggest pet peeves with Twine.)

I’ve been playing with Twine off an on for a while. Last time I checked all the browsers had locked down security so that twine stories couldn’t read files in the local directory, so including them in the file is really the only way. I don’t mind doing that as it’s just images which aren’t that big.

Hmm, I stand corrected. Including them seperately seems to work again. There was a while where it didn’t.

Wasn’t your passage called badge?

Yeah, I saw that tutorial, but I wanted to take advantage of tweego automatically encoding images into the document, and somehow set an image tag’s source to the data tweego automatically includes. I didn’t want to be pasting in base64 text manually into an image tag when that’s done for you by tweego. And the only reason I wanted one file anyway was because the last time I tried to make a game/story using twine/tweego browsers wouldn’t load images from a local folder because of security. That seems to be working again now, so I don’t have a need to include images in the file if that is the case. Maybe I was trying to use javascript to load the images or something fancy I don’t remember,but by the time I had that sort of working, I wasn’t feeling story-writey any more and dropped it.

I tried to teach myself blender, maybe use renpy to do what I wanted, but ugh. I have no art skills. Not feeling it. Wouldn’t get much story writing done if I have to mess with art. I would like to have the OPTION of images, one or two maybe, and there’s no reason html/javascript can’t do anything renPy can do.