Variable image using widget

Authoring Twine
,
1

Twine Version: 2.3.14
Story Format: SugarCube 2.34.1

Hi, can you guys help me?
English is not my first language so maybe you will see some gramatical errors. I am not a programmer so I’m trying my best to learn when I need it. Now I’m trying to make an passage where the player will choose a character. The character have an image who will be on display in the UI-bar all the time and sometimes it can be altered if they pass by some apareance change in the history.

I create another History to test this system. I have something like this:
In my StoryCaption:

<span id="player-picture">
</span>

In an passage tagged widget

<<widget "player-picture">>

<<if $playerpicture is "1">>
	\<<replace "#player-picture">>
	\<img src="https://i.imgur.com/LNFqGGK.jpg" width="100%">
	\<</replace>>
<<elseif $playerpicture is "2">>
	\<<replace "#player-picture">>
	\<img src="https://i.imgur.com/QSBoi9N.jpg" width="100%">
	\<</replace>>
<<elseif $playerpicture is "3">>
	\<<replace "#player-picture">>
	\<img src="https://i.imgur.com/LNFqGGK.jpg" width="100%">
	\<</replace>>
<<elseif $playerpicture is "4">>
	\<<replace "#player-picture">>
	\<img src="https://i.imgur.com/wrMyDfv.jpg" width="100%">
	\<</replace>>
<<elseif $playerpicture is "5">>
	\<<replace "#player-picture">>
	\<img src="https://i.imgur.com/Efz8YeL.jpg" width="100%">
	\<</replace>>
<</if>>

<</widget>>

And when it comes to the character selection passage, there it is:

Choose your character:

[[choose player-picture1][$playerpicture to "1"]]
[[choose player-picture2][$playerpicture to "2"]]
[[choose player-picture3][$playerpicture to "3"]]
[[choose player-picture4][$playerpicture to "4"]]
[[choose player-picture5][$playerpicture to "5"]]

Ok. This is what somehow just don’t work. When I choose the caracter and go to a new passage with now the seted $playerpicture just don’t change in there. I don’t know what is wrong. I already see this topic How can I have an image in the UI bar change depending on a variable? - Twine Q&A but did not work! Can you help me?

2

You’re doing things the hard way.

In your StoryInit passage you’ll need to initialize $playerpicture like this:

<<set $playerpicture = false>>

then the character selection part would be like:

Choose your character:

[[choose player-picture1][$playerpicture = "LNFqGGK"]]
[[choose player-picture2][$playerpicture = "QSBoi9N"]]
[[choose player-picture3][$playerpicture = "LNFqGGK"]]
[[choose player-picture4][$playerpicture = "wrMyDfv"]]
[[choose player-picture5][$playerpicture = "Efz8YeL"]]

and the StoryCaption passage would just need to be:

<<if $playerpicture>>
	<img @src="'https://i.imgur.com/' + $playerpicture + '.jpg'" width="100%">
<</if>>

That will make it so that, if $playerpicture is set to something, then that’s the image which will be displayed using an “attribute directive” on the src attribute (the @ in front of src) and the value set in $playerpicture.

That said, I would not recommend having your images on a different website than your HTML. If you’re making this for download, it would be best to include all of the images in the download. Otherwise, the images and HTML should be on the same website.

Hope that helps! :slight_smile:

1 Like
3

This is everything that I needed!
You saved me bro thank you!
And about the images I will make this game to play online and the images are hosted by me in imgur. So they will not be deleted and the final archive will be more lighter

4

The problem is that some people may play these things offline, in which case those images will be broken for them. Everyone will also encounter broken images if imgur goes offline for any reason (maintenance, DDoS attack, network problems, etc.). Also, some people just have slow network connections, so online images will take noticeably longer to appear than ones included in the download. Furthermore, some people pay for their bandwidth, and so would rather only download an image once, instead of every time they play.

That said, it’s up to you, but experience tells me that it’s better to include everything the game needs in its download.