Changing Background Images outside of Tags (solved!)

Authoring Twine
1

Hi there,

I’m using Harlowe 2.1.0, and I’m trying to find a way to change my background image without tags.

My issue:

I have passages with two div classes, one for day and one for night. If I set the passage tags to day or night, the background will appear one way for both div classes. Is there a way to either: add a passage tag within the confines of a div class or: change the background with a command within a div class.

This would all need to be done in game. IE, the game is checking if it’s night or day, then it displays one chunk of text or the other.

I’ve tried just about everything I can think of, but I’ve seen people saying tags are read only, so you can’t add or edit them in game. Is this impossible?

Thanks,

  • W
2

To answer your question: no, you can’t easily change passage tags in Harlowe. It isn’t designed for that functionality.

What you are asking about isn’t impossible, but it is probably more complicated than you expected. Let’s look at some examples of how to approach this.

(1) Working with (enchant:)

In Harlowe 2, there is a hook called ?Passage that can be used with the macro (enchant:) to affect the content of a passage.

Using the tags, day and night, then, the macro (passage:) can be used as part of a header passage (which will be run before any current passage) to test for these.

:: StoryTitle
Harlowe Tags

:: Start[day]
Day
[[Night Example]] 

:: Night Example[night]
Night

:: Header[header]
{

	(if: (passage: )'s tags contains "day")[
		(enchant: ?Passage, (background: yellow) )
	]
	(if: (passage: )'s tags contains "night")[
		(enchant: ?Passage, (background: grey) )
	]

}

(The above example is written in Twee.)

The background color of the content of each passage would then change based on if the current passage had the tag day or night. (Using the keyword contains also opens up the ability to use other tags, or even test for them and change other things.)

(2) Working with (enchant:) and (css:)

In Harlowe 2, the hook ?Page should be able to be used on the whole page to change its appearance. However, this has some issues because of how different elements use CSS internally. Instead, a combination of ?Passage and the use of the (css:) macro can be used to override the base CSS.

{

	(if: (passage: )'s tags contains "day")[
		(enchant: ?Passage, (css: "background-color: yellow; position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 2em;") )
	]
	(if: (passage: )'s tags contains "night")[
		(enchant: ?Passage, (css: "background-color: grey; position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 2em;") )
	]

}

This solution is more extreme than the first because it effectively visually overwrites the sidebar and makes the ‘passage’ the same size as the story itself. However, it can be used to make a cleaner visual change between the ‘day’ and ‘night’ cycle you asked about.

3

Hello!

Thanks for your reply. I know I’ve watched many of your videos over the past couple years.

I had some trouble implementing what you suggested above, because I’m trying to change the background of my story, which is behind my passage’s background, essentially.

I did managed to solve the issue using Javascript, however.

I placed the following in my story JS:

window.changeTimeOfDayTag = function (tag) {
var twStory = document.querySelector(‘tw-story’);
var oldTags = twStory.getAttribute(‘tags’) || ‘’;
var cleanTags = oldTags.replace(/\s*(normal|dark)\s*/g, ’ ').trim();
var newTags = cleanTags + ’ ’ + tag;
twStory.setAttribute(‘tags’, newTags.trim());
};

and then in my passages

(if: $time is 0)< script >changeTimeOfDayTag(‘normal’);< /script >[< script >changeTimeOfDayTag(‘dark’);< /script >]

(there are spaces before and after script so it prints properly on this forum)

By setting the time variable i’m able to change my story background and keep my passage background as is.

I’ve marked the thread as solved, but will delete if necessary!

4

That’s a good solution!

I tried it solve it within the bounds of not using JavaScript in Harlowe, but if that works for you, it’s a valid solution!