I know this might be a bad thing to ask, but Im wanting to try and learn to code HTML, and I wanted to do something with the image files similar to how they are in this game, but I cant open the game in Twine to see how it was done. Do you mind sharing how you did it?
I'm not going to go through and explain everything the game does, because that'd be a pain in the ass, but I can walk through the images. Also keep in mind that a lot of this is just code I got from using Google, so I'd highly recommend doing research that way if you genuinely want to learn how to put something together (and you'll likely find even better ways than what I do). With that out of the way, here's what I do in Twine 1.4 (not Twine 2.0, I don't know anything about how that works):
In the Stylesheet, I replace whatever original story/passage stuff there was with this:
Code:
#story {
max-width: 900px;
}
.passage {
text-align: left;
}
.passage a {
text-align: left;
}
.passage a:hover {
}
a {
}
Then whenever I have a passage, I make sure that the Images/Clips are
EXACTLY 400 pixels in width (the height doesn't matter) and then put them at the top of the passage like this:
Code:
<div class='img-container1'><img src= "images\folder_the_picture_is_in\name_of_picture_i_want.jpg" /><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /></div>\
The reason there's a bunch of "filler.png" in there is because I tend to write a lot so if I didn't, the text would eventually align back under the picture instead of continuing down in a column. So I put a .png image of the background ("filler") several times beneath any images I'm using to give myself more room to continue writing text.
Including clips works the exact same way, but with a minor alteration:
Code:
<div class='img-container1'><video loop autoplay src="images\folder_the_clip_is_in\name_of_clip.mp4"><source src="images\folder_the_clip_is_in\name_of_clip.mp4"/></video><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /><img src= "images\folder_name_of_filler_image\filler.png" /></div>\
I use .mp4 clips so that's how it works, but if you use something else it might require a different setup, I honestly can't remember how I did actual gifs with the original release.