+1 vote
by (180 points)
edited by
My university lecturer didn't explain at all how to use Twine or Sugarcube and I've been going around Google trying to find different tutorials to do what I need, since I'm very much at beginner level of any sort of coding language. All I want to know how to do is have an image be clickable and connect to the next passage (which will also have a nother clickable image). Also if possible, how would I resize my image to fit the Google chrome browser? Whether I use a width/length indicator or not the image is super sized for some reason?

I use Twine 2 with Sugarcube 2.27.0 and I'm on Windows 10

Here is my code for my first passage

<img src="images/choices1.jpg" width="756" height="540" alt="blah blah" />

(I only used blah as filler text for my actual writing and I use the [[blah]] link just as a test)

Any help/explanation would be vastly appreciated, I've also tried going on the sugarcube v2 documentation but I don't understand a single thing other than the basic things like image tag

2 Answers

0 votes
by (44.7k points)
selected by
Best answer

Well, for the very basics, you can read through this Twine 2/SugarCube 2 tutorial.  After that, I'd recommend at least skimming through the SugarCube 2 documentation.  For example, you can read where it explains how to do basic image links in SugarCube.  For other sample code see the Twine Wiki.

Check out the MDN web docs and the W3Schools site for help with HTML, CSS, and JavaScript coding if you want to do something fancier than plain text and images.

Now, back to your original question.

If you want to use an HTML <img> element, then you'll need to wrap an HTML <a> element around it to link to the passage you want to go to, like this:

<a data-passage="Passage Name" class="link-internal link-image">
	<img src="Image.jpg" style="max-height: 300px">

The "data-passage" property should be set to the name of the passage you want the link to go to, and then just add the "link-internal link-image" classes.

Note that I also set the style on the image to limit the maximum height.  If you want to modify the image dimensions you should probably use something like that to avoid distorting the image.

You can also add a "title" property if you want a tooltip with the value of that property to appear when you hover the mouse above the link.  Also, setting the "alt" property to a description of the image for blind users is highly recommended.

Hope that helps!  :-)

by (180 points)
thank you so much, I'm new to code and this instatly solved my issue, after hours of struggling thank you again!
0 votes
by (159k points)

In standard HTML development to create a basic image based hyperlink you would wrap your img element within an anchor (a) element like so.

<a href="target URL"><img src="image URL"></a>

You can do the same in a Passage except in this particular case you would replace the anchor's href attribute with a SugarCube data-passage HTML Attribute referencing the Target Passage (in this example Next) like so

<a data-passage="Next"><img src="images/choices1.jpg" width="756" height="540" alt="blah blah" /></a>


by (180 points)
Thank you for the tip! I'm completely lost when it comes to coding of any sort, so thanks for commenting and helping me out in my struggle. I'll be sure to keepthis post bookmarked so I can come backto it for any reference in the future.