Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Twine 2.0 and pictures

In twine 1.x it was possible to add pictures without the need to link them to a url. Twine  would add them to the html file and there was no need to resort to links. Im kinda missing the same functionality in twine 2.0 So far im liking twine 2.0 better than 1.x and i would like to learn more about it - but i also wat to add pictures without external sources.

It is possible? Am i missing something?

Comments

  • Hello!

    This embedding-in-HTML-directly is called Base64 encoding, and if you search the forum, you'll find that unfortunately, there isn't yet an automated way in Twine 2.x to handle images. If you look at the Twine 2.x issue queue, you'll see there's been some discussion but it's not yet on the roadmap for 2.1 or anything.

    Obviously, that you've seen it done in Twine 1.x should be good evidence that it's possible, but for now, you'll have to do it manually in Twine 2.x.

    I searched Google for "Base64 image encoder"--they all pretty much work the same way, so I was just looking for one that looked nice. I found this: http://www.freeformatter.com/base64-encoder.html

    It's even got some help text at the bottom to tell you how to make use of the Base64-encoded string. (Remember to specify in your IMG tag what format the image is in. If your uploaded filename ends in JPG or JPEG, you'll want to use 'jpeg' in the SRC string in your HTML code.)

    As you can see from the help text, Base64 encoding isn't limited to images, and while this page doesn't mention it directly, it IS possible to Base64-encode audio as well!

    Here's an example of image encoding. If you copy this code exactly into your Twine 2.x game, you should see the Twinery forum logo when you run your game.
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOoAAABLCAYAAAB+1BsFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTdFNTY1MzA1REQ0MTFFMzlGNzVFMUJBQkRDMTVFMTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTdFNTY1MzE1REQ0MTFFMzlGNzVFMUJBQkRDMTVFMTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBN0U1NjUyRTVERDQxMUUzOUY3NUUxQkFCREMxNUUxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBN0U1NjUyRjVERDQxMUUzOUY3NUUxQkFCREMxNUUxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq0pw2oAAArUSURBVHja7J3Pb9vmGcdfUrLjOIEjJ16cpB1sDx4ytB3qDDvsMCD2bbeof8DW+B8YkksxYIfEl2E7xcGwHRdn983uYd1OiwLsMHRrqxVN2q1oqwQF0hVL7GJZ08QW3z0v34fUq9eUSEqkfljfL/CYEi1SFMmPvs/78nkpR0opIAgabLnYBRAEUCEIAqgQBFAhCAKoEAQlVTHuBSd+uu0lXJfTyQY8+tlxp587AL3e0IEAlbQbA2Ia0BzscgjKB9S9FNA5gBOCBgPUpOBl4cAQBGWQ+nbroIAWgjICtZ6DgwJQCMrJUeGgEDREbVQ4KAQNAajdOmju0JZ2flSiySLFHMUZiuc5ZilOUMyol1GMUxzCaQAdpNQ3DXQ9cVACUlVWLVC8SPESxVkGVMFY4M9nTu2AoAMDaj3F+nK9tkpgqu39FsV3OdTjowAQAqjxnUlpwHM6gFOlqd+j+A7FkgFmEVBCALV1GzV3ByU4p2nyfY5FwymLOGQQQE0OaubVSQSnAvEcxQrFt3nbACYEifyK8hM7KAF6hCbnKZYpjvM24XIOBKUEtdvOpOj5E18W5eJ76hLJGsXhg+yejuOotvWFDFb1D4otnLaDo14Nk0zbmdR9G3TsWYEAnRZz/yqJQl1dXhk/yAeSIC3TZDPDVa5SbAAROGqSNmoH0EpHzn04JRbvzIixpwXhevRVJL0R2MevZry+OZy2ADUpqOmqk6a2x+ULb82KqUeHCVCaQ4A60qUYhdsrlDJcV43iJk5bgBqX+qasTpJCfuODabHwwYxwKc11hOfPd6T6n9TTkdNVatesGakxzkIoM0dNX9976KuCfOnN06L0nyPC8aR2UU9DqgM3VoOgHFPf+J7d0sMJ+eLfnhOHnoz5LuqE7unyVL92NB0VgnrWRm0N7uynR+XZ6nOisMeprgxSXZfbptZjCIK6BpWsMHln0pnaMfnNd08J1yMIhQxTXMdvl9Jz/z7C/mPHT30BKgRl5ajJivK//lFJLtw9yU7Jaa1spLh+eOFj6b8GFUgQlGXq2x6oU/en5ML7MwRgPbzsoqfaSQW7qlBXY8LOJIEOpVw1T6GKLdR11yVjfk3oCqcKRbXDdS/zsjsR76fKQUv8Ppet1wj+31LE8t2+f5TavVfJ2N55nrfDr309wb7xl3cc52Vj/4bLSymr/QC1dep7/PNJuXhnVl9uEdpNfa/0GFaPofS0fwadSsJvvwKn7KVOmmt8MsepyjBVUsD/Dp+k6qQ8x0BeobjaYpnVBMsnlVruFn9GtfxKG6BavVeJ98/FFsuV+bNUeN9UI7ZBfd5L7ZYngNVyq1kB6yYE1Y5dPya+FOJsldqkdU+7qVfnqeeDqB3W4+unHqfFHJ6eQlnqCp+cyymgVif+pkhWmDFvvC5wpHaQ1hIsn/ZLaMlYvl39dDnivdSyn7SB1HbtW1Y2Ms/zLiXc1ne4hLRnbdT9qa/rueKFt07L4q5KaetGuivCyzFhGszuKqRopMOiAFAz1Y2IE1CBct1yBXWyvWrBXOb5KynT0Zet96yyE6l13BPxNcnHctwf9rrnGLIAXrVtt60vkwv8eUqWgy/w81tGmrzFKXK75f3jotyVnLWWN6jR11EX3j8pJ/87ZrRLBbdHrZRXOgyoCJ+r/7teHW3UTJ3UhlSlbestXr/BcN4wTqolfv5Kive9aHwhrKZIofuhAKAqb2tUSlrhL7ZNy7mv8XTeXt4aPVMhKNcsJw5S5dVepb51jj0xtV2Up+6XGFIjCD43SH+lkfoq5zTSXl2ML8VoNlJV+0UGYeyHJHGtRYp1NaJduB6zHVsRDlpOmBaaCtp/lQHf70EH10pMR1EtAqoyR+zyBO5OxH69SMe61CtQdbvUkXti8b2TwjXAcxnQ4IQK2qV+W9V+TVM7tS6gNLrUwk1tt9xIuD51wq3FrC9Ol0Xnvbe91mrCba2K5nG/AWRrSZZnWDci2rw97Ew6dX9Sp7zKOb09hi0AkjuUOJqgZBdt6lDK1VHV9v6T4g8Uv6J4jeKHFD8Q+g6Gqs0yO2SgViI6Z8oR4KTRutXOmk/RyVMTwzM2tpbS9W93+VlvR7Tne9SZ5FK78/mPT3BpoPArjbRbSr/9qaYuVyAFbdbgf42CB9dor2Z5IO5TvE1xh+Jdio93Sr+Nd2zZ81Fj6mDfzAjUcsS6O3G361ZafUEku5NERQyP0t4Zo9rlZ800y0jXmXSmNi0nnhT4MozkSywFLmIwIFRAKkC5Z1c3xZoBdbpuoiqH/jvFXyj+SlA+GJZvdkqNwoPe5TC38zHf4p1+ASRN02pDBGq34PT1s6YB1aG0d5rT2sAp3dAl9YDw4FJM41KNP2LGE5GQOh1dnVHO+YbqWSM4t0e8zTqf0clUjVkv1GclB1VVIE0+LnJPrmwKfVsVA0AjGqmvFV7a1Pcuxe8p3iRAUdKktZRhKlqzAF0estQWoPp/T9+b0oUNoZtK4zEBKXW664auGoBr1vYakPqjaJJY6qeqTUdwvo3DlXtnC5x0iEHdJbBcUXp4xBgZ0wyjbpM2O6Xrd/JKv4KpyUGbYG33kxTqxb9TLkqQ7uJQ9dydd7BLhs1Rv/bgqCzuKvj2NHheIYQxdNWgjRqZArN7BsvE9vo+pvglAXoXhyi2E2g5o3S1FNNuhQYe1JkHR7in13TMRtrbAFAaTmqkxzKYZ8MbRarqIPoFQfoZDk+idNV2xU5AXQakg60kBQ+7Ymp7QlcW1XV5YFBlFJQM6rLBRnmg61kjZIzHjvW4WV9Q/ByQJpZ9OabTu/FfiHDqQdR5gNpKY8+kPPy/sbCe14Q0DKMqKaj1NeFVYLoRkOrhcIHU418TpP8Gf4m1ZbUllzvoEFIp70Vr3usD+nnLALWVjn9eFIW6dtN9TmrU8fowesHz5vreEFqv3XjUNwjSj8BeKu2I/RU3N1Ku44rVPq3k6KiViFQ9TXq+BFBb6djD8QaY9T2d/nqNonoT3CYYw7RX6hudtU19H1L8Edx1pMsRrpoUVuWkdqH/Wg+yANMhk2QA6otkc5QPcjyok48LDGfdd0oROGXgsPX6Pgd16g1ow7ZtC1fV+hO56R6Y69hVVyMAbHfXhmCMpA301R60T69bzzdjYFVfPJ+IxljSkVR8r+/Ek+ZfWwuqkZoLdWU4aNx/LGTDSY15GlKnUdXkr+Op0DW7UHcutWqBF4yh3BL77/BQjoB4owduGqS/G0a7OLg9ir2dJSvdDYbkbQLUCMmxp3n/LOJdctNnB3gfV0Xz5Y8vcnqfDXbXGxaE5ZhOmB0GYL2D97zXRbpu3zOp3XaqfbiSso16L6Nt7fS4ZVowEp/6FuqFnE/kDw/4l+F1I50M3CRPZ13gFLaW4ERS23IuBaRV67N0+qPK6r1fYWDbbWeNM4VzvIy5/9TjmzH7opttNZdJfdz47oPrxufoajylE/eLydN//s2PRfHZuD+cTUGrygl1WaDrz3PVPH/0jP6fP89TNzKjqT+6Rs/TI20Kjcc8PfHZT/rZ2yv7/MuPOf+aW3DXvjnLGapisK6VLnHWcczYxsowtEkH5xfH878B2aNRblzmfKCrQ9IBMyzb2TfFQ6juJpivvsJhgKBuQYUgCKBCEARQIQigQhAEUCEIAqgQBFAhCAKoEARQIQgCqBAEAVQIAqgQBPVDTr+HeUEQBEeFIIAKQRBAhSAIoELQ8Oj/AgwAH2YhpOo5isMAAAAASUVORK5CYII="/>
  • Thanks for posting the info on Base64 encoding. That's an interesting approach. Tried it out and it works real well. One thing I was surprised at: I thought maybe the compiled Twine story file size might be smaller since it is all "text," so to speak, but actually it seems about the same size as having the regular image.
  • Because it uses a restricted character set (a subset of 7-bit clean US-ASCII), Base64 encoded data tends to be approximately 33% larger than the original binary.
  • Thanks nicolem. I'm very new to any sort of code, but this was clear enough for me to upskill and use in my current project. I just wanted to embed a simple map graphic into my story and your explanation and links helped me out.
Sign In or Register to comment.