+1 vote
by (1.1k points)
retagged by

I have a bunch of images on imgur which I am using for npc images. The image url is stored in the datamap for the npc. Which npc is encountered is randomly generated, so the url in the passage will change with the npc. I had all sorts of trouble with it, since harlowe didn't seem to want to parse the variables in <img> tags

What I ended up doing was a bit of a mess:

(set: $pooURL to ($pooForToday's url)) <!-- things broke without the ()s -->
(set: $pooALT to ($pooForToday's sdesc))<!-- sdesc is a short description, often with spaces-->
(set: $pooimgStyle to `style="max-width:72px;float:left"`)
(set: $pooimgClass to `class="w3-circle w3-image"`)
(set: $pooImageURL to "init")
(set: $pooImageURL to "<img src=")
(set: $pooImageURL to it + $pooURL)
(set: $pooImageURL to it + " " + $pooimgClass + " ")
(set: $pooImageURL to it + "alt=" + $pooALT + " ")
(set: $pooImageURL to it + " " + $pooimgStyle + " >")

which resulted in
$pooImageURL working as normal in the passage with a cute image next to the text.

Is there a better way to do this?

Presumably, it'll be easier if I package the files up with the game file, but I've yet to unlock that achievement.

1 Answer

+1 vote
by (63.1k points)
selected by
 
Best answer

An easier way would probably be to use a function.  Try putting something like this in your JavaScript:

if (typeof window.customScripts == 'undefined') {
	window.customScripts = {};
	window.customScripts.createImg = function (source, imgClass, imgID, imgAlt, location) {
		var $buildImage = $(document.createElement('img'));
		
		$buildImage
			.attr({
				id    : imgID,
				src   : source,
				class : imgClass,
				alt   : imgAlt
			})
			.appendTo(location);
		
	}
}
		

Then, in passage:

<span class='imgWrapper'></span> <!-- the image will be placed in this span -->

<script>customScripts.createImg('http://url/to/image.jpg', 'imageClass', 'imgID', 'alt-text', '.imgWrapper')</script>

You can pass variables to the function as well:

(set: $url to 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQysBzwvD-cJTJWFhUDyfvQ-YvKX5gHFw8_IXSujo9DGG9RrrmJ')

<span class='imgWrapper'></span>

(print: "<script>customScripts.createImg('" + $url + "', 'imageClass', 'imgID', 'alt-text', '.imgWrapper')</script>")
<!-- note all the quotes around the variables -->

Move all your styling into your stylesheet if you use this function--though even if you decide not to use this function or something like it, you should still put the style rules in your stylesheet instead of having them gum up your HTML.

by (1.1k points)
Well, at least it was more complicated than something like "just use three grave marks." (:

I'll have to try out the java script (once I grok it), seems a lot more useful in the long run!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...