Joomla! + JQuery + PHP Gd

Hace unas de semanas cree un plugin de Joomla! pensando en las necesidades de un cliente(ya que no encontre ningun plugin que lo hiciera) y gracias al comentario de un compañero que buscaba algo similar. El plugin no aporta nada nuevo, solamente me pertimite cambiar los textos de ciertas etiquetas(determinadas por mi) de mi sitio por imágenes evitando los típicos problemas de © de la fuente y de perdida de accesibilidad.

Además llevaba tiempo queriendo hacer algo con JQuery ya que en el pasado me había dado muy buenos resultados y es por eso que voy a describir un poco el proceso de creación de este Plugin de Joomla! 1.5.

En primer lugar tenemos que tener claro la diferencia entre los distintos tipos de plugins que podemos crear en Joomla! para decidirnos por uno y nada mejor que visitar la documentación oficial y elegir el que más nos convenga.

En mi caso me decante por el uso del onAfterInitialise ya que este me permite agregar script a la cabecera de nuestro sitio web haciendo uso del framework de desarrollo de Joomla! de una forma muy sencilla:

 function onAfterInitialise(){
        global $mainframe;
        $document	=& JFactory::getDocument();
        $base = JURI::root(true);

¿Para que sirve todo esto?:

• global $mainframe;: me proporciona acceso a las variables ya inicializadas de Joomla!
• $document =& JFactory::getDocument(): obtenemos la instancia de la template sobre la que trabajaremos.
• $base = JURI::root(true): con esto obtendremos la ubicación de nuestro sitio web(para evitar problemas de ubicación del sitio).

Además el framework de Joomla! ofrece la posibilidad de almacenar y recuperar parámetros predefinidos o definidos por el usuario, podemos hacer uso de:

$plugin =& JPluginHelper::getPlugin('system', 'fontstylize');
$params = new JParameter( $plugin->params );

Con esto tenemos acceso a los parámetros serán usados para almacenar las etiquetas que serán sustituidas.

Otro aspecto importante que debemos cubrir es el de hacer que nuestro plugin actue solo en el frontend de Joomla!, que es donde queremos alterar el aspecto visual, para eso usamos:

if(!$mainframe->isAdmin()){

Esto nos permite verificar que el cliente usado es Administrador (Véase JFactory/getApplication). Cargamos los scripts y código Javascript necesarios haciendo uso de dos tipos de llamadas:

$document->addScript($base."/plugins/system/fontstylize/js/jquery.ifixpng.js");
//add the pixel fix
$document->addScriptDeclaration("jQuery.noConflict();".
"jQuery(function($){".
"   $.ifixpng(\"".$base."/plugins/system/fontstylize/img/pixel.gif\");".
"});");

¿Como funcionan?

• $document->addScript: La declaración addScript nos permite incorporar nuestros ficheros JS al head de nuestra pagina y además haciendo uso de la variable $base que definimos anteriormente nos aseguramos de que su ubicación sea correcta.
• $document->addScriptDeclaration: La declaración addScriptDeclaration nos permite agregar nuestro código Javascript en el mismo head. Esto es muy útil para configurar/inicializar nuestro Javascript haciendo uso de los parámetros almacenados en el plugin.

Ya disponemos de las herramientas en Joomla! necesarias para crear nuestro plugin por lo que ahora vamos a pasar a la base de nuestro plugin. Necesitamos crear un script PHP que nos permita generar Imagenes a partir de un texto haciendo uso de una fuente. El proceso es un poco largo y existe muchísima documentación que nos enseña a crear imágenes a partir de un texto(el ejemplo más básico es el de un captcha) así que no entrare en muchos detalles. La idea es que nuestro script reciba como parametros:

• Texto que sera creado(q)
• Color usado por la fuente(c)
• Tamaño de la fuente(s)
• Fuente usada(f)

Con estos parámetros tomaríamos la fuente de una ubicación de nuestro disco, crearíamos una imagen true color con algo de transparencia y le daríamos el tamaño a esta imagen haciendo uso de las funciones ttf de PHP. Aquí podéis ver un poco del código responsable de esta acción:

...
$font = $fonts_folder.DIRECTORY_SEPARATOR.$font.TTF_EXTENSION;

$h_box = imagettfbbox ($font_size,0,$font,ALPHABET);

$w_box = imagettfbbox ($font_size+2,0,$font,$query);

$width=abs( $w_box[2] - $w_box[0] );
$height=abs( $h_box[3] - $h_box[5] );

$image = imagecreatetruecolor($width,$height);
imagesavealpha($image, true);
...

Una vez creamos la imagen lo ideal seria grabarla en disco para realizar cache con algún sistema que nos permita localizarla ya que el proceso de creación de una imagen requiere cierta cantidad de recursos. Un ejemplo seria:

$file_name = md5($query.NAME_SEPARATOR.$font.NAME_SEPARATOR.$font_color.NAME_SEPARATOR.$font_size).PNG_EXTENSION;

En mi caso uso los parámetros de entrada y genero un resumen MD5 de los mismo para generar el nombre de fichero en caso de existir la imagen realizo una redirección haciendo uso de cabeceras HTTP a la imagen y en caso contrario creo una nueva imagen.

Como detalle final si eres de los que te gustan los detalles puedes hacer uso de mod_rewrite para que nuestro script parezca una imagen. Para realizar esta operación creamos un fichero .htaccess
y agregamos este código:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule image.png image.php
# Esto nos permitirá hacer que todas las peticiones a imagen.png sean procesadas por imagen.php.

Ya tenemos el tipo de plugin que usaremos para cargar nuestros Javascript y el script usado para generar la imagen, solo nos falta generar el código Javascript que realizara la sustitución del texto.

La idea central es tomar la información del texto a sustituir de la hoja de estilos en CSS de nuestro sitioweb usando JQuery ocultar el texto y en su lugar mostrar como imagen de fondo con CSS la nueva imagen creada con PHP. Voy a pegar y describir la sección en la que se realiza todo este proceso y que podeis encontrar en el fichero fonstylize.js:

var text = jQuery.trim($(this).text()).replace(/ /gi,"%20");
var font = $(this).css("font-family").replace(/ /gi,"%20").split(",");
var font_size = $(this).css("font-size").replace(/px/gi,"");
var font_color = hexColor($(this).css("color"));
var background_color = hexColor($(this).css("background-color"));

var image_url = url_base + "plugins/system/fontstylize/img/image.png?";

image_url += new Array(
    new Array("q", text).join("="),
    new Array("f", font[0]).join("="),
    new Array("c", font_color).join("="),
    new Array("s", font_size).join("=")
).join("&");

$(this).html("" + text + "");

// background
$(this).css("background-image", "url(" + image_url + ")");
$(this).css("background-repeat", "no-repeat");
$(this).css("background-position", "left top");
$(this).css("background-color", background_color);
 $(this).css("height",font_size+"px");

En primer lugar preparo los parámetros de la url que serán usados para la propiedad ccs background-color, luego sustituyo el texto de la etiqueta por un span sin visibilidad y finalmente cargo la imagen de fondo con css.

Hasta aquí todo lo importante, relacionado con el plugin de Joomla! fonstylize si tienes interés en ver el código puedes descargartelo aquí:

Plugin Fontstylize Joomla! 1.5

Espero que os sirva de algo