warning:
Most operating systems besides Windows are case-sensitive when it comes to folder & file names, because of this it is generally a good idea to only use a singe letter-case when naming folders & files that are referenced within a URL and commonly all lower-case letters are used. Space characters within folder & file names can also cause issues so these are generally replaced with either underscore charactes or standard dash / minus characters.
So I suggest changing your "Images/sister.jpg" to "images/sister.jpg"
The following solution to you issue consists of three parts:
1. A new custom <<dialogue>> macro.
The following example should be placed within your project's Story Javascript area, it defines the new macro which you can use to display both the image and then releated text.
/*
<<dialogue imageName>>dialogue text<</dialogue>>
Arguments:
imageName: The name of the image to display. (eg. "images/sister.jpg")
Example:
<<dialogue "images/sister.jpg">>"Awhh, you're the best bro in the world" she grinned.<</dialogue>>
*/
Macro.add('dialogue', {
skipArgs : false,
tags : null,
handler : function () {
if (this.args.length < 1) {
return this.error('no image name argument.');
}
// Ensure that the image name argument is a string.
if (typeof this.args[0] !== 'string') {
return this.error('image name argument is not a String');
}
const imageName = this.args[0].trim();
const $dialogue = jQuery(document.createElement('div'));
const $text = jQuery(document.createElement('div'));
jQuery(document.createElement('img'))
.addClass('macro-' + this.name + '-image')
.attr('src', imageName)
.appendTo($dialogue);
/* Need to wrap the 'dialogue text' to stop the flex styling effecting it. */
jQuery(document.createElement('div'))
.wiki(this.payload[0].contents)
.appendTo($text);
$text
.addClass('macro-' + this.name + '-text')
.appendTo($dialogue);
$dialogue
.addClass('macro-' + this.name)
.appendTo(this.output);
}
});
2. CSS used to style the HTML structure generated by the new macro.
The following example should be placed within your project's Story Stylesheet area.
/* <<dialogue>> macro related styling. */
.macro-dialogue {
position: relative;
min-height: 55px;
}
.macro-dialogue-image {
height: 55px;
position: absolute;
top: 0;
left: 0;
}
.macro-dialogue-text {
min-height: 55px;
margin-left: 55px;
display: flex;
align-items: center;
}
3. Some examples of the new macro being used.
<<dialogue "images/sister.jpg">>"Awhh, you're the best bro in the world" she grinned.<</dialogue>>
<<dialogue "images/sister.jpg">>
\"Awhh, you're the best bro in the world" she grinned. The quick brown foxed jumped over the lazy dog.
\ The quick brown foxed jumped over the lazy dog. The quick brown foxed jumped over the lazy dog.
\ The quick brown foxed jumped over the lazy dog. The quick brown foxed jumped over the lazy dog.
\ The quick brown foxed jumped over the lazy dog. The quick brown foxed jumped over the lazy dog.
\<</dialogue>>
edit 5-sep-2018:
Fixed the <<dialogue>> macro to stop the flex-box styling of the .macro-dialogue-text CSS class effecting any span or div elements contained within the dialogue text.