Twine Pictures, GIFs, and Background Images

PICTURES AND ANIMATED GIFS

nyan

First of all, I do NOT recommend hotlinking (simply copying and pasting the URL from a stranger’s site), because they could delete or change the image at any time. I recommend posting your images on your own site or an image host (like Imgur or Photobucket). You can use <img src= > to add pictures and animated GIF files to your project. When adding this code, make sure that you only use one angle bracket on each side, not two. The web address of the file needs to go after the equals sign, like this:

<img src=http://www.ohiofi.com/img/catdance1.gif>

BACKGROUND IMAGES

purpleskyHere is how to change the background image when using Twine 2’s default Harlowe format. STEP ONE: click the menu in the bottom-left and then Edit Story Stylesheet. You will add the URLs of the background images that you would like to use and give each one a simple name, like “castle” or “harbor.” You can even set an animated GIF as a background.

.castle {
 background-image:url("http://ohiofi.com/img/The%20Castle%202.png");
 background-size:cover;
}
.harbor {
 background-image:url("http://ohiofi.com/img/The%20Harbor%202.png");
 background-size:cover;
}


STEP TWO: When you want the background image to change in a specific passage you will use the following code. In this example, I am changing the background to “castle.”

<script>$('body').removeClass().addClass('castle')</script>


That’s it… just two steps. The background will remain the same until you change it to a different background or you remove it. To remove a background, use this code:

<script>$('body').removeClass()</script>


mario

CONTINUE TO THE NEXT POST: Twine CSS

Comments are closed.