0 votes
by (2.4k points)

Hello there, 

I'm trying to have my text align with the image of the person talking. Basically, right now I have this : https://www.casimages.com/i/180902030252609797.png.html

And I'd like to have my text be centered with the middle of the image, if that makes sense ?

My storystylesheet is 

 

.sS{
  color:pink;
  font-weight: bold;
}

 

And I was wondering if it was possible to have it work in a way that every time I write 

@@.sS; "Text"@@

I would have the picture of the character on the left, with the text on the right ?

 

Thanks a lot. 

 

2 Answers

0 votes
by (159k points)
We also need to know the HTML/CSS you're using to display the image, the vertical height of the image, and what to do when the text being shown is long enough to require more vertical space than the image.
by (2.4k points)

Alright, so here's what I'd like it to render: https://www.casimages.com/i/180903083804724935.png.html

The vertical height of the image as of now is 55px. 

The HTML/CSS I'm using to display the image doesn't really exist : I have 

<<set $sister to "Images/sister.jpg">>

In my StoryInit passage,

And I used 

[img[$sister]]

To display it next to my text, so I would know how it would look...

Thanks a lot for your help greyelf.

0 votes
by (159k points)
edited by

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.

by (2.4k points)
edited by

Thanks a lot for your help greyelf !

Though, I am encountering issues with this macro. Edit: no more issues with picture not being shown. But what about the columns ?

Here's what it renders for me : https://www.casimages.com/i/180904111250929346.jpg.html

Here's how I wrote the passage : 

I walked to the sofa and sat, thinking about how would go my summer. I'd be there for quite a while, but I knew I'd be able to see $bfName, a great friend from college. I'd have to-

<<dialogue "images/sister.jpg">>@@.sS; "$name!"@@ she ran down the stairs and jumped at me, causing us to collapse on the sofa, @@.sS; "I'm glad to see you! How was your trip?!"@@<</dialogue>>

@@.me; "Wow, I can see you missed me indeed!"@@ I pushed her away softly and continued, @@.me; "It was alright, I had no trouble getting back here! There isn't much more to say though." @@

As you can see in the screen I took, <<dialogue>> seems to create a new column of text when I go in and out of custom styling. I know you couldn't have foreseen this as I didn't talk about custom style before, but is there an easy way to solve this issue ?

Also, would it be possible to make it so if there aren't any images within the characters variables, it will not display a margin ? (Is there a way to make it so <<dialogue>> won't do a thing if there are no images) 
I'd like the player to choose if whether or not he wants to have images of the characters. 

As always, thanks for your help. (Is there any way to tip you for the incredible help you provide?)

 

 

by (159k points)

> I didn't talk about custom style before, but is there an easy way to solve this issue?

I have edited the original <<dialogue>> macro code so that it hopefully fixes this issue, replace the existing version in your Story Javascript area with the new version and see if it does.
(I tested it with the example dialogue text you provided and it appeared correct to me)

> I'd like the player to choose if whether or not he wants to have images of the characters.

I will assume that you are going to use the Setting API or maybe a Story Variable to implement such a feature, once you have done this then it should be possibly to add code to the <<dialogue>> macro so that it knows about such a setting/variable and adapts the HTML being generated so that it doesn't display the .macro-dialogue-image area that contains the image.

I would need to first know exactly how you implemented this feature before I can change the <<dialogue>> macro to support it.

> Is there any way to tip you for the incredible help you provide?

Currently no, but I am in the process of setting up such things for anyone kind enough to support my Cookie addiction. <smile>

by (2.4k points)

1. Thanks a lot, that new <<dialogue>> macro works well with what I use it for ! I'll apply it to the whole text of my story, and see if I see anything wrong !

2. Yes, I was thinking of a Story variable. Basically, I'll give the choice of the picture displayed for one character like this : 

You want X to look like :

<<checkbox "$picture1" false true>> 
<<checkbox "$picture2" false true>> 
<<checkbox "$picture3" false true>> 
<<checkbox "$noPicture" false true>>

<<if $picture1>> 

  <<set $sister to "images/pic1.jpg">> 

<<elseif $picture2>> 

   <<set $sister to "images/pic2.jpg">> 

<<elseif $picture3>> 

   <<set $sister to "images/pic3.jpg">> 

<<elseif $noPicture>> 

Alright no pic ! 

<<else>> 

Error !

<</if>>

I don't know if it's the best way, but it's the one I thought of, and I believe it would work ?

3. I'd gladly support your Cookie addiction. I'll wait for the opportunity. Thanks again.

 

...