How can I open a popup browser window showing an already loaded image passage?

Authoring Twine
1

Tweego v2.1.1+81d1d71
SugarCube v2.37.3

How can I open an “already loaded image passage” in the user’s browser as a full-screen popup window?

By “already-loaded image passage” I mean an image passage which already has been incorporated into the story’s html by tweego.

I know how to open a popup if the image is in an external file, but my attempts to modify it to work with pre-loaded images have failed miserably.

Here’s the twee code I use to open an external image file in a full-screen browser popup window:

:: image_fs [script]

Macro.add("fsp", {
    handler: function() {
    window.open('CampingCavalcade/' + this.args[0] + '.webp', 'full-screen popup', 'height=' + screen.height + ',width=' + screen.width + ', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=yes');
}
});

which is invoked by

<<link "full screen popup">>
  <<fsp "_img_301">>
<</link>>

Thanks for whatever help you can provide.

2

I’m pretty sure any solution would involve loading the game again in a new window, meaning that the game engine state would not carry over between windows. Someone else can tell you if I’m off base here.

That said, if you don’t need to pass the state between windows, you could just load a static external HTML file with your content.

Alternately, you could use the dialog box API, which creates an in-page popup and supports including existing passages. This is preferable if you’re doing anything complex.

You can use CSS to make it fill the page. The in-page dialog box wouldn’t actually be full-screen, but your original script isn’t necessarily going to load in full-screen either due to browser limitations. On my browser, for example, I get the URL bar when I run your script (though maybe that’s the sort of full-screen popup you were expecting).

3

You could try loading the image yourself and opening a data URL.

4

Well, maybe that’s a little closer. But how do I include the contents of a specific passage?

If I define

Macro.add("fsd", {
    handler: function() {
    window.open(this.args[0], 'full-screen popup', 'height=' + screen.height + ',width=' + screen.width + ', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=yes');
}
});

and invoke it with

<<fsd "data:image/webp;base64,UklGRhTyAgBXRUJQVlA4IAjyAgBQrwydASoABwAEPnU2lUikorCuJPPbkhAOiWVsZh1dHij/w0Y/P/+9Bu9l0fDzOqV3ggx22PG8LZIPuP3Xzq/67YX9S/xf7J86zm39w/7X+P/xngj/8/ifes/4v/se4D/QP7n/1v797fv+R3Ne5PsBftF6F37H9n/U7+x/6Pp+f8z0OP2D/f+wR+tXqH/4 ... ">>

but using a complete data:image definition, not the abbreviated one above, it works fine: the image is shown in a full-screen browser popup.

How can I point it to a named passage which contains such a data declaration? (which is what tweego creates)

I had hoped that an include might do that, but
passing it either <<include 'passagename'>> or “<<include ‘passagename’>>”``` yields a blank popup.

5

Got it!

Macro.add("fss", {
    handler: function() {
    window.open(Story.get(this.args[0]).text, 'full-screen popup', 'height=' + screen.height + ',width=' + screen.width + ', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=yes');
}
});

invoked with

<<link "full screen storyget popup">>
   <<fss "_img_302" >>
<</link>>

shows the image passage named “_img_302” full screen! An empty about:blank window is shown briefly, but that’s OK. For now, anyhow :wink:

6

This should work:

Macro.add('fsd', {
	handler() {
		let source = this.args[0];

		if (source.slice(0, 5) !== 'data:' && Story.has(source)) {
			const passage = Story.get(source);

			if (passage.tags.includes('Twine.image')) {
				source = passage.text.trim();
			}
		}

		window.open(source, 'full-screen popup', 'height=' + screen.height + ', width=' + screen.width + ', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=yes');
	}
});

Usage:

/* Using a full URL. */
<<fsd "https://my.url/images/foo.webp">>

/* Using a relative URL. */
<<fsd "images/foo.webp">>

/* Using a data URL. */
<<fsd "data:image/webp;base64,…">>

/* Using an image passage name. */
<<fsd "passage name">>
1 Like
7

Thanks! a little generality never hurt anyone :wink: