0 votes
asked by (260 points)
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

1 Answer

+1 vote
answered by (121k points)
selected by
 
Best answer

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;
}

 

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.
...