0 votes
asked by (180 points)

I'm currently working on an interactive translation for a picture book, and am trying to figure out an elegant way to incorporate the actual pictures. (The passages are formatted in such a way that I can't stick the images in with the text, and I'm trying to save a straight-up image gallery passage as a last resort.) What I'd like to do is...

  1. Place some text in the UI bar linking to the image.
  2. Set a variable in the link so that it changes depending on the passage. For example, if the reader is on a passage with the tag "Chapter3," the link in the UI bar will be set as "images/chapter3.png," with the numeral after "chapter" being the variable.
  3. Ideally have the link result in a pop-up box displaying the image (like the Saves and Restart message boxes).

I'm unsure if it's possible to set a variable like this within a url in the first place, or if it can be tied to specific passages. Thank you for any advice you can give! I see similar questions have been answered for Harlowe, so hopefully the solution is out there.

1 Answer

+1 vote
answered by (62.6k points)
selected by
Best answer

You haven't mentioned where you want this link, so I'm going to assume you intend to place it within the StoryCaption or StoryMenu special passages.  The passage tag to story variable bit is easy—though, I question if you need the story variable at all.  Opening the image in a dialog is a bit more advanced, requiring the Dialog API.

For example, the following will use tags like Chapter# to create the image, which it opens in a dialog named Image:

<<link "Show Image">><<script>>
// Set up our variables.
var tag = tags().filter(function (tag) { return tag.startsWith('Chapter'); })[0].toLowerCase();
var src = 'images/' + tag + '.png';

// Set up the dialog and open it.
	.wiki('<img src="' + src + '">')

NOTE: The example does not set a story variable, as I'm unsure if you actually need it or only thought you did to achieve the result you wanted.  If you actually do need it, let me know and I can add that to the example.

SEE: <<link>>, tags(), Dialog API.


commented by (180 points)
This is exactly what I was looking for -- thank you so much. (And thank you for including links to the relevant pages from the documentation, too, since I want to read up more on this and learn how to tweak it myself.)
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.