[I7, Glulx, Quixe] Figures Show Up in IDE and Lectrote, Not Quixe

[Jeff_Nyman]

I have a figure defined as such in my source text:

Figure of Bannes Banner is the file "Bannes Banner.png".

When play begins:
	display the Figure of Bannes Banner.

It shows up in my Index correctly:

In the IDE, it shows up correctly:

(It shows up in Lectrote correctly as well.)

However, in the standard Quixe template, the figure does not show up.

There’s no error in the browser developer console although I don’t know if I should have expected one.

So is there some step I’m missing to have figures show up in Quixe?

Rumination: I’m wondering if I should just go with Z-Machine rather than Glulx? (Although I don’t know if I can get the styling that you see above with the Z-Machine.) I also brought up this post [I7, Glulx] Retaining Text Style Settings in Web Interpreter, which @Dannii was kind enough to provide template for. But so far I’m running into lots of problems and just curious if perhaps the Z-Machine is the better bet.

[A_J_Mako]

Jeff,
It takes a little work. I had to add the following to the html to get figures to work:

<script type="text/javascript">
game_options = {
	image_info_map: { 3: { "image": 3, "url": "bridgekeeper.png", "width": 300, "height": 300 } }
};
</script>

I couldn’t get the figures working otherwise. Note that the 3 is the resource number found in the index in both cases. You can see it in action here: http://www.ajmako.com/games/bridge/play-quixe.html

[zarf (Andrew Plotkin)]

See this thread: 2 issues with Release: (Figures don't show & "empty" gblorb)

[Jeff_Nyman]

Okay, so this almost got me there. I figured it out but this is a little clunky, at best.

Taking @A_J_Mako solution, I added this to play.html:

<script type="text/javascript">
game_options = {
	image_info_map: { 3: { "image": 3, "url": "Bannes Banner.png", "width": 352, "height": 78 } }
};
</script>

You do have to make sure to move your image manually into the Release folder, incidentally.

Crucially, however, there is something already in play.html like this:

<script type="text/javascript">
game_options = {
image_info_map: 'StaticImageInfo',  // image data is here, not in blorb
use_query_story: false,
set_page_title: false,
inspacing: 0,     // gap between windows
outspacing: 0     // gap between windows and edge of gameport
};
</script>

So you can just replace image_info_map there, as such:

<script type="text/javascript">
game_options = {
image_info_map: { 3: { "image": 3, "url": "Bannes Banner.png", "width": 352, "height": 78 } },
use_query_story: false,
set_page_title: false,
inspacing: 0,     // gap between windows
outspacing: 0     // gap between windows and edge of gameport
};
</script>

If you do all that, the image does actually show up in Quixe.

That “StaticImageInfo” appears to refer to something in resourcemap.js but I’m not sure of the connection entirely.

In any event, this does absolutely do the trick and I’m having a bit of deja vu as, upon further searching, I found a thread where I had dealt with this issue long before Reference: Adding images to a Glulx game in Quixe.

My only slight concern is that this will likely not be very tenable for a classroom setting where they have kids update things on the fly or even where the teachers may want to periodically change things but I’ll see how that goes.

Thank you for the assist here!