0 votes
asked by (200 points)

So I am not sure why this is rendering as a broken image. I am publishing the twine and viewing it in browser and it is in the browser (chrome) that the image link appears broken. The strange thing is when I inspect the page I can find the path to file so the link doesn't seem actually broken. I have the image file in a image folder in the projects folder and in a twine story images folder. I am using sugarcube 2 btw.

<<link [img[prototypesandwireframes/images/forward.png][wireframes]] >><</link>>

1 Answer

+1 vote
answered by (125k points)

The path of a Relative URL is relative to the folder that the HTML file is stored in, so if your folder & file structure is like the following.

C:\prototypesandwireframes\
	story.html
	images\
		forward.png

... then the Relative URL for the forward.png image file would be

images/forward.png

 

commented by (200 points)
Thanks that worked! I swore I tried that but maybe I had other stuff going on in my code before, I tried many different configurations, with html syntax and not. My only issue now is I am not sure how to style it. Do I select the img element tag in CSS to resize it?
commented by (20.6k points)

Changing the "img" tag in the CSS would affect all images, which I doubt is what you want to do.

To create a SugarCube link using HTML so that you can style it, you can do something like this:

<a data-passage="Passage Name" class="link-internal link-image">
	<img @src="setup.ImagePath+'Example.png'" style="position: relative; left: calc(50% - (168px / 2));">
</a>

Just change "Passage Name" to the name of the passage that you want it to go to when the user clicks that image.  You can set the style property on the image to have the browser display it the way you want it to.  This example horizontally centers an image which is 168 pixels wide.

The "@" in front of the "src" property (seen above) also lets you use variables in HTML properties (see "Attribute Directive" in the SugarCube documentation).  This way you can have "setup.ImagePath" set to "images/", and use that variable so that the browser can find the correct path to the images.  Just add the following code in your JavaScript section, and you'll be able to see images both inside Twine and in your published version using the above technique:

if (window.hasOwnProperty("storyFormat")) {
	setup.Path = "C:/prototypesandwireframes/";  // Running inside Twine application
} else { 
	setup.Path = "";  // Running in a browser
}
setup.ImagePath = setup.Path + "images/";

Note: There was a bugfix for attribute directives in SugarCube v2.23.5, so if you have an older version then you may want to download the latest version (currently v2.27.0) and install that.

Hope that helps!  :-)

commented by (200 points)

Sorry it took so long to get back I had to update sugarcube and I didn't know I could just point to the directory within the twine app. Ok so this is what I tried but an error popped up which said "Error: <img>: bad evaluation from attribute directive "@src": Invalid regular expression: missing /"

	<a data-passage="wireframes" class="link-internal link-image">
	<img @src="setup.ImagePath+/forward.png" style="height=50%; width=auto;">
</a>
commented by (20.6k points)

You forgot to put the filename inside single quotes.  It should be like this:

<img @src="setup.ImagePath+'forward.png'" style="height=50%; width=auto;">

That way it's adding that string to the end of the variable setup.ImagePath.

commented by (200 points)
Oh thanks that did the trick . I did not know that about the single quotes, its pretty easy to miss. I will probably use this trick for any image links in the future. This is a strange question thats off topic a little. How would I assign an image as a parameter of an object that is in an array?
commented by (20.6k points)

The simplest way is to just pass the filename.  For example:

<<set $someArray = [ { name: "apple" }, { name: "banana" }, { name: "carrot" } ]>>
<<set $someArray[0].picture = "apple.jpg">>
<<set $someArray[1].picture = "banana.jpg">>
<<set $someArray[2].picture = "carrot.jpg">>

You can display that later like this:

<img @src="setup.ImagePath+$someArray[0].picture" style="height=50%; width=auto;">

(No quotes needed this time, because neither are text strings, it's just two variables.)

Have fun!  :-)

...