Restoring Images to Released Inform Websites
An unpleasant surprise
We have gathered our image files and declared them properly within our project. Our project includes this sentence:
release along with a "bisquixe" interpreter.
All is in readiness, so we click the release button within our development environment.
Soon after, authors will be dismayed to discover that Inform has stripped all images from their web release. There is no warning or notification stating that this has happened. There is no toggle by which we can control this behavior. There is additionally no mention of this feature within the documentation.
To be clear: this has nothing to do with Bisquixe. Any Inform project released as a website will be stripped of its multimedia content. This only happens with websites, so GBLORBS will still reflect our artistic intentions.
While these omissions might provoke discussion, let’s hope that Inform 11 will be a brighter day. How can we restore what has been taken away? There are two options for Bisquixe users.
Option 0: Parchment sitegen
Some readers might find this page while searching the forums for a solution to their missing images problem. For their benefit: if you are not using Bisquixe or custom CSS, it is easy to produce a single-file website from a GBLORB file. Simply use the below website:
pros:
- simple and foolproof
cons:
- not compatible with this guide
- CSS within the file is hard to modify
Parchment sitegen is a great option for people who want a website without the overhead of customization.
Option 1: Using Bisquixe
Since Bisquixe interacts with our web page’s html, One option is to use Bisquixe to add pointers to image files that we can release with our web page. In other words, we can tell our project where to find the missing images. As long as we have them in the right place, all will be well.
This tactic uses the Glulx resource ID value discussed within the previous post.
We start by adding images to our project according to the documentation.
figure madame matisse is the file "mmatisse.jpg".
figure icarus is the file "icarus.jpg".
They must be displayed according to the documentation.
when play begins:
display figure madame matisse;
say line break;
display figure icarus;
So far, we have not done anything new. Everything is just as the documentation directs. This is the point at which we intervene with Bisquixe code, using the Glulx resource ID. We never need to know what the ID is; we just need to associate a variable with it.
let [a variable name we choose] be the glulx resource id of [figure name];
For instance, we could decide that we would like to refer to figure icarus as icarus-ID.
let icarus-ID be the glulx resource id of figure icarus;
Once we have a variable name for the relevant glulx resource ID, we can tell our project how to find the relevant file. This is accomplished by an add-image phrase. This is code enabled by Bisquixe. The format is as follows:
add-image "[actual file name]" with alttext "[custom alt-text for image]" with id [variable for the relevant Glulx ID] with width [image width: a number] with height [image height: a number]";
There’s a lot to take in, here. Note that everything is required. Our project will not compile without image dimensions. We can change those dimensions; perhaps we wish to halve them for a smaller footprint. However, images can appear distorted, stretched, or blurry when these values are changed, so authors must take care.
Since our website as-released does not include the image files, we will have to make sure they are available. Images specified in a Bisquixe project are expected to be in a Figures folder within the Release directory. In practice, this is as simple as copying the Figures folder from our Materials directory, since that should contain all that is needed.
A Simple Demonstration Project
"test"
Lab is a room.
include simple multimedia effects for v10 by mathbrush.
release along with a "bisquixe" interpreter.
figure madame matisse is the file "mmatisse.jpg".
figure icarus is the file "icarus.jpg".
When play begins:
let icarus-ID be the glulx resource id of figure icarus;
add-image "icarus.jpg" with alttext "A figure falling from the sky." with id icarus-ID with width 579 with height 874;
let madame-ID be the glulx resource id of figure madame matisse;
add-image "mmatisse.jpg" with alttext "An intriguing woman." with id madame-ID with width 480 with height 600;
when play begins:
display figure madame matisse;
say line break;
display figure icarus;
Note that there are some opportunities to manipulate image scaling and dimension via variables, so things like
to decide which number is the image width of (n - a figure name):
if image shrink is true:
decide on 579;
otherwise:
decide on 700;
are possible.
pros:
- ability to manipulate image dimensions dynamically
- can further customize output using variable
figure namevalues - code format is highly readable
cons:
- adding two lines of code for each image might become cumbersome
- added overhead of managing image files for release
Option 2: ifsitegen.py
Rather than modifying our project, we could seek out an alternate release method: ifsitegen.py. Many authors will find that there is an initial learning curve, but overall effort is lower in the long-term.
Ifsitegen.py uses our Inform installation files, but it does not require that we do anything within Inform, or even that we have it running.
The script will use website and interpreter templates to build a website out of our GBLORB file. Since the script uses relative pathing, everything should “just work” if we gather the needed files. First, create a directory that we will use for making releases. It should contain the following:
- website template as a .zip file
- interpreter template (Bisquixe) as a .zip file.
- our GBLORB file
- the script itself,
ifsitegen.py - cover image file, if any
Additionally, we will need a current version of Python. Get it here:
Download Python | Python.org
How do we secure zipped versions of website templates? Unless we have built some of our own—in which case we know where to look—we seek the “classic” and “standard” website templates from our Inform installation directory. The standard template is the default; it will be most familiar to players and authors.
The template should be in a zip file called, for instance standard.zip, and the files within should be there. More specifically, they should not reside within a folder or folders inside the .zip, but should instead be immediately visible within the .zip file. We can find those templates here (Windows):
\Program Files\Internal\Templates
or, for Mac
/Applications/Internal/Templates
If we are following this guide, we have already downloaded the Bisquixe interpreter. We will need that as a .zip file, too.
The script generally can find these things on its own, but authors will usually be glad that they are maintaining their release environment as a “one stop” destination.
It’s time to run the script. We open the window containing all of our needed files, and then we open a terminal window. In Windows, simply right click the open window and select Open in Terminal. Mac users can find system-specific guidance here.
However we get there, the formatting of the command is straightforward. If we want to review general help, we can simply enter python ifsitegen.py to review formatting and options. If we already have our files in one place, our work should be very simple. This command can be used as a template:
python ifsitegen.py -w "[website template like standard.zip]" -i "bisquixe.zip" --title="[your game title as it will appear at the top of the page and side links]" --author="[author name as it will appear at the top of the page and side links]" --cover="[your cover art file]" "[file name of your game file, complete with .gblorb extension]"
If all is in place, a “release” folder will be created that contains our website, images and all. Note that not everything in this script is required. If we are testing, there is no need to specify author, title, or cover art. In fact, we many never have cover art to specify. All we need to test our game is to specify a website template, an interpreter template, and a game file.
This should work fine, for instance, provided that all of the needed files are in place.
python ifsitegen.py -w "standard.zip" -i "bisquixe.zip" "test.gblorb"
If we keep our terminal window open, we can simply repeat our command with arrow keys rather than typing everything once more.
In all respects, this solution will mimic Inform’s behavior within a game file, more or less, though we can still present web-specific images using the if bisquixe is supported condition from post number 14.
pros:
- able to refer to images in-project consistently between GBLORB and website deployments.
- no additional code
- single method across all projects
cons:
- less flexible
- reliance on external tools
- initial setup with Python and template files will be daunting for many
The Bottom Line
Restoring or releasing a website with images requires added work, but authors can choose which approach is best for them. The decision is ultimately one between handling the problem during or after release. While there is no known release date for Inform 11, it is very safe to assume that we will no longer need to take such steps when that day comes.
In any case, authors will have different levels of experience and comfort with the different techniques available, so this reference is meant to inform rather than to advise.
