Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Photo size

Is there a way in sucarcube-2 to have the pictures you use gain specific sizes?

I have a lot of photos, of different (often too big) sizes, and it would be grand if I wouldn't have to change them all manually myself. Is there a way in twine to do this?

If there isn't, does any here know of another way to solve this?


  • There are a number of ways you can do this.

    1. If the images are/can be different sizes:

    You can use standard HTML elements like the img element in your passages, and the img element has both a height and a width attribute which can be used to control the visual size of the image being shown.
    Some passage text...
    <img src="your-image.png" height="100px" width="100px">

    2. If the images can be grouped together in to a couple of different sizes:

    Assign the img elements a class attribute instead of a height/width and use CSS to style that class.

    The passage content:
    Some passage text...
    <img src="your-image.png" class="characters">
    <img src="your-other-image.png" class="big-images">
    The CSS to style them, this goes in the Story Stylesheet area:
    .passage img.characters {
    	height: 100px;
    	width: 60px;
    .passage img.big-images {
    	height: 200px;
    	width: 200px;

    3. All the images are the same size:

    Use CSS to style all the images to be the same size, you can use either a [img[]] markup or an img element.

    The passage content:
    Some passage text...
    <img src="your-other-image.png">
    The CSS to style them, this goes in the Story Stylesheet area:
    .passage img {
    	height: 100px;
    	width: 100px;

    note: If you are using an img element and want the image to also behave like a link to a passage then you can use special HTML Attributes to do that, as demonstrated in that linked page's example.
  • Wow! Thank you, greyelf. This will save many an hour of my life!
Sign In or Register to comment.