monitojoomla

Paginación con Imagenes en Joomla

Lunes, 26 Julio 2010 | Escrito por Jhon Marreros Guzman

Detalles Tutorial - Nivel : Intermedio, Versión Joomla : 1.5.x, Formato : texto y video.
Joomla nos muestra por defecto una paginación en texto, en este tutorial veremos como cambiar la paginación de algunos items por imágenes, utilizando la sobreescritura (overrides) del archivo pagination.php

En el siguiente video se muestra a través de un ejemplo la personalización de la paginación.

Generalidades

El core de Joomla y muchos templates tienen por defecto la paginación en texto, tal como se muestra en la siguiente imagen, utilizando la técnica de sobreescritura (overrides) de la paginación podemos personalizar nuestra paginación.

Modificando el archivo pagination.php

Nos basamos en el archivo pagination.php del template beez ( /templates/beez/html/pagination.php ) y lo copiamos a la siguiente ruta de nuestro template /templates/miTemplate/html/, posteriormente modificamos las funciones pagination_item_active y pagination_item_inactive.

function pagination_item_active(&$item) {
 
 switch ($item->text){
 case JText::_('Start'):
 $cadImg = "<img src='images/stories/navegacion/primero.gif'";
 break;
 
 case JText::_('Prev'):
 $cadImg = "<img src='images/stories/navegacion/anterior.gif'";
 break;
 case JText::_('Next'):
 $cadImg = "<img src='images/stories/navegacion/siguiente.gif'";
 break;
 case JText::_('End'):
 $cadImg = "<img src='images/stories/navegacion/fin.gif'";
 break;
 default:
 $cadImg = $item->text;
 break;
 }
 
 $cad = "<li><strong><a href=\"".$item->link."\" title=\"".$item->text."\">".$cadImg."</a></strong></li>";
 
 
 return $cad;
}

function pagination_item_inactive(&$item) {
 switch ($item->text){
 case JText::_('Start'):
 $cadImg = "<img src='images/stories/navegacion/primero_.gif'";
 break;
 
 case JText::_('Prev'):
 $cadImg = "<img src='images/stories/navegacion/anterior_.gif'";
 break;
 case JText::_('Next'):
 $cadImg = "<img src='images/stories/navegacion/siguiente_.gif'";
 break;
 case JText::_('End'):
 $cadImg = "<img src='images/stories/navegacion/fin_.gif'";
 break;
 default:
 $cadImg = $item->text;
 break;
 }
 
 $cad = "<li>".$cadImg."</li>";

 return $cad;
}

Al realizar las modificaciones anteriores obtenemos la paginación como se muestra en la siguiente imagen

Conclusión

La paginación es parte importante de un buen diseño de template y a través de la técnica de sobreescritura (overrides) podemos personalizarla de acuerdo a nuestras necesidades.

Comparte este post