Changing an image in Story Caption

Question

Hi guys ! I must start by apologizing because this question has probably been asked millions of times but nothing i could find helped me.

I'm using twine sugarcube.

So my problem is pretty simple . I want to set a variable that has an image to then display it in Story Caption.

This way i can change my variable easily during the game to change the picture of the main character.

So this is my code :

<<set $youImage to "img\you\smallyou.jpg">>

And in story caption i just use $youImage to display it. Yet this doesn't work ? What am i doing wrong ? 

Thx in advance for the answers. 

Answer 1

Are you using image markup or html? Or just the variable? Using just variable will probably just print the file path string. Make sure you're doing something like this: 

[img[$youImage]]

Also, note that in the application version of Twine 2, in the testing modes, relative links will not work. If you publish to file and place the html and images all in the right places, the relative links will work fine, though. 

Comments

Hey ! I'm not totally sure what image markup is. i've tried to replace my $youImage with what you posted (in StoryCaption). But now instead of displaying imgyousmallyou.jpg when i run my html file,  it just display nothing.

For the relative link i know, i publish the story in the right folder to make sure that the link are right.

Answer 2

One issue is that network paths use (forward) slashes not backslashes.  For example:

<<set $youImage to "img/you/smallyou.jpg">>

 

Beyond that, backslashes start string escape sequences.  The escapes you inadvertently used, \y and \s, simply yield y and s, since they don't map to any specific predefined sequence—meaning that "img\you\smallyou.jpg" becomes "imgyousmallyou.jpg".

Comments

Oh !  I didn't know about that. Thx for the answer

Answer 3

edit: It seems you got three answers for the price of one. lol

1. A brief explanation of why your existing code is not working.

a. Both Naked Variables and the <<print>> related macros output the current value of the variable, and the $youImage variable currently equals a String value of "img\you\smallyou.jpg". While that String values is meant to represent both the path to the image file's location as well as the name of the image file itself, it isn't actually a real HTML img element (or Image object) so the engine doesn't know to display it as anything other than plan text.

b. Due to historical reasons a forward slash "/" is used as the path separator to indicate a folder/director in a URL, this is true even on Microsoft based operating systems. So for your String value to correctly represent a path & file name it would need to be changed to "img/you/smallyou.jpg"

c. The back(ward) slash character "\" has special meaning within a String value, it is used to escape special characters. This is why the text output of your variable looks like "imgyousmallyou.jpg" (without slashes), and why if you want to a back slash to appear in text output then you need to double that slash like so "img\\you\\smallyou.jpg"

2. Converting a valid Relative URL String path & file name into an HTML img element using Images markup.

Add markup like the following to your Story Caption special passage and the image should now appear.

[img[$youImage]]

note: You should initialise the $youImage variable with a default (valid String path & file name) value within your StoryInit special passage so that the StoryCaption passage as something to show when the story first starts, this could be a blank image if you don't want show an image at the start.

Comments

Thx a lot for your anwser. It is now working perfectly + I understood  a new thing in sugarcube.