Monthly Archives: August 2009

Personalizar las "migas de pan" en Drupal

Introducción.

Las "migas de pan" o breadcrumbs es aquella sección de los sitios web que lleva un registro jerárquico de los niveles del sitio que se han visitado permiténdonos regresar a través de ellos de manera asíncrona.  Un ejemplo de breadcrumbs podría ser este.

Inicio > Software > Web.

Esto significaría que se está en la sección Web que depende del Software y que pende del inicio del sitio.

Breadcrumbs en Drupal.

Drupal provee automáticamente esta facilidad, él mismo va generando las "migas de pan" y las ubica donde se inserte la siguiente etiqueta, comúnmente en page.tpl.php.

<?php print $breadcrumb ?>

Por defecto Drupal se hace cargo de generar el contenido HTML asociado a las "migas de pan" con un estilo por defecto.  En algunas ocasiones este estilo no se adecúa a las necesidades propias.

Personalizar las breadcrumbs en Drupal.

Para hacer esto es necesario crear o editar el archivo template.php ubicado en el tema activo y agregar o modificar la definición de la función phptemplate_breadcrumb($breadcrumb) donde $breadcrumb es un arreglo y cada una de sus celdas corresponde con un segmento de las "migas de pan".

/**
 * Return a themed breadcrumb trail.
 *
 * @param $breadcrumb - An array containing the breadcrumb links.
 * @return a string containing the breadcrumb output.
 */
function phptemplate_breadcrumb($breadcrumb)
{
    if (empty($breadcrumb))
        return "";
    $str = "<ul>";
    $length = count($breadcrumb);
    for($i=0; $i<$length; $i++)
    {
        $bc = $breadcrumb[$i];
        $class = ($i < $length - 1) ? "" : "class='ruta_final'";
        $str .= "<li {$class}>{$bc}</li>";
    }
    $str .= "</ul>";
    return $str;
 }

El ejemplo anterior crea las "migas de pan" como un UL donde cada LI corresponde con una sección visitada y cuya última sección tiene además una clase CSS llamada ruta_final.

Como referenciar las imagenes de un tema en Drupal

Imágenes a partir de las hojas de estilo.

Cuando se desarrolla un tema la mayoría de las imágenes quedan relacionadas a través de las hojas de estilos (CSS) sus rutas son relativas automáticamente al directorio del tema y se incluyen, al igual que los archivos Javascript, en el archivo *.info del tema.

; $Id: dm.info,v 0.1 2009/08/11 11:11:00 jimezam Exp $
name = miTema
description = Esta es la descripción del tema.
version = 1.0
core = 6.x
engine = phptemplate

stylesheets[all][] = css/style.css
stylesheets[all][] = css/layout.css

scripts[] = js/jquery-1.3.2.min.js

El ejemplo anterior hace que miTema incluya automáticamente las hojas de estilo style.css y layout.css ubicadas bajo css/ y el archivo jquery-1.3.2.min.js ubicado bajo js/.  Esto se hace exactamente donde se inserten las siguientes etiquetas, normalmente ubicadas en el <head> de page.tpl.php.

<?php print $styles; ?>
<?php print $scripts; ?>

Imágenes estáticas directamente del tema.

En otras ocasiones es necesario referenciar imágenes (<img>) u otros recursos estáticos que se encuentran ubicados en el directorio del tema activo.  Para hacer esto se utiliza el método path_to_theme del API de Drupal.

Supongamos que se desea crear una imagen con el archivo Foto.png que se encuentra ubicado en el directorio imagenes/ del tema activo.  Se debe utilizar la siguiente expresión.

<img src="<?php global $base_path; print $base_path.path_to_theme(); ?>/imagenes/Foto.png" />

Otra forma de hacerlo, con una sintaxis un poco mas resumida es utilizando las funciones directas que provee Drupal de la siguiente manera.

<img src="<?php print base_path() . path_to_theme(); ?>/imagenes/Foto.png" />

Solución de problemas.

A pesar de que no se encuentren activos los cachés de Drupal, algunas veces los cambios que se realizan en estos archivos de presentación no se reflejan cuando se refresca el sitio.  Para corregir este comportamiento es necesario limpiar el caché de datos del tema para que se generen nuevas versiones que incluyan los cambios recién realizados.

Para limpiar el caché de datos de Drupal inicie como administrador y acceda a la configuración de desempeño (?q=admin/settings/performance).

Al final de la página presione el botón Clear cached data y al terminar esta página refresque nuevamente el sitio web para observbar los cambios.