user_guide/helpers/smiley_helper.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <title>Smiley Helper : CodeIgniter User Guide</title>
   7
   8 <style type='text/css' media='all'>@import url('../userguide.css');</style>
   9 <link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
  10
  11 <script type="text/javascript" src="../nav/nav.js"></script>
  12 <script type="text/javascript" src="../nav/prototype.lite.js"></script>
  13 <script type="text/javascript" src="../nav/moo.fx.js"></script>
  14 <script type="text/javascript" src="../nav/user_guide_menu.js"></script>
  15
  16 <meta http-equiv='expires' content='-1' />
  17 <meta http-equiv= 'pragma' content='no-cache' />
  18 <meta name='robots' content='all' />
  19 <meta name='author' content='ExpressionEngine Dev Team' />
  20 <meta name='description' content='CodeIgniter User Guide' />
  21
  22 </head>
  23 <body>
  24
  25 <!-- START NAVIGATION -->
  26 <div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
  27 <div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
  28 <div id="masthead">
  29 <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
  30 <tr>
  31 <td><h1>CodeIgniter User Guide Version 2.0.2</h1></td>
  32 <td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
  33 </tr>
  34 </table>
  35 </div>
  36 <!-- END NAVIGATION -->
  37
  38
  39 <!-- START BREADCRUMB -->
  40 <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
  41 <tr>
  42 <td id="breadcrumb">
  43 <a href="http://codeigniter.com/">CodeIgniter Home</a> &nbsp;&#8250;&nbsp;
  44 <a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
  45 Smiley Helper
  46 </td>
  47 <td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="codeigniter.com/user_guide/" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
  48 </tr>
  49 </table>
  50 <!-- END BREADCRUMB -->
  51
  52 <br clear="all" />
  53
  54
  55 <!-- START CONTENT -->
  56 <div id="content">
  57
  58
  59 <h1>Smiley Helper</h1>
  60
  61 <p>The Smiley Helper file contains functions that let you manage smileys (emoticons).</p>
  62
  63
  64 <h2>Loading this Helper</h2>
  65
  66 <p>This helper is loaded using the following code:</p>
  67 <code>$this->load->helper('smiley');</code>
  68
  69 <h2>Overview</h2>
  70
  71 <p>The Smiley helper has a renderer that takes plain text simileys, like <dfn>:-)</dfn> and turns
  72 them into a image representation, like <img src="../images/smile.gif" width="19" height="19" border="0" alt="smile!" /></p>
  73
  74 <p>It also lets you display a set of smiley images that when clicked will be inserted into a form field.
  75 For example, if you have a blog that allows user commenting you can show the smileys next to the comment form.
  76 Your users can click a desired smiley and with the help of some JavaScript it will be placed into the form field.</p>
  77
  78
  79
  80 <h2>Clickable Smileys Tutorial</h2>
  81
  82 <p>Here is an example demonstrating how you might create a set of clickable smileys next to a form field. This example
  83 requires that you first download and install the smiley images, then create a controller and the View as described.</p>
  84
  85 <p class="important"><strong>Important:</strong> Before you begin, please <a href="http://codeigniter.com/download_files/smileys.zip">download the smiley images</a> and put them in
  86 a publicly accessible place on your server.  This helper also assumes you have the smiley replacement array located at
  87 <dfn>application/config/smileys.php</dfn></p>
  88
  89
  90 <h3>The Controller</h3>
  91
  92 <p>In your <dfn>application/controllers/</dfn> folder, create a file called <kbd>smileys.php</kbd> and place the code below in it.</p>
  93
  94 <p><strong>Important:</strong> Change the URL in the <dfn>get_clickable_smileys()</dfn> function below so that it points to
  95 your <dfn>smiley</dfn> folder.</p>
  96
  97 <p>You'll notice that in addition to the smiley helper we are using the <a href="../libraries/table.html">Table Class</a>.</p>
  98
  99 <textarea class="textarea" style="width:100%" cols="50" rows="25">
 100 &lt;?php
 101
 102 class Smileys extends CI_Controller {
 103
 104         function __construct()
 105         {
 106                 parent::__construct();
 107         }
 108
 109         function index()
 110         {
 111                 $this->load->helper('smiley');
 112                 $this->load->library('table');
 113
 114                 $image_array = get_clickable_smileys('http://example.com/images/smileys/', 'comments');
 115
 116                 $col_array = $this->table->make_columns($image_array, 8);
 117
 118                 $data['smiley_table'] = $this->table->generate($col_array);
 119
 120                 $this->load->view('smiley_view', $data);
 121         }
 122
 123 }
 124 ?&gt;
 125 </textarea>
 126
 127 <p>In your <dfn>application/views/</dfn> folder, create a file called <kbd>smiley_view.php</kbd> and place this code in it:</p>
 128
 129 <textarea class="textarea" style="width:100%" cols="50" rows="20">
 130 &lt;html>
 131 &lt;head>
 132 &lt;title>Smileys&lt;/title>
 133
 134 &lt;?php echo smiley_js(); ?>
 135
 136 &lt;/head>
 137 &lt;body>
 138
 139 &lt;form name="blog">
 140 &lt;textarea name="comments" id="comments" cols="40" rows="4">&lt;/textarea>
 141 &lt;/form>
 142
 143 &lt;p>Click to insert a smiley!&lt;/p>
 144
 145 &lt;?php echo $smiley_table; ?>
 146
 147 &lt;/body>
 148 &lt;/html>
 149 </textarea>
 150
 151
 152 <p>When you have created the above controller and view, load it by visiting <dfn>http://www.example.com/index.php/smileys/</dfn></p>
 153
 154
 155 <h3>Field Aliases</h3>
 156
 157 <p>When making changes to a view it can be inconvenient to have the field id in the controller. To work around this,
 158 you can give your smiley links a generic name that will be tied to a specific id in your view.</p>
 159 <code>$image_array = get_smiley_links("http://example.com/images/smileys/", "comment_textarea_alias");</code>
 160
 161 <p>To map the alias to the field id, pass them both into the smiley_js function:</p>
 162 <code>$image_array = smiley_js("comment_textarea_alias", "comments");</code>
 163
 164
 165 <h1>Function Reference</h1>
 166
 167 <h2>get_clickable_smileys()</h2>
 168
 169 <p>Returns an array containing your smiley images wrapped in a clickable link.  You must supply the URL to your smiley folder
 170 and a field id or field alias.</p>
 171
 172 <code>$image_array = get_smiley_links("http://example.com/images/smileys/", "comment");</code>
 173 <p class="important">Note: Usage of this function without the second parameter, in combination with js_insert_smiley has been deprecated.</p>
 174
 175
 176 <h2>smiley_js()</h2>
 177
 178 <p>Generates the JavaScript that allows the images to be clicked and inserted into a form field.
 179 If you supplied an alias instead of an id when generating your smiley links, you need to pass the
 180 alias and corresponding form id into the function.
 181 This function is designed to be placed into the &lt;head&gt; area of your web page.</p>
 182
 183 <code>&lt;?php echo smiley_js(); ?&gt;</code>
 184 <p class="important">Note: This function replaces js_insert_smiley, which has been deprecated.</p>
 185
 186
 187 <h2>parse_smileys()</h2>
 188
 189 <p>Takes a string of text as input and replaces any contained plain text smileys into the image
 190 equivalent.  The first parameter must contain your string, the second must contain  the URL to your smiley folder:</p>
 191
 192 <code>
 193 $str = 'Here are some simileys: :-)  ;-)';
 194
 195 $str = parse_smileys($str, "http://example.com/images/smileys/");
 196
 197 echo $str;
 198 </code>
 199 </div>
 200 <!-- END CONTENT -->
 201
 202
 203 <div id="footer">
 204 <p>
 205 Previous Topic:&nbsp;&nbsp;<a href="security_helper.html">Security Helper</a>
 206 &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 207 <a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 208 <a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 209 Next Topic:&nbsp;&nbsp;<a href="string_helper.html">String Helper</a>
 210 </p>
 211 <p><a href="http://codeigniter.com">CodeIgniter</a> &nbsp;&middot;&nbsp; Copyright &#169; 2006 - 2011 &nbsp;&middot;&nbsp; <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
 212 </div>
 213
 214 </body>
 215 </html>