{"id":1008,"date":"2016-04-17T12:38:43","date_gmt":"2016-04-17T17:38:43","guid":{"rendered":"http:\/\/www.klcameron.com\/cdm\/?p=1008"},"modified":"2016-04-17T12:38:43","modified_gmt":"2016-04-17T17:38:43","slug":"twine-tutorial-3","status":"publish","type":"post","link":"https:\/\/www.klcameron.com\/cdm\/twine-tutorial-3\/","title":{"rendered":"Twine Tutorial"},"content":{"rendered":"<p>When I first launched Twine and started building a story, something that stuck out to me was the tag box on each passage.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/1.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1010\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/1.png?resize=536%2C593\" alt=\"1\" width=\"536\" height=\"593\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/1.png?w=536&amp;ssl=1 536w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/1.png?resize=271%2C300&amp;ssl=1 271w\" sizes=\"auto, (max-width: 536px) 100vw, 536px\" \/><\/a><\/p>\n<p>In the beginning I just ignored the box since I didn\u2019t know what it was for and didn\u2019t want to screw anything up. But eventually I got too curious and looked it up. It turns out that putting a tag on a passage doesn\u2019t do anything immediately. The biggest use of the tags is for CSS styling.<\/p>\n<p>My plan for my project was to have different background images on each passage based on what was happening in the story and where the player was in the desert. Tags turned out to be a really easy way to do this. When you want some CSS styling to apply only to a certain passage, you pick a tag for it (the only constraints being that it hasn\u2019t been used before and that it\u2019s one word). Then in the CSS you put: <em>body[data-tags~=\u201dTAG\u201d]<\/em> and then anything you put in that body will only apply to passages you tagged with \u201cTAG\u201d.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/2.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1009\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/2.png?resize=536%2C593\" alt=\"2\" width=\"536\" height=\"593\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/2.png?w=536&amp;ssl=1 536w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/2.png?resize=271%2C300&amp;ssl=1 271w\" sizes=\"auto, (max-width: 536px) 100vw, 536px\" \/><\/a><\/p>\n<p>The above is a sample from my project. In the code, I made it so that any passage tagged with \u201chighway\u201d would have a certain image as a background and that it would stretch in order to cover the whole page. You can do a lot more with the tag styling such as different fonts\/sizes, different link and list styles, etc., but the background image was the only thing I wanted to change from passage to passage.<\/p>\n<p>The only problem with this method of background images is that it takes a very long time for the code to compile and therefore loading times are long. Loading time problems combined with time constraints kept me from individualizing the backgrounds as planned.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I first launched Twine and started building a story, something that stuck out to me was the tag box on each passage. In the beginning I just ignored the box since I didn\u2019t know what it was for and didn\u2019t want to screw anything up. But eventually I got too curious and looked it [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[29],"class_list":["post-1008","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-twine-tutorial"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/comments?post=1008"}],"version-history":[{"count":1,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1008\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1008\/revisions\/1011"}],"wp:attachment":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/media?parent=1008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/categories?post=1008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/tags?post=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}