Symphony.

does anybody know could I somehow import few smileys in symphony so that they would show up when I enter :) or :( or xD - you know, smiley codes?

You could do that fairly easily in your XSLT I'd think.

hmmm.. how?

I think you would use a translate function like this.

Scratch that. It won't work for this. :-(

Would that work, or do you need to do something more sophisticated?

could you write me an example of how would my code look like? I'd then follow that pattern for rest of smileys.

That would be an utility, right?

list of xpath functions

I think replace(string,pattern,replace) could be used:

replace(entry, ':)', '<img src="smile.png" alt="smile" />')

This functionality is not always readily available, but Allen has has written a string-replace utility (found at the bottom of this post can be used as such:

        <xsl:call-template name="str:replace">
          <xsl:with-param name="string" select="entry/item" />
          <xsl:with-param name="search" select="':)'" />
          <xsl:with-param name="replace" select="<img src='smilie.png' alt='smilie' />" />
        </xsl:call-template>

Isn't replace(string,pattern,replace) XSLT2? Most people using Symphony won't be able to use it?

You could also use the TinyMCE extension with your text area and include this plug-in to automatically add smileys at the text editor level.

replace() is indeed XSLT 2.0 and so not applicable (since Symphony, or more accurately LibXSLT on PHP, uses XSLT 1.0).

The translate() function will only translate individual characters, not entire strings. Therefore you need a string replace template! I have one that I use on the paging template (see first post for the link to the XSLT and check the pagination.xsl for implementation). I don't recall where this template came from originally — a book, a colleague or Allen's head, so I can't accurately give credit.

Or You could use templated text formatters extension, create "smileys" formatter based on regex template, use following pattern:

/(>|}|)(:|;|\|)-?([\)\]DPX*\|dpx])/

replacement:

<span class="smiley" title="$1$2-$3">$1$2-$3</span>

CSS:

.smiley {
    font-size: 0px;
    line-height: 0px;
}
.smiley:after {
    content: ' ';
    line-height: 16px;
    font-family: monospace;
    font-size: 16px;
    background-image: url('smileys.jpg');
    background-repeat: no-repeat;
    color: transparent;
}

.smiley[title=':-p']:after {
    background-position: 0px 0px;
}
.smiley[title=':-)']:after {
    background-position: -16px 0px;
}
/* more smileys here, each with position more to the left */

and one image which holds all smileys in a single row. 16 px is just an example. Tested only in Firefox 3.0.x and Opera 9.6.x :). As usual, probably will not work in IE.

To make it use less tricky CSS, You could split pattern into more patterns - one per each smiley type, and instead of span use img tags. That should work even in IE.

The CSS above won't work in IE and I've been trying to use the string replace XSLT above and have run into a wall with replacing multiple emoticons. I'm thinking XSLT is not the best way to go about this problem.

I'd say there are 2 ways to approach this:

• Use a text editor extension to add them in text areas in the admin
• Use JavaScript to replace them on page load

I tend to lean towards JavaScript since emoticons are presentational. If CSS support in IE were better, this would be simple. :-P

I also think it's better to use JavaScript than put images directly in text areas. Still You can use regex to generate image tags. Instead of using one pattern, add many patterns, for each smiley, e.g.,

/:-?[pP]/

will match any of ":-p", ":p", ":-P", ":P".

Replacements can look like:

<img src="name_of_single_smiley.jpg" class="smiley" alt=":-P"/>

Or use span and CSS trick by default, and then use JS to replace spans with images only for IE. That way users of good browsers can surf without being dragged down by IE users ;).