Displaying an image based on previous selection

Twine Version: 2.3.16
Story Format: 2.36.1

Is it possible to show a different image based on whether the player chose to be male or female?

I have the following code set, where the player can create their own name, age and gender:

<<textbox "$name" "Enter your first name here" autofocus>><span id="name"></span>
<<textbox "$surname" "Enter your family name here" autofocus>><span id="surname"></span>
<<textbox "$age" "Enter your age here" autofocus>>
<span id="age"></span>
Gender
<label><<radiobutton "$gender" "male">> <<set $gender to 'male'>>Male</label>
<label><<radiobutton "$gender" "female">> <<set $gender to 'female'>> Female</label> 

This displays perfectly fine with:

<img src="img/test/002.jpg" class="float-left" >My name is <<print $name>> <<print $surname>>. I am a <<print $age>> year old <<print $gender>>.

However, I want to match the image to the correct gender. But (hopefully) without going into serious coding, it is possible that if $gender is Male to show picture 1, but if $gender is Female to show picture 2? These will just be generic pictures. I’m not going to try to fine tune it any further than that at present.

I haven’t got anywhere near the experience nor ability (yet, I hope) to make it any more complicated than just male or female, no hair colour, skin colour etc. So I’m hoping that it won’t require an extensive re-coding to do this. If that is necessary, then I’ll have to bite the bullet and try it.

Once again, thanks in advance for any help, and be warned that I have many more questions in the future.

You can simply rename your images to male.jpg and female.jpg and use $gender within the image source via the evaluation attribute directive. E.g.,

<img @src="'img/test/' + $gender + '.jpg'" class="float-left"> …
1 Like

So do you mean that if I have a series of corresponding images for the character depending on which gender they are, eg front view = male_001 or female_001, left side view = male_002 or female_002 etc, then I should just add the _001 part, to make it _001.jpg?
eg.:

<img @src="'img/test/' + $gender + '_001.jpg'" class="float-left"> …

Because currently, it just shows a broken image link.

Do I keep the spaces in

' + $gender + '

I’m sorry to be obtuse, but my brain is small, and I’m currently using most of it to type this.

I made a typo when I put the code in, so it works perfectly now, but my question about having more than one image to use still stands.

So do you mean that if I have a series of corresponding images for the character depending on which gender they are, eg front view = male_001 or female_001, left side view = male_002 or female_002 etc, then I should just add the _001 part, to make it _001.jpg?
eg.:

<img @src="'img/test/' + $gender + '_001.jpg'" class="float-left"> …

or maybe…?

<img @src="'img/test/' + $gender + number '.jpg'" class="float-left"> …

Yes that would work fine McFluff. Though I would recommend you name the latter half of the image to something more meaningful. For instance _front.jpg instead of _001.jpg

Also if you get a broken image after running it, you can right click/inspect on the broken image to see how twine is interpreting it and narrow down the problem.

1 Like

Thanks for that.

Just so I’m clear, male_front is better than male_001?
If I have several different front views, is male_front_001, male_front_002 acceptable, or I am making things difficult for myself?

It’s what I would do, but everyone is different.
If you have more than one male front view, it would make sense to add the number on the tail end I guess.