How can i add images into a Twine project other than through webpage links

Authoring Twine
1

Harlowe Version: 3.3.7

I am curious on how I can add pictures to my Twine projects and the various forms on how I might be able to add images to my games.

I know I can add them through using webpage links however, I am wondering if there is any other way to add images in like through a file that contains images that the game can call up or any other ways out there. I have seen some projects that can do it but I could never figure it out for the life of me.

Any advice, explanations or tutorials would help me out alot.

2

When you say you ā€œcan add them though webpage linksā€, I assume you mean off the internet with an <img> tag.

For example, you can have <img src="https://fastly.picsum.photos/id/151/200/200.jpg?hmac=RsW3eUusYZr48IOrlSs9K5ryBvl6Gh_KtI0cyUSVDX4"> which will produceā€¦

However, you can also have relative linked images that are with your Harlowe HTML game file if you work locally on your PC or host your own game on a serverā€¦

 šŸ“ Harlowe Game 
  ā”œā”€ šŸ“„ Harlowe Game.html
  ā””ā”€ šŸ“ Images
      ā”œā”€ šŸ–¼ļø Cat.jpg
      ā””ā”€ šŸ–¼ļø Dog.png

ā€¦so <img src="images/cat.jpg"> will show the graphic as long as the Images folder is present in the same location as your Harlowe game HTML file. There is no need to have a long http-style web address link.

Lastly, there is a way to encode the image data directly into the src attribute of the <img> tag. Youā€™ll want to have a graphic on your computer and retrieve the Base64 data from it. This data can get quite large. Below is an encoded 32 x 32 Twine icon image.

ā€¦but the encoded image data in the <img> tag looks like thisā€¦

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQbSURBVEhLtVZPbxtFFH9v7F0nsq20KW1pKoWUUlUglBzSRAEufAEEp4qPwEeAGxfOnLgiod75AJzpsXBCoAJBtGlR0jTIsR3buzvzeH9m7bWdSIlEf3qeefN2/PvNezOzNu7s7MCrBG5vb0f3/wYiEhFubW3FAABhLW+tqYvaTgH9MDnZi4NzAzc3N6OH6JP23gff2jBqRCHpGp3frj/6AtGxL0uzBZatBWVuCXvk+GMIDO44KuaiA2xOWzWdZRNnWnOqsIizZwaOoR+pDUtnYhAynXI2gHwdfApxqMCNjY2YEkBI2/vvfxMHk22ItUo7j6/89CWAlMhADecv1f1raf5WI7/Z8MtJaNWwoKuf/wX1OAfX19ejywJJ68V7X8fBRIAhfnL8x/LPX7EAs2S3F7J3mvmtBX8t8Ut1VoLUUYpsrudXPvkFkrgrUyUKwWMxnDfwamGUraTdj5b//exG9/7V4b1WcSMNi5YQb2/cYe7GhZwXCMB0YqNIqoZ+AEuH2YfPup9eH73bDC1HjlcnKyw5o4KNI5di6hRxw1y6wwMs2HT5STe8vevv/QqXOyQHjxE5pddRJI7QKQoRUBmBBXT5AzVe+4CWjsL6bnj9EKiA4MsVcx+9cWOS6nGJYo144iQDBQsotbFfPvJ3n9HCAEPOAkQ+Lk6pRCTqmG5kZzCPTWScugeSAbU64fYBuAyYPRTgNQPjlC9KZ2TGqa2CJhkwZi6aj/VJe+HWSyBjVwGyJOT7Rlw6CvPjg7jJvApup0rEY8gHEE7CSgfciEIGvqLB8pMMmEccYVReQUF4XLiDkZXINHBtzV6fAqql2Z37dMWHOyNoECUEKUEC3LKPeOJGT4gvFF+rhraJw37h/h64p2qHOQw9joI7yMbXFFdXV6PLqPOl/zjczWk5MC9V2CEFdAPM9lhALm3ian/26z8eud0+drmAkWAetXa7rRlrsujCtTdoJScswHkzwqBOAMjB96AG+CJLvntS/+EAnw94yfb1KoSqdERAhDQEWAtv3qT2hL00fmeLAIY+/t6rP3iK+8NK7Wdh1OZMH1PenJRvgOwt+dxMDqg4hZyxfwa1759Tj9/bp4DpoldCBPhTAQswtbCX54cPT9n6Ah++pOOsco2mYIxVcGT6mPKnJplJ+haKZPxbQtDL4XFXhxfA9EXjO1gSl9CxafYL6udx6rkxUyJD5QrFgQQh52zOqM7ZmNtk3fqIslgSUkdmXBCSAXfKV8VYxhyTYv3Zmad9NwatlQxsIIgLVT4rkTmWiUiUM0vMRxgWtHbmbRoozykvKCttVLHMx3kXAbZaLV2jgv+gXWrKe4od/jFnE18dh5AVsH8SZ54b2Gw2ueN0bDyG/fEzh1v2q/8P7alFqkEbMizCwMXFRfNeCQD+AxAffKbBN5X+AAAAAElFTkSuQmCC">

The way I did this is I made the PNG file and saved it. I then opened it up in Notepad++ and selected all the strange computer data and converted it to Base64 text. Then I copied it all and pasted it in the middle of <img src="data:image/png;base64,[PASTE HERE]">. This will work for all image files that are compatible for browser display. However, you have to change the data:image/png part to jpg, gif, or whatever the file type is.

There are probably web sites that will automatically convert any image you drag on to it for you, but what you want is Base64 encoding. You can even store font files for use in HTML pages in this manner.

You might have noticed that I made a diagram of a folder structure with little images. Those pictures are actually symbols that are included in all computer devices using Unicode. I like to use this site to copy symbols to the clipboard and put into my Twine games. Thereā€™s a lot to look through.

:fish: :octopus: :shell: :tropical_fish: :whale::shrimp: :dolphin: :squid:

I should also mention that some fonts will show the images in a different style, but a squid will always be a squid and so on.

Another weird way to get an image into your webpage is with ASCII art. There are lots of resources online for this sort of thing, but essentially it only works with monotype fonts (same width for all characters) so a grid of sorts is established and each cell in the grid is a different ASCII character. The simplest way to achieve monotype display in HTML is to use the <pre> tagā€¦

       \:.             .:/
        \``._________.''/ 
         \             / 
 .--.--, / .':.   .':. \
/__:  /  | '::' . '::' |
   / /   |`.   ._.   .'|
  / /    |.'         '.|
 /___-_-,|.\  \   /  /.|
      // |''\.;   ;,/ '|
      `==|:=         =:|
         `.          .'
l42        :-._____.-:
          `''       `''

Credit: Lunatic 42

ā€¦itā€™s really old school, but has a certain charm.

Browsers also support a vector graphic language call SVG. You can link to an external SVG file or you can embed the SVG with itā€™s own custom HTML tag structure. InkScape is a really good SVG art program.

Here is the raw code for the Twine logoā€¦

<svg width="175" height="200" viewBox="0 0 7 8"> \
	<defs> \
        <linearGradient id="gradientBlue" x1="0" x2="0" y1="0" y2="1"> \
        	<stop offset="0" stop-color="#127aee"/> \
        	<stop offset="1" stop-color="#117aef" stop-opacity=".25"/> \
        </linearGradient> \
        <linearGradient id="gradientGreen" x1="0" x2="1" y1="0" y2="0"> \
        	<stop offset="0" stop-color="#10f05e" stop-opacity=".25"/> \
        	<stop offset="1" stop-color="#10f05e"/> \
        </linearGradient> \
    </defs> \
    <path fill="url(#gradientBlue)" d="M 0,0 3,0 3,8 0,8 Z"/> \
    <path fill="url(#gradientGreen)" d="M 0,6.5 C 0,1 7,1 7,1 V 4 C 7,4 3,4 3,6.5 V 8 H 0 Z"/> \
</svg>

ā€¦just paste that into your passage code in Twine and youā€™ll see the Twine logo generated from it.

I should also mention that SVG stands for scalable vector graphics. Scalable is the main keyword, meaning that I can set the width and height to any size I want and the image will redraw itself as smooth as can be. I can make it 1750 x 2000 pixels and you will not see a big, blocky pixels. Itā€™s geometry based; not pixel based like a PNG file is.

So thatā€™s about all the ways I can think of for including images in your Twine games. Not sure what resonates with you. Perhaps there are other methods that Iā€™m not aware of and others will chime in.

Let us know if you have any other questions.

4 Likes
3

Well iā€™ll be damned! That is alotta info and that helped me out alot. I didnā€™t even think of trying with ASCII but that is pretty awesome that it can be used as well. Thanks for the help and the ton of info! i appreciate it!

1 Like