Widgets in sugarcube 2

So, I am working on several projects in sugarcube. I am newish to Twine. I have a tendency to need to work out how I am going to do everything before I really get started on a project. I also like to finish my work before I share it. That being said, I am trying to design a widget that will display a characters image followed by that characters dialog. Any pointers?

From the documentation there is this:

→ Creating a simple dialog box widget
<<widget "say" container>>
	<div class="say-box">
		<img class="say-image" @src="'images/' + _args[0].toLowerCase() + '.png'">
		<p class="say-text">_contents</p>

→ Using it
<<say "Chapel">>Tweego is a pathway to many abilities some consider to be… unnatural.<</say>>

There is also this extension by ChapelR.

So I used the exact code frome the documentation except that I changed @src="‘images/’" to my actual relative path and I’m getting an error that says “say is not a macro”…

Did you add the “say” macro code to your game’s JavaScript section and its CSS to your game’s Stylesheet section?

No. I just copied the code from the sugarcube documentation.

Did you do as instructed by the 1st warning in the <<widget>> documentation and place the the “widget” definition part of the relevant code example…

<<widget "say" container>>
	<div class="say-box">
		<img class="say-image" @src="'images/' + _args[0].toLowerCase() + '.png'">
		<p class="say-text">_contents</p>

…within a widget tagged Passage?

Yes, but it was tagged Widget not widget. I changed that but am still getting an error message:

Error: <<say>>: error within widget contents(Error: <img>: bad evaluation from attribute directive "@src": State.temporary.args is undefined)

Which version of SugarCube 2.x are you using?

As stated in the History section of the <<widget>> macro documentation the _args temporary variable was added in v2.36.0 so if you are using an earlier version then you need to use the deprecated $args story variable instead.

You might want to just use Chapel’s “Speech Box” extension that P.B. referred to, in which case you’ll need to copy its JavaScript and CSS for it to work.

.contents o work with $arg but there is a line in the widget:


When I run the game the image displays (though it’s bigger than I want) and the text displays but so does ‘_contents’.

So, I went back to the documentation and sure enough, my version of twine did not support the container widget so i did the smart thing and updated my copy and now it works. And maybe now other things that i couldn’t get to work will. As an off handed question, can i change the size of the picture in the widget, or in the call or do i just have to resize the darn thing…

thanks for your input.


To increase the image size, try adding this to any stylesheet passage

.say > img  {min-width: 300px; min-height: 300px}

or to decrease it below the default:

.say > img  {max-width: 50px; max-height: 50px}

If that doesn’t work try adding !important after each part like so

.say > img  {min-width: 300px !important; min-height: 300px !important}