Smilie Sizing & Positioning?

[Gary Lewis]

I know this is a low-level priority, but I'm trying to add some smilies to my forum.  I've read all the threads about smilies and know how to edit the macro.  In fact, I've actually added a smilie successfully.  However, it doesn't present well when inserting it.

It acts like it is an HTML block and takes up the whole line.  You can see that in this post on my forum where I inserted the new Laughing smilie.  What am I doing wrong?

Oh, and I made the Laughing smilie 20 x 20, but it appears to be a bit small.  I can keep trying until I get the sizing about right, but does anyone really now how big the others are?

TIA!

[GregChapman]

Hi Gary,

Apologies for not being able to respond to your email promptly, in which you give extra detail.

You are right the extra CSS code added to your forum:

div.root-text img, div.message-text img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 95%;
}

will force all images in posts (div.message-text img) and in preview while editing (div.root-text img) to display on its own line (as a block) centred (margin-right: auto; margin-left: auto;) and if wider than the window/screen in which they are being displayed they will be scaled down in size so they only occupy 95% of the space available (max-width:95%).

That will work fine for large photos posted by your users but will mess with other images.

Looking at the post with your "laughing" smiley, it is inserted with the following code:

<img src="http://www.garysgaragemahal.com/uploads/6/5/8/7/65879365/ezgif-com-resize_orig.gif"/>

whereas standard smileys come from files hard coded into your forum and are given a special class:

<img class='smiley' src='/images/smiley/anim_jump.gif'

I haven't had a chance to fully investigate yet, but it looks as if the unwanted "block" effect on your smiley is caused either because:
• the image is not one of those pre-loaded by Nabble (your file is sourced from outside of your forum)
• the class=smiley code over-rides the CSS code added to your forum

I'll have time to investigate further in a couple of days.

[Gary Lewis]

Greg - No apologies needed.  In fact, I'm the one who should apologize as I should have come to this forum first instead of emailing you.  I get email frequently about Ford trucks and tell the sender that if we do it in the forum then others can chime in as well as learn.

In any event, I suspect you are right with you scenarios.  And while I would like to add smilies, I don't want to do so at the expense of people's pictures.  Will changing something like that CSS code cause previously-posted pics to change?  Or just newly posted pics?  The latter I can deal with - I think.

Also, I'm confused as to why the standard smilies have a different class than my smiley.  I modified the smiley_table to change "Drunk" to "Laughing" and the source to my website.  So something somewhere else changed the class?

Anyway, thanks for your help on this.  I'll wait to see what you come up with and turn my attentions elsewhere.

[GregChapman]

I think I have the solution!

Others coming to this topic later need to know that  you were referencing Hugo's post at:
http://support.nabble.com/How-to-add-edit-emoticons-i-e-smileys-tp7114253p7117514.html
and that there's another segment of CSS code in your forum.

The version in the CSS box in my test forum now reads:

/* Fit Large images to width */
div.root-text img, div.message-text img  {
  display: block;
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}
div.root-text img.smiley, div.message-text img.smiley  {
  display:inline;
}
/* End of Fit Large images to width */

It is that extra "smiley" part that keeps your standard smileys from also being centred!

As I explained earlier, the problem is that when you add your own smiley to the "smiley_table" macro, it has to be sourced from outside Nabble. That's because the standard smiley images are stored centrally on Nabble's servers and are not duplicated for each individual forum. The Macro "smiley" detects the use of the standard smileys and adds the necessary file path to the central image store, while for external files, it retains the supplied absolute address.

There is some JavaScript within another macro, "editor_smiley_button", that creates the HTML that appears on the page when an external smiley is used and generates the special Nabble "smiley image" tag that appears it the edit box when you select a standard smiley. I can find no local macro that converts the "smiley image" tag to standard a standard HTML "img" tag with the "class='smiley'" attribute, so I assume it is done centrally on Nabble's servers, as a forum page is served.

So what we need to do is make sure that the external files referenced in the smiley table are treated as smileys and not as standard images and so not subject to the CSS code that forces all images appear centred on their own line with larger ones shrunk to fit the available width.

To do that you need to edit the "editor_smiley_button" macro. After clicking the "Over-ride the macro" button you should edit line #9 to read:

this.setSelection( textarea, "<img class='smiley' src=\""+image+"\"/>" );

 

[Gary Lewis]

YES!  You did it!!!  

I edited the "editor_smiley_button" macro and gave it a go.  The results look like this:




Thanks ever so much!  That is a huge help!  

And, for the laugh of the day, which is appropriate since the smiley is called Laughing, I sat here looking at the pic above wondering why the gif wasn't animated here like it is on my forum.