Need some help with file location stuff

Authoring Twine
1

Twine Version:
[also choose a Story Format tag above]
2.6

So I’m trying to insert my images in dialogue boxes (The macro I’m using for it is here: custom-macros-for-sugarcube-2/dialog-api-macro-set.md at master · ChapelR/custom-macros-for-sugarcube-2 · GitHub) Using a folder with images in my game folder. And for some reason no matter what I do the images don’t show up even though i followed the code right.

This is the code I used for file location (Sample Code) So my images appear when I press play/test.

This is my java script code:

if (document.location.href.toLowerCase().includes(“/temp/”) || document.location.href.toLowerCase().includes(“/private/”) || hasOwnProperty.call(window, “storyFormat”)) {

// Change this to the path where the HTML file is

// located if you want to run this from inside Twine.

setup.Path = "C:\\TrueFolder\\Twine\_index";  // Running inside Twine application

} else {

setup.Path = "";  // Running in a browser

}

setup.ImagePath = setup.Path + “images/”;

setup.SoundPath = setup.Path + “sounds/”;

This is my code in StoryInit:
<<set _imag = setup.ImagePath + “Mia.jpg”>>

<<set _imag2 = setup.ImagePath + “Jordan.jpg”>>

<<character ‘Mia’ ‘Mia.jpg’ _imag>>

<<character ‘Jordan’ ‘Jordan.jpg’ _imag2>>

Music file code that works completely fine:

<<set _bgm = setup.SoundPath + “ok (1).mp3”>>

<<cacheaudio “theme_bgm” _bgm>>

Files:

r/twinegames - Need some help with some file location stuff

(The twine file is named the same)

This is what it looks like ingame:

r/twinegames - Need some help with some file location stuff

Can someone PLEASE help me I’ve been struggling with this for a while now.

2

updated: Based on the further information supplied by the OP this post has been edited!

note: Most Operating Systems (OS), except for Windows, are letter case sensitive when it comes to folder & file names, so Twine & twine would be considered two different folders and Mia.jpg and mia.jpg would be considered two different files. As web-browsers need to support multiple Operating Systems the letter casing used in an URL has to be exactly the same as that of the folders & files on the hard-drive.

So just to be clear, on your local hard-drive you have created the following folder & file structure…

C:\TrueFolder\
	images\
		Mia.jpg
		Jordan.jpg
	sounds\
		ok (1).mp3
	index.html

…with the folders & files named exactly as above, including letter-casing?

If the above is true and you are using Windows as your Operating System then the "C:\\TrueFolder\\Twine\_index" value you are assigning to the setup.Path variable is the cause of your issue.

note: I will assume you are using Windows from the visuals in your Files image, and while its default file-path separator character is back-slash \ it also supports the forward-slash / when referencing a file in a URL. So I strongly suggest you use forward-slashes in your URLs, as it will reduce mistakes like the above.

Change the following line in your code…

setup.Path = "C:\\TrueFolder\\Twine\_index";

…to be…

setup.Path = "C:/TrueFolder/";

…and you should now be able to see the image while using the Twine 2.x application’s Test & Play options.

A couple of other suggestions:

1: Don’t use punctuation characters, other than a standard dash - or a standard underscore _, in you folder or file names.

Again most OS other than Windows require punctuation characters to be specially encoded when used in a URL.
eg. Your ok (1).mp3 file name would need to be the following if correctly encoded…

ok%20%281%29.mp3

For this reason web-developers generally don’t use punctuation characters in folder or file names. So you might want to remove the SPACE and Parentheses from both the ok (1).mp3 file on your hard-drive and the URL in your code…

<<set _bgm = setup.SoundPath + "ok.mp3">>

2: You appear to be using Chapel’s The Speech Box System, in which case the 2nd argument passed to its <<character>> macro should be the Name you want displayed (displayname) when that character says something.
eg. your character definitions…

<<character 'Mia' 'Mia.jpg' _imag>>
<<character 'Jordan' 'Jordan.jpg' _imag2>>

…should likely be…

<<character 'Mia' 'Mia' _imag>>
<<character 'Jordan' 'Jordan' _imag2>>
3 Likes
3

Do I add the file type for the html file?
Ex: “C:/TrueFolder/Twine/_index.html”

Cause i did the steps you asked and it still doesnt appear

4

This is the file location i have directly from my computer for the folder:
“C:\TrueFolder\index.html”

5

@jrezz0
I’m not familiar with SugarCube, but if I were in your shoes I’d do the following…

It’s always good to start with a single hard path right to the file you want to use when encountering pathing issues. From your file folder, drag one of your images into the browser or open it from the browser’s file menu. Now look at the path the browser is using for the image.

If the path doesn’t look any different than what you think is being used by Twine (meaning the error isn’t apparent yet), right-click on the broken image in your current game and choose “copy image link” or something to that effect and paste it in a text editor and compare this broken path with the good one that worked by directly opening the image. You can also right-click and choose “inspect” and view the src for the image as well.

There must be a significant difference between the two paths and that is where the problem most likely lies.

Good luck!

6

The folder structure Greyelf provided had _index as a folder. If you don’t have an _index folder then omit that folder name.

C:/TrueFolder/Twine/index.html.

1 Like
7

I have updated my earlier post so it is now based on the following new information you supplied…

1 Like