Is there an easy way to include an image URL (with classes and styles) in a variable for display?

Question

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.

Answer 1

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.

Comments

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!