How do I have the picture on the left side of a colored box that has a name and text.

Question

This was super helpfull but I reliazed that I asked for the photo to be on the right instead of the left can you or someone else explain how to have the photo on the left. Besides that what I got is perfect.

Example of what I'm aiming for. https://ibb.co/fAJk5U

Answer 1

Please use the Question Tags to state the name and full version number of the Story Format you are using, as answers can vary based on this information.

Which side the image appears on is based on the order that the HTML elements are appended to the $message variable in the <<message>> macro's code, simply moving the the appending of the $text related structure like so...

/*
	<<message actorName actorFace>>actor text<</dialogue>>

	Arguments:
		actorName: The name of the actor who's talking. (eg. "Jane")
		actorFace: The name of the image to display. (eg. "images/jane-face.jpg")

	Example:
		<<message "Jane" "images/jane-face.jpg">>Hi, my name is Jane.<</message>>
*/
Macro.add('message', {
	skipArgs : false,
	tags     : null,
	handler  : function () {
		if (this.args.length < 1) {
			return this.error('no actor name argument.');
		}
		if (this.args.length < 2) {
			return this.error('no actor face argument.');
		}

		// Ensure that the actor name argument is a string.
		if (typeof this.args[0] !== 'string') {
			return this.error('actor name argument is not a String');
		}

		// Ensure that the actor face argument is a string.
		if (typeof this.args[1] !== 'string') {
			return this.error('actor face argument is not a String');
		}

		const actorName = this.args[0].trim();
		const imageName = this.args[1].trim();
		const $message  = jQuery(document.createElement('div'));
		const $text     = jQuery(document.createElement('div'));

		jQuery(document.createElement('span'))
			.addClass('actor-name')
			.wiki(actorName)
			.appendTo($text);

		jQuery(document.createElement('p'))
			.addClass('actor-text')
			.wiki(this.payload[0].contents)
			.appendTo($text);

		jQuery(document.createElement('img'))
			.addClass('actor-face')
			.attr('src', imageName)
			.appendTo($message);

		$text
			.appendTo($message);

		$message
			.addClass('macro-' + this.name)
			.appendTo(this.output);
	}
});

... will result in the actor's name & text areas being place to the right of the image.

You will then need to change the CSS margin on the actor's face from the left to the right like so.

.macro-message .actor-face {
	/* Common width & height of all the face images. */
	width: 140px;
	height: 140px;

	/* Your styling for the face image area. */
	margin-right: 1em;
}