Gossamer Forum
Home : Products : Gossamer Forum : Discussion :

How does the /include_smilies_write.html template work?

Quote Reply
How does the /include_smilies_write.html template work?
I added my own smiles into the same folder on the server where the existing ones in that file are located. I changed the code to represent my new smilies. However when I click on one to insert it, I end up getting a missing image icon instead. I don't get it myself, why it inserts broken image links when all that I did was to change the tag name and the image associated with it (which shows up on the left side of the post box, so I know it exists)

Heres the code
Code:
<table border=0 cellpadding=0 cellspacing=5>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag(':)')" tabindex=25><img src="<%image_url%>/smile.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('wink')" tabindex=25><img src="<%image_url%>/wink.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('hello')" tabindex=25><img src="<%image_url%>/hello.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('tongue')" tabindex=25><img src="<%image_url%>/tongue.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('cool')" tabindex=25><img src="<%image_url%>/cool.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('question')" tabindex=25><img src="<%image_url%>/question.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('tape')" tabindex=25><img src="<%image_url%>/tape.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('nerd')" tabindex=25><img src="<%image_url%>/nerd.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('looking')" tabindex=25><img src="<%image_url%>/looking.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('shocked')" tabindex=25><img src="<%image_url%>/shocked.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('laugh')" tabindex=25><img src="<%image_url%>/laugh.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag(':/')" tabindex=25><img src="<%image_url%>/unsure.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag(':|')" tabindex=25><img src="<%image_url%>/unimpressed.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('sly')" tabindex=25><img src="<%image_url%>/sly.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('pirate')" tabindex=25><img src="<%image_url%>/pirate.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('gm')" tabindex=25><img src="<%image_url%>/green_mana4forum.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('um')" tabindex=25><img src="<%image_url%>/blue_mana4forum.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('rm')" tabindex=25><img src="<%image_url%>/red_mana4forum.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('bm')" tabindex=25><img src="<%image_url%>/black_mana4forum.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('wm')" tabindex=25><img src="<%image_url%>/white_mana4forum.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('t')" tabindex=25><img src="<%image_url%>/tap.gif" border=0></a></td>
</tr>
<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('x0')" tabindex=25><img src="<%image_url%>/0_mana.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('1')" tabindex=25><img src="<%image_url%>/1_mana.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('2')" tabindex=25><img src="<%image_url%>/2_mana.gif" border=0></a></td>
</tr>
</table>
Quote Reply
Re: [Westin] How does the /include_smilies_write.html template work? In reply to
Are you actually uploading your images into your <%image_url%> directory?

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] How does the /include_smilies_write.html template work? In reply to
Yes, they are definitely in there.

And heres a strange thing:

In the advanced editor (the original emotes work fine, they show up anyway. When I click on the ones that I replaced it gives the broken urls. When I switch to basic editor here is what I see:

[img]undefined[/img] [img]undefined[/img] [:)]

the one with [:)] is one of the originals and shows up fine in advanced editor.

If I click on the same three images in the basic editor, this is what is added:
[:)] [wink] [hello]

Now if I switch back to the advanced editor, all three emoteicons show up like they should.

So theres something going on that is stuffing [img]undefined[/img] in the advanced editor for everytime that I click on one of my own emoteicons.

Strange stuff that I just don't fathom

Last edited by:

Westin: May 21, 2009, 1:05 AM
Quote Reply
Re: [Westin] How does the /include_smilies_write.html template work? In reply to
Hi,

I *think* you need to set them up in Markup > Tags > Add

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] How does the /include_smilies_write.html template work? In reply to
Yup, got them all in there too. The only difference I noticed between the original ones and mine were the original tags are written as"

Code:

<img src="<%image_url%>/black_mana4forum.gif" alt="SWAMP - BLACK MANA" border="0">

and I was writting mine with the full domain url instead of using the image_url tag.

So I switched mine to be just like the originals but that didn't help either.

I have to wonder if they are registered somewhere else in another file maybe.

Last edited by:

Westin: May 21, 2009, 1:42 AM
Quote Reply
Re: [Westin] How does the /include_smilies_write.html template work? In reply to
Mmm, afraid I'm not sure (never actually added more smilies). Maybe Adrain can suggest whats wrong.

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] How does the /include_smilies_write.html template work? In reply to
Adrian, anybody, anybody.

Anybody else can tell me why when I switch smilies from one code to another in the include_smilies_write.html template they stop working in that they don't get added to the message document when using the advanced editor?

For example if I simply change the one that is for angelic and change the code word "angelic" to "cry" and change the image from the angelic.gif to the cry.gif then when I click on the cry.gif (which does show next to the advanced editor window by the way), it only inserts a missing image icon instead of the cry.gif.

I think it's referencing the editor_iframe.html template in the common category, but I can't make heads or tales out of why it wouldn't work since I don't see any specifics in there that would cause it to not work properly simply by changing the keyword from angelic (or :P or any other option) to a new name and reference the new image, it baffles the mind.

There must be more to it than what Im currently seeing but what. Adrian? Anything?

Thank you for your time.

Quote Reply
Re: [Westin] How does the /include_smilies_write.html template work? In reply to
There in the editor.js file

That's the file that they are referenced in as:
Code:
var Faces = {
':)' : '<%escape_js image_url%>' + '/smile.gif',
';)' : '<%escape_js image_url%>' + '/wink.gif',
':(' : '<%escape_js image_url%>' + '/frown.gif',
':P' : '<%escape_js image_url%>' + '/tongue.gif',
'cool' : '<%escape_js image_url%>' + '/cool.gif',
'blush' : '<%escape_js image_url%>' + '/blush.gif',
'angelic' : '<%escape_js image_url%>' + '/angelic.gif',
'crazy' : '<%escape_js image_url%>' + '/crazy.gif',
'mad' : '<%escape_js image_url%>' + '/mad.gif',
'shocked' : '<%escape_js image_url%>' + '/shocked.gif',
'laugh' : '<%escape_js image_url%>' + '/laugh.gif',
':/' : '<%escape_js image_url%>' + '/unsure.gif',
':|' : '<%escape_js image_url%>' + '/unimpressed.gif',
'sly' : '<%escape_js image_url%>' + '/sly.gif',
'pirate' : '<%escape_js image_url%>' + '/pirate.gif'
};

File has to be hand edited outside of gossamer admin, because for some reason (Im guessing it's built in protection) when trying to save to the server I get a message stating:
Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Every single time. So a hand editing it will be.
Quote Reply
Re: [Westin] How does the /include_smilies_write.html template work? In reply to
So the full process (to make it easier for anybody else that wants to replace and or add more similes or other images to the quick smilies chart on the left side of the editors).

Stereo Instructions ;)

1. Upload any new smilie images you want to use to your forums /images/ folder

2. In GForums Administration panel, click on Markup, then Add a new Tag (not a Text Tag)

3. Add any new smilie tags that you want to make available to your users. (see Notes at the bottom for suggestions)

4. Click Templates in Admin panel and edit the user template /include_smilies_write.html Adding new table rows to the bottom of the rows of tables (use the existing table row code in that file) or
add the example code below to the /include_smilies_write.html template

Add this code (replacing any instance of smiliename with the word you want the user to type to produce the smilie, and replacing any instance of smilieimagename.gif with the real image name of the image you uploaded in step 1 above)
Code:

<tr>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('smiliename')" tabindex=25><img src="<%image_url%>/smilieimagename.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('smiliename')" tabindex=25><img src="<%image_url%>/smilieimagename.gif" border=0></a></td>
<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('smiliename')" tabindex=25><img src="<%image_url%>/smilieimagename.gif" border=0></a></td>
</tr>


Before this code:
Code:

</tr>
</table>



4A. Edit any existing smilie code in the
/include_smilies_write.html template to replace any existing smilies that you want to replace with new smilie code and smilefilename.gif images
For example, one line of existing code is:
Code:

<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag(';)')" tabindex=25><img src="<%image_url%>/wink.gif" border=0></a></td>

You could change it to :
Code:

<td><a href="javascript: <%if html_editor%>top.editor_iframe.<%endif%>addTag('wink')" tabindex=25><img src="<%image_url%>/wink.gif" border=0></a></td>

This assumes you want the user to type in [wink] to produce Wink and that the image you want to associate with the [wink] tag is actually named wink.gif and has been uploaded in step 1 above.





If you want to add new smlies to the existing selection of smilies that appear on the pages you see when you post a new message or edit an existing message then continue on, else you are done.




5. Ftp to your server and make a backup of the original editor.js file (either on the server or locally) THIS STEP IS CRUCIAL - If you mess up the editor.js file with even one out of place comma, the post display box will not show up until you find and fix the mistake.

6. Download the editor.js file (you'll be working on this file)

7. In the editor.js file look for:
Code:

var Faces = {
':)' : '<%escape_js image_url%>' + '/smile.gif',
';)' : '<%escape_js image_url%>' + '/wink.gif',
':(' : '<%escape_js image_url%>' + '/frown.gif',
':P' : '<%escape_js image_url%>' + '/tongue.gif',
'cool' : '<%escape_js image_url%>' + '/cool.gif',
'blush' : '<%escape_js image_url%>' + '/blush.gif',
'angelic' : '<%escape_js image_url%>' + '/angelic.gif',
'crazy' : '<%escape_js image_url%>' + '/crazy.gif',
'mad' : '<%escape_js image_url%>' + '/mad.gif',
'shocked' : '<%escape_js image_url%>' + '/shocked.gif',
'laugh' : '<%escape_js image_url%>' + '/laugh.gif',
':/' : '<%escape_js image_url%>' + '/unsure.gif',
':|' : '<%escape_js image_url%>' + '/unimpressed.gif',
'sly' : '<%escape_js image_url%>' + '/sly.gif',
'pirate' : '<%escape_js image_url%>' + '/pirate.gif'
};


Insert Before

Code:

'pirate' : '<%escape_js image_url%>' + '/pirate.gif'


This coding:
Code:

'pirate' : '<%escape_js image_url%>' + '/pirate.gif',

replacing smiliename and smilieimagename.gif with the word you want people to type to produce the smilie, and the actual smilie image name you uploaded in step 1.

Add as many of the above extra lines of code as you have added new smilies that you want to appear on the post and edit pages next to the main message body entry form.

8. Save and upload (in ASCII mode NOT binary)

That's pretty much it. Now when you go to post a new message or edit an existing message you should see the changed smilies, or the newly added smilies to the table on the left side of the main message body entry box.


Notes: I name all my smilies with the actual word to describe them instead of using the more cryptic (and traditional) BB smilie code. For example, because the version of GForums that we have access to requires me to type [;)] to produce the ;) smilie, it's far easier for your memebers to remember, and type in [wink] than it is to type in [;)] (it's all that extra shift key work, and the added [ ] brackets that earlier versions of Gforums requires)

So I either rename all existing smilies, or add any new smilies with real world words:
examples
Code:

[wink]
[smile]
[cry]
[frustrated]
[thumbsup]
[bonkhead]
[tongue]
etc


Those are just some examples of some smilies that we use regularly, our members on all of our older forum sites don't even click the icons to insert them anymore, they simply type in the smilie code (inside of the [ ] brackets of course) as they are typing in the message. Im sure if you do the same they will appreciate it in Gforums. With the newest version of Gforums (the one that only GT has access to right now) you'll be able to type in [;)] without the brackets and produce ; ) when such a time as the users have access to this new forum code, you can simply add in more tags for the most common smilie cryptic commands like [:)] (without the brackets being necessary.

Last edited by:

Westin: May 24, 2009, 10:25 AM