Ene 8 2009

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.

› Continue reading


Ene 6 2009

Construyendo el portal de Tery Software - Menus animados con kwicks

Continuando con los artículos de la creación de nuestro portal corporativo, continuamos con la creación de los menús. Generalmente los menús son generados por Drupal de manera automática; sin embargo, estos menus son sencillos links en HTML y buscábamos algo animado. Decidimos emplear un plugin desarrollado en J-Query que proporciona menús de acordeón llamado kwicks.

Específicamente el ejemplo #1 se ajustaba a una idea que nos surgió de que los personajes de nuestro logo empujaran los menus. Por ser desarrollado sobre J-Query existía una alta posibilidad de que pudiera integrarse con Drupal y de hecho así lo fué, pero ¿ Como hacer que se integrara completamente con la potente gestión de contenido que ofrece Drupal ?.

Dado que Drupal esta desarrollado sobre PHP y es un CMS bastante personalizable, decidimos crear un pequeño script que embedido en el template generara el algoritmo necesario en HTML y JavaScript para cada menu existente.

La manera como se obtuvieron los menús existentes fue capturando la variable $primary_links que es una arreglo y empleando las variables contenidas en dicho arreglo para cada menú. El array $primary_links consta de los siguientes registros por cada menu:

$primary_links =&gt; array(1) {
	["some_menu"]=&gt;  array(3) {
		["attributes"]=&gt;  array(1) {
			["title"]=&gt;  string(33) "Titulo al posar el cursor"
		}
		["href"]=&gt;  string(6) "node/6"
		["title"]=&gt;  string(9) "Principal"
	}
}

El número de elementos que contendrá el array $primary_links depende directamente del número de menús que hallan sido creados. Para que un menú se muestre animado con kwicks debe cada opción estar codificada así:

<ul class="kwicks">
	<li id="kwick1">Menu 1</li>
	<li id="kwick2">Menu 2</li>
</ul>

De modo que lo que hacemos es emplear la sentencia de control foreach para que por cada elemento del arreglo nos genere un menú siguiendo el patrón anterior. Para organizar y estilizar de una mejor manera, decidimos dentro de cada <li> declarar un <h2>(Por ser un subtitulo creemos que es semánticamente correcto) y un <label>. Tambíen cabe mencionar que en el script se emplea una variable de control $n a fin de que los identificadores no se repitan y no incumpla el XHTML. Por último era necesario recuperar el alias de url en ves de la url original, ya que de emplear la original nuestro usuarios estarían siendo dirigidos a páginas del tipo “node/#”. A continuación el pequeño script debidamente comentado. Este script fue insertado en un <div$gt; dentro del template principal (page.tpl.php). ver acerca de PHPTemplate y maqueteado en Drupal.

<div id="kwickmenu">
<ul class="kwicks">
<h2 class="main_links">
					<label>
					<a title="'.$option[" href="../../../../'.$nombre["> '.$option["title"].'
					</a>
					</label></h2>
';}
		/*De lo contrario imprimir sin el alias (path original)*/
		else {
		echo '
	<li id="kwick'.$n.'">
<h2 class="main_links">
					<label>
					<a title="'.$option[" href="../../../../'.$option["> '.$option["title"].'
					</a>
					</label></h2>
</li>
';}
		$n++;		/* Incrementamos el identificador para la siguiente iteración*/
		}
		?&gt;</ul>
</div>

comentado. Este script fue insertado dentro del template principal (page.tpl.php). ver acerca de PHPTemplate y maqueteado en Drupal.

De esta manera se integraron los menús con Drupal. Es importante hacer referencia a las hojas de estilo y scripts que vienen contenido en el paquete de kwicks para que funcione correctamente. El resultado se puede apreciar en nuestra web TerySoftware, un menú animado haciendo uso de un efecto de acordeón.