Help with using images (RESOLVED)

Authoring Twine
,
1

Twine version: 2
Story Format: Sugarcube 2.36.1
I’m currently trying to upload an image for the game I’m making, and I wanted to use an image of an axe for the axe item in the inventory and combat systems I’ve worked out, and my friend even made the pixel art for me, but I can’t seem to get the images to work, I’ve tried hosting it and whatever the other one is. But neither is working, I understand most of Sugarcube and Harlowe, and I know how to resize the images insode and outside of twine, as well as compress the urls, but I can’t get the images to show up right, all I get is this weird symbol.

image
image1366×768 13.2 KB

Running combat simulations and implementing my own built in save system? easy. showing an image? not so much. I’d appreciate any advise, thanks.

This has been resolved, the comment from P.B. Parjeter was what I needed.

<img src="https://drive.google.com/file/d/1tPKs9PXrDi-sqmOTttHwAq-UQD_FdzVO/view?usp=sharing">

Hosting the file online attempt   \/

<img src="file:///home/chronos/u-0ac8ea9ad4f460a66d3dea7d9660501a800ef6b0/MyFiles/Downloads/Outlined%20Medieval%20Felling%20Axe-min%20(1).png">
1 Like
2

In your first attempt, Google Drive will not allow hotlinking, at least not as far as I know

In your second attempt, you’re trying to link to a file on your hard drive. It looks like you formatted it correctly…just not in the preview function. If you go to the ▴ menu and click “Publish to file” the image should work.

<img src="file:///home/chronos/u-0ac8ea9ad4f460a66d3dea7d9660501a800ef6b0/MyFiles/Downloads/Outlined%20Medieval%20Felling%20Axe-min%20(1).png">

However, the image won’t work once you upload your Twine story to the Internet. So you should instead use a relative link like this, omitting everything before the final slash.

<img src="Outlined%20Medieval%20Felling%20Axe-min%20(1).png">

You should set up a folder with all of the contents together

index.html
Outlined%20Medieval%20Felling%20Axe-min%20(1).png

None of this very convenient and you might want to switch to Twine 1, which has image importing under the menu Story > Import image. You can still use the latest version of Sugarcube with Twine 1.

1 Like
3

I am not that familiar with sugarcube (I usually use Chapbook) but can’t you use Base64 image coding in a passage, then insert that passage where you want it? If you don’t mind the size bloat that happens, it has a big advantage, i.e. the game is self-contained without other files or folders (or outside sources) being necessary.

John

2 Likes
4

Yes, to expand on that:

Create a passage titled “image1” . Convert your image to base64 here and get the <img src="..."> code, paste it in that passage.

Then in another passage, where you want the image to appear, write:

<<include "image1">>

2 Likes
5

This worked! but instead of base64 I had to use html, and that website link was perfect! thanks a ton! You saved me on that one! Now I just need to resize it…

Screenshot 2022-05-15 8.05.51 PM
Screenshot 2022-05-15 8.05.51 PM1366×768 17.7 KB

1 Like
6

In between <img src=... you can put height and/or width, eg.

<img height="100px" width="400px" src=...

or

<img width="100%" src=...

2 Likes
7

I don’t even know what to say, your just amazing, unless your against it I’m putting your profile name in the credits (one day, when my game is more than just 36 passages, AND I figure out how to upload it to itch.io) under “tech support”. It’s people like you that make learning how to do new things easier by sharing your wisdom. Thank you

well, time to write some combat calculations, (and don’t help me, this is an undertaking I wish to solve on my own, so I can grow further)