How to view images of my twine in an iPad?

Question

I am using sugarcube, and have a twine folder containing my images folder and html file. I download my images into the images folder and have linked them to my twine app. It works perfectly fine on the PC, but when I put the twine folder into dropbox and open it on my iPad and iPhone, I cannot view the images. Everything works fine, except the images that appear as an empty white box. It all works fine in the PC so it means I linked everything fine so I don't get why it won't work on iPad? Can it be due to it being opened on an iOS instead of an android? Or does the folders and files directory gets messed up within dropbox for some reason?

Answer 1

The story HTML file generated using Twine is a web-application and Dropbox is not a web-application hosting site, even though many people keep trying to use it as such.

For a web-hosted version of your story HTML file to be able to access externally stored media files (such as your images) using URL's similar to those used by a locally run version the external media files must be stored in such a way that they are accessible using Relative URLs.

When you share one or more uploaded files/folders on Dropbox, it creates a URL for each item shared and each of those URLs contains a unique key within it's path. To access those shared files from within your story HTML file you wound need to modify each of the external media references within it to contain those unique keys.

I suggest you look for a web-hosting site to host your web-application if you want your Readers to be able to access the story remotely.

Comments

Ok, didn't realise that! Thanks for the reply. So if I do upload the html file onto a website page, I will need to add the images onto the website. I will also need to change the image links within the html file to the URL link the images would be hosted on. Then the app will work on the iPad?

---

Just copy the entire folder to your hosting service, assuming that you're using relative links. For example: 

|-folder containing story 
|   |
|   |-yourstory.html
|   | 
|   |-images (folder)
|   |   |
|   |   |-someimage.jpg

Then, your image tags should look like: 

[img[images/someimage.jpg]

Then just pick up this whole folder structure and drop it in place. You may need to rename the html file to index.html or otherwise link to it from your main/entry web page. How exactly you do all this depends on the service you decide to use, but most hosting services that aren't just blogging platforms (i.e. Wordpress) should let you do this fairly easily. 

---

Ok thanks, I'll have to try this out. I am still in the process of finishing it before doing all of this. Can you make the folder into a phone app or is it only possible over website like wordpress?

---

Sorry, I meant dont use wordpress since its a struggle to get a self-designed website onto. Something like github pages will be better.

As far as phone apps, maybe? If you mean am actual app, it depends entirely on how you build it. It is possible with something like Apache Cordova.