Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

2.0 — making passage link to html/image code instead of text?

In my project I'm embedding artwork through the base64 method, which requires an img HTML link. I'm wondering if it's possible that I can link this image to a passage? Every method I've seen for linking appears to require Passage in text, but the link isn't registered when I try it.

Comments

  • You need to state which Story Format you are using when asking a question, as answers can be different for each one.

    SugarCube 1.x (which comes with Twine 2) supports image based markup links, this ability is also supported by SugarCube 2.x

    warning: If you are using the hosted release of Twine 2 then you need to be aware that the maximum size (in MBs) of a project is limited by your web-browser's localStorage maximum size setting, which is between 5 and 10 MB depending on the brand of web-browser. Embedding base64 encoded data can quickly increase the size of your project.
  • Sorry, didn't realise that was the case. I guess it's Harlowe, whatever the default for Twine 2.0 is? It's the standalone installation, not the hosted one.
  • Yeah it's Harlowe 1.2.1.
  • One solution for Harlowe is to use a named hook to wrap your img element and then uses a (click:) macro combined with a (go-to:) macro like so:
    [<img src="data:image/gif;base64,R0lGODl....." />]<hookname|
    
    (click: ?hookname)[(go-to: "Next Passage")]
    
    ... you can name the hook whatever you like, as long as you also change the reference in the (click:) macro.
  • Ah great — I'd actually gotten it working by the original Passage route, I guess I did something wrong the first time.

    However something very odd I noticed is that the image on its own appears instantly, but when it's connected to a link it takes substantially longer to appear.

    The named hook method you used cuts that time down dramatically, but it still takes a second to appear vs when there's no link at all. Is there anything I can do to avoid the lag?
  • edited February 2016
    What are the dimensions (width x height) of your test image because I use one 127x127 and it appears instantly using Chrome/Firefox/IE/Edge on Windows 10.

    Which web-browser / operating system are you using?

    I have attached an Archive containing my test case story, which can be loaded via the Import From File option.
  • I'm on OS X 10.11.3, and this is in the standalone Twine 2 download so whatever engine that's using (Chromium?)

    The image is 524x740 but it doesn't seem to make a difference if it's bigger or smaller. Nor does the browser, that was the first thing I tested and Safari, Chrome, and Firefox all have a lag when the image is linked vs when it's just on its own.
  • The installable release is based on nw.js, so it uses the web-kit engine.

    I don't have access to a OSX based machine, so I am unable to debug the issue for you.
    Have you tried adding a similar img element to a vanilla HTML file to see if it is the loading of the base64 image that is causing the delay?

    Something like the following:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Testing the loading of a base64 image</title>
    </head>
    <body>
    	<img src="data:image/gif;base64,R0lGODl....." />
    </body>
    </html>
    
  • Weird, no issues with that whether I a href the image or not, but it gets a delay in Twine if it's linked.
  • mixvio wrote: »
    I a href the image or not
    Harlowe does not use anchor elements for it's links (markup or macro based), it uses unobtrusive click event handlers.

    eg. My previous hook/click combo example produces the following HTML
    <tw-enchantment class="link enchantment-link" tabindex="0">
    	<tw-hook name="link">
    		<img src="data:image/gif;base64,R0lGODlhfwB9A..." data-raw="">
    	</tw-hook>
    </tw-enchantment>
    

    Do you get the same/similar delay in a Twine passage containing a wall of text and a no markup link?
  • I mean anchors in a vanilla HTML file, not one produced by Twine. There's no delay at all in a vanilla HTML file even if the image is also a link, but there is delay in Twine if an image is also a link (but not just an image by itself.)
Sign In or Register to comment.