Drupal Módulo Smileys - Como crear un nuevo pack

Cuando se crean foros resulta bastante útil el proporcionarle al usuario smileys para que pueda personalizar sus comentarios. Drupal cuenta con un módulo para este fin llamado Smileys. El modulo es bastante bueno, sin embargo en su versión para Drupal 5.x nos topamos con bastantes tropiezos.

1. Generalmente los packs que se encuentran para esta versión son demasiado viejos, y aquellos con gráficos más estilizados se encuentran para la versión 6.x.
2. El módulo se hace bastante inconsistente al trabajar con J-Query Update ya que no permite insertar Emoticons directamente desde el fieldset.
3. Los smileys al ser insertados lo hacen sin una clase lo que hace bastante complicado su manejo en las hojas de estilo.

Cómo crear un pack personalizado para Smileys en Drupal 5

Como lo mencionamos, los packs que vienen para esta versión son bastante anticuados. Hay packs muy estilizados y modernos pero para la versión 6 que emplea archivos XML. Entonces elegimos descargar un tema para Smileys en Drupal 6 y hacer uso de un script que generara un archivo de pack para Drupal 5 a fin de portarlo.

EL tema que portamos es uno llamado Facies

Smileys Facies Thumbnail

El script que empleamos para convertir nuestras imágenes en un tema de smileys de Drupal 5, teniendo en cuenta que el nombre del icono queda igual al nombre de archivo es el siguiente:

<?php
//Script que genera un archivo .pak para Smileys Drupal 5 usando PHP.
 
$dh=opendir("/home/yourdir/"); //Directorio con los iconos
while(gettype($file=readdir($dh)) != boolean)
{
if(!is_dir("$file") && strpos($file, ".gif"))
{
$file2 = str_replace(".gif","",$file); //Estensión de archivos.
echo $file. "=+:" .$file2. "=+::" .$file2. ":";
echo "<br>";
}
}
closedir($dh);
 
//Modificación del script posteado por yngens en el foro de Drupal.org http://drupal.org/node/169700
?>

El Pack de emoticons que creamos se puede hallar en nuestra web de descargas:
http://www.terysoftware.com/descargas/smileys-facies_theme-d5

Hacer funcionar Smileys en Drupal 5 con J-Query Update

Dado que revisando los Issues no encontramos aparentemente una solución al tropiezo #2, decidimos desviar al usuario y obligarlo a usar la ventana (Pop Up) con los demás smileys que si funciona con J-Query Update. Lamentablemente todos los smileys se muestran en el fieldset por lo que el usuario no se vería tentado a hacer click en el link “Show All” (Que fue previamente habilitado en la página de configuración del módulo). Para tal fín, tuvimos que ingresar al módulo y realizar los siguientes cambios buscando que el fieldset mostrara solo unos pocos emoticons.


En el archivo de configuración del módulo (modules/smileys/smileys.module) hicimos lo siguiente:

En la línea 25 se encuentra una función que ejecuta una consulta de este modo

function _smileys_list($refresh = 0, $whereclause = '') {
 
 if($whereclause != '') {
   $whereclause = ' WHERE ' . $whereclause;
  }
  static $list;
 
  if (!$list || $refresh) {
    $result = db_query('SELECT * FROM {smileys} ' . $whereclause);
    $list = array();
    while ($a = db_fetch_object($result)) {
    $list[] = $a;
    }
  }
  return $list;
}

Lo que hacemos es preparar una nueva lista donde recuperemos no todos los emoticons sino solo algunos de esta manera:

function _smileys_lista($refresh = 0, $whereclause = '') {
 
 if($whereclause != '') {
   $whereclause = ' WHERE ' . $whereclause;
  }
  static $list;
 
  if (!$list || $refresh) {
    //Se limita la consulta a  registros.
    $result = db_query('SELECT * FROM {smileys} ' . $whereclause.'LIMIT 5'); 
    $list = array();
    while ($a = db_fetch_object($result)) {
    $list[] = $a;
    }
  }
  return $list;
}

Estas listas luego son empleadas por otra funciones como los son _smileys_select_table, y smileys_table(). Lo que hacemos es duplicar estas funciones pero en esta ocasión pasamos como parámetro la función que creamos (smileys_lista), en ves de smileys_list a las funciones. De esta manera el fieldset solo mostrará cinco emoticons. Las nuevas funciones las nombramos con un 2 al final y les pasamos como parametro la lista original _smileys_list().

//Funciones primitivas
function _smileys_select_table() {
 
  $content = '';
 
  $list = _smileys_lista();
 //Con la nueva lista
  foreach ($list as $smiley) {
 
    $acronyms = explode(' ', $smiley->acronyms);
    $alt = check_plain(implode('  ', $acronyms));
    $desc = implode('&nbsp; ', $acronyms);
    $content .= '<span><img src="'. check_url(base_path() . $smiley->image) .'" title="'. check_plain($smiley->description) .'" alt="'. $acronyms[0] .'" class="smiley-class"/></span>';
  }
 
  return $content;
}
 
function smileys_table() {
 
  drupal_add_js(drupal_get_path('module', 'smileys') .'/smileys.js');
  drupal_add_css(drupal_get_path('module', 'smileys') .'/smileys.css');
  $form = array();
  $output = '';
  $header = array(t('Smiley'), t('Acronyms'));
  $rows = array();
  $list = _smileys_lista(1);
 //Con la nueva lista
  foreach ($list as $smiley) {
  $acronyms = explode(' ', $smiley->acronyms);
    $rows[] = array(
      '<img src="'. check_url(base_path() . $smiley->image) .'" alt="'. $acronyms[0] .'" title="'. check_plain($smiley->description) .'" class="smiley-class" />',
      check_plain($smiley->acronyms)
    );
  }
 
  $form['smileys'] = array(
    '#type' => 'fieldset',
    '#title' => t('Smileys'),
    '#collapsible' => TRUE,
  );
 
  $form['smileys']['smileys_box'] = array(
 
    '#type' => 'markup',
    '#value' => theme('table', $header, $rows),
  );
 
  $output .= drupal_render($form);
  return $output;
 
}
 
//Funciones duplicadas
function _smileys_select_table2() {
 
  $content = '';
  $list = _smileys_list();
 //Con la lista primitiva.
  foreach ($list as $smiley) {
    $acronyms = explode(' ', $smiley->acronyms);
    $alt = check_plain(implode('  ', $acronyms));
    $desc = implode('&nbsp; ', $acronyms);
    $content .= '<span><img src="'. check_url(base_path() . $smiley->image) .'" title="'. check_plain($smiley->description) .'" alt="'. $acronyms[0] .'" class="smiley-class"/></span>';
  }
 return $content;
}
 
function smileys_table2() {
 
  drupal_add_js(drupal_get_path('module', 'smileys') .'/smileys.js');
  drupal_add_css(drupal_get_path('module', 'smileys') .'/smileys.css');
  $form = array();
  $output = '';
  $header = array(t('Smiley'), t('Acronyms'));
  $rows = array();
  $list = _smileys_list(1);
 //Con la lista primitiva
  foreach ($list as $smiley) {
  $acronyms = explode(' ', $smiley->acronyms);
    $rows[] = array(
      '<img src="'. check_url(base_path() . $smiley->image) .'" alt="'. $acronyms[0] .'" title="'. check_plain($smiley->description) .'" class="smiley-class" />',
      check_plain($smiley->acronyms)
    );
  }
 
  $form['smileys'] = array(
    '#type' => 'fieldset',
    '#title' => t('Smileys'),
    '#collapsible' => TRUE,
  );
 
  $form['smileys']['smileys_box'] = array(
    '#type' => 'markup',
    '#value' => theme('table', $header, $rows),
  );
 
  $output .= drupal_render($form);
  return $output;
}

Por ultimo, como modificamos las funciones de las tablas, el Pop-Up nos mostraría solo cinco emoticons. Por lo que tenemos que cambiar a fin de que recupere la tabla completa y no la recortada. La función que controla los elementos del Pop-Up es smileys_list(), poor lo que le cambiamos la tabla _smileys_select_table por la nueva es decir la #2.

function smileys_list() {
 
  print '<div class="smileysWindowtext">'. t('Click to insert acronym. [<span class="smiley-class" id="closeSmileys">Close</span>]') .'</div><div class="smileysWindow">'. _smileys_select_table2() .'</div>';
 
}

Con esto obtendremos un fieldset con solo cinco emoticons, y guiaremos al usuario a emplear el enlace para ver los demás.

Añadir una clase de CSS a los smileys en Drupal 5

Para añadir la clase a los emoticons hay que editar una linea en el módulo. (modules/smileys/smileys.module) función smileys_filter_process().

function smileys_filter_process($text) {
 
  $text = ' '. $text .' ';
 
  $list = _smileys_list();
 
  foreach ($list as $smiley) {
 
    $acronyms = explode(" ", $smiley->acronyms);
 
    $alt = str_replace('\\', '\\\\', check_plain($smiley->description));
 
    foreach ($acronyms as $a) {
 
      if ($smiley->standalone)
 
        //Añadimos en la siguiente cadena lo siguiente: class=\"img_smiley\" poniendo back_slash para escapar las comillas.
        $text = eregi_replace("([ ,\.\?!:\(\)\r\n\<\>])". preg_quote($a) ."([ ,\.\?!:\(\)\r\n\<\>])", "\\1<img src=\"". check_url(base_path() . $smiley->image) ."\" class=\"img_smiley\" title=\"". check_plain($alt) ."\" alt=\"". check_plain($alt) ."\" />\\2", $text);
 
      else
 
        $text = eregi_replace(preg_quote($a), '<img src="'. check_url(base_path() . $smiley->image) .'" class="img_smiley" title="'. check_plain($alt) .'" alt="'. check_plain($alt) .'" />', $text);
 
    }
 
  }
 
  $text = substr($text, 1, -1);
 
 
 
  return $text;
 
}

Con esto habremos creado una clase img_smiley para los emoticons que se imprimen en el sitio.

Siguiendo estos procedimientos dimos solución a los tres problemas planteados al inicio del post.


Leave a Reply