Resizing an image thats assigned to an object

Authoring Twine
1

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

So i made an object that looks like this:

<<set $healer = {
“name” : “Jennifer”,
“skill 1”: “Healing”,
“skill 2”: “Staff”,
“picture”: “[img[https://i.ytimg.com/vi/LyOOf3GrpcQ/mqdefault.jpg]]”
}>>

(The image used here is only a placeholder)

and i can make it print all those out without a problem using something like this:

<<print $healer.picture>>
<<print $healer.name>>

the thing i can’t figure out is how to specify the dimensions of the image like you would do it with html like this:

style="width:400px;height:400px;

so that it basicly forces the image to display with the dimensions 400 x 400. right now it just takes the dimensions of the picture itself.

I tried putting the html version directly into the object but i couldn’t get that to work.

Thanks in advance.

2

You could do something like this:

<span class="avatar"><<print $healer.picture>></span>

and then in your Stylesheet section have something like this:

.avatar img {
	max-width: 400px;
	max-height: 400px;
}

That will style the image within that <span> so that it’s no larger than 400px in either direction. This also makes sure that you aren’t distorting the image’s aspect ratio, which could happen if you did “width:400px; height:400px;” instead.

Hope that helps! :slight_smile:

3

hi there!
Instead of using the default img markup from sugarcube you could do something like this:

<<set $healer = {
"name" : "Jennifer",
"skill 1": "Healing",
"skill 2": "Staff",
"picture": "<img src='https://i.ytimg.com/vi/LyOOf3GrpcQ/mqdefault.jpg' style='width:400px;height:400px;' />"
}>>

just make sure you use single quotes inside the html or it will conflict with the already existing double quotes.

4

Thank you.

I tried it like this but couldn’t get it to work. I need to look more into the stylesheet options, but for now the other solution below of just using html is something i understand and could properly implement.

5

I knew there had to be a way to do it with html, i just didn’t have the knowledge to know that in a case like this i have to pay attention to the double and single quotes, so thank you very much for that, it works now as intended.

6

I don’t know why it didn’t work for you, because copying the code I posted here into a new project along with your example object shows that it does indeed work. Download that project here (link good for 60 days).

Did you put the CSS into the Stylesheet section (accessible through the bottom menu in the Twine editor)?

I have to guess that you either didn’t copy that code correctly or used a “Stylesheet” named passage for the CSS instead of the built-in Stylesheet section.

Anyways, you can download that project and import it into the Twine editor if you want to take a look at the very simple code.

8

Sorry that was my bad, I’m still new to twine and programming. i did not, how you suggested , have a passage called stylesheet, i did put that part of the code into the built in one. my guess is that i did indeed copy it wrong, i still have to get used to using ctrl+c whenever possible, instead of writing everythin per hand.

the copy i created to test your solution does work now too, so thanks for that.

Luckily for me i don’t have to worry about distorting the pictures that i’m gonna use later becuase i already cropped them so they have an aspect ratio of 1:1. And becuase of that i think i’m still gonna stick with the html solution for now becuase as a beginner i can read that better without having to think to hard what i did there.

Thank you so much for putting that much effort into it though, i really appreciate it.