How to add images to dialogue boxes in sugarcube

Twine Version:
2.6

I’m trying to make dialogue boxes that have a picture of their avatar in the corner and their info next to it(And give the image a border so its a little neat)

How would i go about making something like this? (And if your gonna answer could you please explain the code a bit so i can mess with it)

You can use this custom macro to so this easily. To use it, copy this in your Javascript section and this in your Stylesheet. The readme shows how to use the macros.

1 Like

Ok thank you, btw how do set an image in the ui bar to be in the center? Cause i tried to do it and it just puts it vary far to the left and you cant see the whole thing.

What code are you using? I just tested putting an image in the UI bar (with the StoryCaption passage) and it was automatically centered.

I used the StoryBanner passage and just put

<img src="https://images.cooltext.com/5652059.png" width="644" height="146" alt=" True 
Power. g " />

It looks to me like the image is too wide. The text is all the way to the left because that’s the way it is in the image. Try cropping it.

Ok also how would i center this and bring it a bit more close to the edges cause this is also giving me trouble:

First make sure that the dimensions of the image file itself are the size you want to show the image at, this way there will be less potential scaling of the image, thus less potential lose of detail.

eg. If you want the image to be shown in a 100px by 100px area of the banner then make sure the width & height of the image file are those values.

note: the default width of the Left Sidebar is 17.5em, which is around 280px on a desktop if the default font-size hasn’t been changed, so the image’s width will need to be less than that.

Next add the <img> element to the StoryBanner special Passage, making sure to give it an identifier so can be targeted by CSS. It would looks something like…

<img  id="player-portrait" src="https://images.cooltext.com/5652059.png" alt=" True 
Power. g " />

Finally set the dimensions you want that image to display as using CSS in your project’s Story > Stylesheet area. The CSS rule would look something like…

#player-portrait {
    width: 100px;
    height: 100px;
}

note: You can give the <img> element whatever identifier you like, as long as the above CSS Selector is changed to use the same identifier.

The StoryBanner special Passage’s purpose is to be used to add content to the Left Sidebar, it is not designed to show content that spans the width of the page, that what the PassageHeader special Passage is for.

I didnt use that in the StoryBanner passage, its in a normal passage.

I must of misunderstood, because earlier you stated…

So, based on the visuals of that image it appears that you are either:

  1. using some technique to suppress the showing of the Left Sidebar.
  2. using the StoryInterface special Passage to create your own custom User Interface.

Which of these are you doing?

If the 1st, then we need to know if you using either:

  1. the UIBar.destroy() or UIBar.hide() function to do that, and if so which function as one reclaims the left blank area of the page that is used to display the side-bar and one doesn’t and that will potentially affect the horizontal centring of Passage content on the page.
  2. Or using custom CSS to “hide” the side-bar, which can also result in the left blank area not being reclaimed if not done correctly. Thus also potentially affecting the horizontal centring of Passage content on the page.

If the 2nd, then we will need to see the HTML contents of your StoryInterface Passage, and the CSS you are using to layout that HTML.

How exactly are you displaying that image in that Passage?
eg. what code are you using, and what CSS are you applying to that code.

What are the native dimensions (width & height) of that image file?