Adding Images to Twine 2?

Question

Been searching the previous questions but was still unable to figure this out (still new at twine).

We were able to create a storyline and linked the passages like this to the next page:

ex: (link: "I got social anxiety and I wanna go home")[(set: $awk to $awk + 5)(goto: "1B Anxiety")]

However, when we added in the image source link (we want to use an image to link to the next passage), it does not show and the twine passage automatically changes to the next page??

Where should we add in our image source link?

Answer 1

Ahh, media and the hardships that come with it. You already know that twine 2 can't embed media so you much work around it. I don't know if I can help too much, but I do know that I was able to get images to work on my website using neocites. I recommend it(its free). All you gotta do is upload the image to obtain the image link, then you gotta do this.

<center><img src="Name of file.filetype" alt="This text will show up when you hove over it"></center>

<center></center> is optional.

You can put this code where ever you want the image to appear relative to the text.

The issue is that for this to work, the twine story file must also be uploaded to the same website you have the image.

I also have no idea how to use images as links, so this answer might not be helpful at all. If this is the case, please hide this answer so your question will still attract others.

Answer 2

You didn't supply an example of your image showing link code, so it is difficult to state why you saw the behaviour that you did.

However the fact that the passage that included such a link automatic moved forward to the next passage leads me to guess that the syntax of your link code was invalid which could cause the (go-to:) macro to unconditionally be executed.
eg. If the start or end square brackets of the (link:) macro's associated hook were perceived to be in the wrong place or missing then that could result in the (go-to:) macro always being called instead of just when the link was selected.

The following is the basic syntax of a macro based Setter Link that includes an Image, notice how both single and double quotes are uses to distinguish the inner String value assign to the src attribute of the img element from the outer String value being passed as the argument to the (link:) macro.

(link: '<img src="media/image-name.png">Link Text')[
	(set: $variable to "value")
	(goto: "Target Passage")
]

note: The above example assumes that the story HTML file you generated via the Publish to File was saved in a location that includes a child folder named media, and that your image file is stored within that child folder.

Comments

OFF TOPIC

All these questions are getting me excited to see your project. Best of luck.