Resizing images from story variable

Authoring Twine
1

Twine Version: 2.3.9
Story Format: SugarCube 2.31.1

I have a story variable which contains an array of objects(npc’s) which have links to images I want to be able to display in multiple passages, with varying sizes. So, in passage one I would display it at, say, 320 pixels wide or something, and in the second passage the same image would be displayed at 580 pixels, and so on.
How should I go about this? From my research both html and css could be used to resize images, but I have no idea how to approach this, since I lack proper understanding of both alternatives.
From how I understand it, html would either have to be usable on story variables, or css would have to be able to set up multiple different sets of sizing rules which I could specify each time I want to display an image.

1 Like
2

You can use Attribute Directive markup to assign a value from a variable/expression to an attribute of a HTML element.

note: the following example is written using TWEE Notation.

:: Story Stylesheet [stylesheet]
.small {
	width: 320px;
}
.big {
	width: 580px;
}


:: StoryInit
<<set $party to [
	{name: "Jane", portrait: "jane-portrait.jpg"},
	{name: "John", portrait: "john-portrait.jpg"}
]>>


:: Start
<<set _size to "small">>

Name: <<= $party[0].name>>
<img @class="_size" @src="$party[0].portrait">

[[Second]]


:: Second
<<set _size to "big">>

Name: <<= $party[0].name>>
<img @class="_size" @src="$party[0].portrait">
1 Like
3

This was extremely helpful, and I’ve got it working the way I want it now, thank you.

Cheers.