Using Different Background Images

lucrativesequel

Hey folks! I searched the forum for backgrounds but couldn't locate anything to shed light on my particular problem:

I want to assign a different background picture to various passages, ie locations, etc. I can do one background image just fine, and I tried adjusting the script for different colors to display images, but I keep getting an illegal error when I try to preview the story.

I tried this code in the stylesheet:

html.image1 {
background: url("http://imgur.com/image1.jpg" no-repeat center center fixed;
background-size: cover;
}

html.image2 {
background: url("http://imgur.com/image2.jpg" no-repeat center center fixed;
background-size: cover;
}

html.image3 {
background: url("http://imgur.com/image3.jpg" no-repeat center center fixed;
background-size: cover;
}

And this is what I tried in the passages:

{
(print: "<script>$('html').removeClass(\)</script>")
(if: (image1:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (image1:)'s tags.join(' ') + "'\)</script>")
]
}

I'm at a loss at this point of what I'm doing wrong, so any help will be appreciated. I'm using Twine 2 and Sugarcube 2.7.2.

storymasterq

Call me crazy, but those macros look like Harlowe's macros. You're using Sugarcube, didn't you say?

Also, I think you're supposed to supply the Passage name to the if tag's length conditional, instead of the class name, so that if the Passage has image1 as a tag, it will add the image1 class.

Claretta

It looks like you've copied over someone else's Harlowe code. The Sugarcube <<addclass>> and <<removeclass>> macros do it easily.

<<addclass "html" "image1">>

Will add an image. If you then want to swap out image1 for 2, you'd write in the next passage:

<<removeclass "html" "image1">>
<<addclass "html" "image2">>



Alternatively you could just try adding "image1" "image2" or "image3" to the passage tags.

TheMadExile

lucrativesequel wrote: »

I want to assign a different background picture to various passages, ie locations, etc. I can do one background image just fine, and I tried adjusting the script for different colors to display images, but I keep getting an illegal error when I try to preview the story.

As noted by Claretta, you could either use the <<addclass>>/<<removeclass>> within your passages or use passage tags.

lucrativesequel wrote: »

I tried this code in the stylesheet:

[…]

And this is what I tried in the passages:

{
(print: "<script>$('html').removeClass(\)</script>")
(if: (image1:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (image1:)'s tags.join(' ') + "'\)</script>")
]
}

I'm at a loss at this point of what I'm doing wrong, so any help will be appreciated. I'm using Twine 2 and Sugarcube 2.7.2.

Also as noted by Claretta, that's Harlowe markup, not SugarCube (v2).

Beyond that, I do not recommend sloppily clearing all classes on the document element—i.e. html—as SugarCube uses it for signaling and styling. If you're going to use html, then you need to be specific about which classes you're removing—you may remove all of your classes each time you do this, but you should be removing your classes only. For example:

<<silently>>
<<removeclass "html" "image1 image2 image3 image4 image5">>
<<addclass "html" "image1">>
<</silently>>\
Blah blah blah.

As you can see, the <<removeclass>> starts to get unwieldy—though there are ways around that.

That said, SugarCube sets the body element aside for authors specifically for things like this. Each turn, SugarCube resets all classes on the body element and then adds classes to it based on the tags of the incoming passage. For example, tag each passage where you want a background with the appropriate tag—i.e. city1, forest1, forest2—then do something like the following in your Story Stylesheet:

body.city1 {
	background: url("…/city1.jpg") no-repeat center center fixed;
	background-size: cover;
}
body.forest1 {
	background: url("…/forest1.jpg") no-repeat center center fixed;
	background-size: cover;
}
body.forest2 {
	background: url("…/forest2.jpg") no-repeat center center fixed;
	background-size: cover;
}

lucrativesequel

Looks like I was complicating the heck out of this with my newb-ness. Thank you all so much for taking the time to help me! It's working perfectly now and so much easier now that I know I got my macros messed up.