Howdy, Stranger!

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

Layering Images

Is there a way to layer images on top of each other in Twine?

Comments

  • You need to state which story format you're using, as answers can be different for each one.

    note: The following is assuming that you're using Sugarcane.

    You can use standard HTML / CSS in your story, the following is based on this tutorial.

    Add two images to a passage using standard HTML, the images are stored externally to your story file in an images sub-directory/folder.

    <img id="image1" src="images/image1.gif">
    <img id="image2" src="images/image2.gif">
    Position the images using CSS, the z-index property is what allows the images to be layered.

    #image1 {
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
    }

    #image2 {
    position: absolute;
    left: 115px;
    top: 115px;
    z-index: 2;
    }
  • Ok. A few questions.

    1. I have a shaky knowledge of usage of stylesheets and  I can pretty well understand the second part of your explanation, but the first part I'm not sure about. Would that be in the passage itself or in the style sheet or what? And Am I supposed to edit the "Src=" part to be the directory with the image, as opposed to "images\image.gif" or whatever?

    2. Would this method require hosting the images outside of the twine file?  Ie if I'm gonna host this somewhere or give the file out, how would it work? Since I assume that when you talk about images in a sub-directory/folder you mean that I have to have them somewhere on my pc where they're able to be connected to so the program can open them.  If there's a way to do this so I can just dump them in the twine file itself and then have it load from there...that would be best.


  • > To answer the first part of your first question: (re: "Add two images to a passage")
    Yes, you add the two image HTML tags to a passage.

    > To answer the second part of your first question and part of your second:
    Yes, your edit the src attribute. The src attribute of an HTML img tag indicates where to look for the file, generally relative to the HTML file itself.

    Again, You need to state which story format you're using, as answers can be different for each one.
    I will assume you are using the default Sugarcane story format.

    Sugarcane's image links don't support assigning an ID property to them, which you need for the above CSS to work and this is why I used HTML img tags.

    If you want to use images that you embed/imported into your Twine story file you, then you will need to wrap Sugarcane's image links in some HTML and assign the ID's to that HTML:

    <div id="image1">[img[image1]]</div>
    <div id="image2">[img[image2]]</div>
    Warning:
    Twine 1.x will fail to build/generate your HTML file if there are too many images embed within your story TWS file(s) because the contents gets too large (in MB) for it to handle.
    Once you start having this issue you will need to either reduce the file size/number of the images or to store them external to the generated HTML file.
  • greyelf wrote:

    > To answer the first part of your first question: (re: "Add two images to a passage")
    Yes, you add the two image HTML tags to a passage.

    > To answer the second part of your first question and part of your second:
    Yes, your edit the src attribute. The src attribute of an HTML img tag indicates where to look for the file, generally relative to the HTML file itself.

    Again, You need to state which story format you're using, as answers can be different for each one.
    I will assume you are using the default Sugarcane story format.

    Sugarcane's image links don't support assigning an ID property to them, which you need for the above CSS to work and this is why I used HTML img tags.

    If you want to use images that you embed/imported into your Twine story file you, then you will need to wrap Sugarcane's image links in some HTML and assign the ID's to that HTML:

    <div id="image1">[img[image1]]</div>
    <div id="image2">[img[image2]]</div>
    Warning:
    Twine 1.x will fail to build/generate your HTML file if there are too many images embed within your story TWS file(s) because the contents gets too large (in MB) for it to handle.
    Once you start having this issue you will need to either reduce the file size/number of the images or to store them external to the generated HTML file.

    Thank you very much, that works like a charm.  Sorry about the lack of info on the style; it was sugarcane, like you assumed.
Sign In or Register to comment.