Módulo para Header Dinámico en Joomla!

Publicado por Carla Macías
28 Julio, 2008

Joomla!En este tutorial veremos cómo crear un módulo en Joomla!; este sencillo módulo nos permitirá tener una imagen dependiente o relacionada con la sección de la página que estamos viendo. Por ejemplo, si queremos tener una imagen (como header) distinta de acuerdo a las secciones de nuestro menú.

Joomla! es un administrador de contenido que permite crear y gestionar sitios dinámicos. En Joomla! podemos programar módulos para extender la funcionalidad de nuestro sitio. La creación de módulos (comparada con la creación de componentes) es fácil de implementar y no  tan compleja.

Para este tutorial usaremos la versión 1.0.15 de Joomla!. En esta ocasión no pondré un ejemplo o demostración del ejercicio ya que tendría que instalar Joomla! en algún servidor. Sin embargo, no olvides bajar los archivos del tutorial que se encuentran al final de esta entrada.

Tutorial

Un módulo en Joomla! está formado básicamente por dos archivos principales, un archivo XML y un archivo PHP. El nombre de estos archivos deberá ser el mismo, y el nombre de todos los módulos que programes deberá comenzar con el prefijo mod_. El archivo XML contiene información sobre el nombre del módulo, autor, archivos que conforman el módulo, parámetros que recibe, etc; y es usado como archivo de configuración para el módulo. Por otro lado, en el archivo PHP deberá estar la programación de las tareas que realizará el módulo.

Estos archivos deberán estar dentro de un ZIP y se podrán subir desde el administrador de nuestro sitio en Joomla!.

Primero crearemos un directorio en nuestro disco duro llamado mod_cambiarimagen. Dentro de este directorio crea un nuevo archivo XML con el nombre de mod_cambiarimagen.xml. Escribe en ese archivo la siguiente información:

Texto Plano
XML:
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <mosinstall type="module" version="1.0.0">
  3.     <name>Cambiar Imagen</name>
  4.     <author>Carla Macías</author>
  5.     <creationDate>Abril 2008</creationDate>
  6.     <copyright>(C) 2008 Código Metrópoli</copyright>
  7.     <license>http://creativecommons.org/licenses/by-nc-sa/2.5/mx/</license>
  8.     <authorEmail>contacto@codigometropoli.com</authorEmail>
  9.     <authorUrl>www.codigometropoli.com</authorUrl>
  10.     <version>1.0.0</version>
  11.     <description>Este módulo muestra una imagen de header distinta de acuerdo a la opción de nuestro menú principal</description>
  12.     <files>
  13.         <filename module="mod_cambiarimagen">mod_cambiarimagen.php</filename>
  14.     </files>
  15.     <params>
  16.         <param name="imagen_default" type="text" default="" label="Imagen por default" description="Imagen por default del header que aparecerá en las secciones de nuestro menú principal" />
  17.     </params>
  18. </mosinstall>

Vamos a explicar brevemente a qué se refiere cada tag:

Dentro de la sección de archivos (files) anotaremos la lista de archivos que conforman el módulo (que son utilizados por el módulo). En este caso, el módulo es mod_cambiarimagen (module="mod_cambiarimagen") y el archivo que utiliza es mod_cambiarimagen.php.

Ahora pasamos a la sección de parámetros (params). Esta parte es muy importante ya que nos permitirá especificar, dentro del administrador de módulos, los valores que deberá recibir el módulo. Vamos con un ejemplo, suponiendo que queremos hacer un módulo para mostrar la fecha de hoy. Al programar el módulo podríamos especificar que la fecha se mostrara con un cierto formato (Por ejemplo: dd/mm/AAAA). Si sólo requerimos ese formato, entonces no será necesario pasarle parámetro alguno. Por otra lado, suponiendo que queremos tener dos opciones de formato (dd/mm/AAAA y AAAA-mm-dd), sería conveniente especificar un parámetro (Ej. con un botón de radio especificar cuál de los formatos vamos a usar) para que el módulo entienda en qué formato deberá mostrar la fecha. De esta forma, nos evitaríamos estar haciendo modificaciones directamente sobre el código del módulo.

Los tipos de parámetros que existen son:

Para nuestro módulo únicamente necesitamos un parámetro de tipo text. El parámetro imagen_default es un campo de texto donde el usuario escribirá la liga a una imagen que servirá como imagen por default en caso de que no exista imagen para una sección en específico.

Hemos terminado con la explicación del archivo XML. Ahora haremos la programación del archivo mod_cambiarimagen.php. Crea un nuevo archivo PHP, guárdalo en el mismo directorio en donde está el archivo XML y ponle de nombre mod_cambiarimagen.php.

Recuerda que dentro del administrador, en la sección de módulos del sitio, el usuario puede establecer el valor de cada uno de los parámetros establecidos en el archivo XML (en nuestro caso solamente utilizamos un parámetro). Para poder obtener dicho valor en nuestro archivo PHP usamos la siguiente instrucción:

Texto Plano
PHP:
  1. $params->get( 'imagen_default', '' );

¿Cómo podemos crear una imagen distinta para cada sección?

Muy fácil. Cada sección en Joomla! es diferenciada por un ID. Cada una de las imágenes de nuestro header pueden tener un nombre en común anidado al número de sección. De esta forma, suponiendo que tenemos la sección "Nuestros clientes" cuyo id es 64, su imagen de header podría ser header_related_64.jpg. La imagen por default y cada una de las imágenes de nuestras secciones deberás guardarlas en una carpeta llamada images en el directorio raíz donde está instalado Joomla! (En donde se encuentran los archivos configuration.php, pathway.php, offline.php, etc.).

¿Cómo podemos saber el ID de cada una de nuestras secciones?

Más fácil aún. En el administrador de nuestro sitio, en la parte de administrador de Menú (Menú Manager, Menu -> mainmenu) tenemos una lista de las secciones de nuestro menú; dentro de esta lista está una columna de nombre Itemid. Esta columna nos indica el ID de cada una de las secciones de nuestro menú.

Imagen 1: Menu Manager

¿Cómo podemos obtener el número de ID dentro del código de nuestro módulo?

Este ID podemos obtenerlo con la siguiente instrucción:

Texto Plano
PHP:
  1. $cid = intval( mosGetParam( $_REQUEST, 'Itemid', null ) );

¿Qué pasa si el administrador no subió una imagen de X categoría?

Para eso utilizaremos la función file_exists de PHP:

Texto Plano
PHP:
  1. if (file_exists($imagen))

Si esta función nos regresa el valor de false (no existe imagen) mostraremos la imagen que el usuario puso por default en el administrador.

El código completo de mod_cambiarimagen.php es:

Texto Plano
PHP:
  1. // no direct access
  2. defined( '_VALID_MOS' ) or die( 'Restricted access' );
  3.  
  4. $cid = intval( mosGetParam( $_REQUEST, 'Itemid', null ) );
  5. $default_image = 'images/' . $params->get( 'imagen_default', '' );
  6. $imagen = 'images/header_related_' . $cid . '.png';
  7.  
  8. if (file_exists($imagen))
  9.      echo '<a href="index.html" target="_self"><img src="' . $mosConfig_live_site . '/' . $imagen . '" border="0" alt="" /></a>';
  10. else
  11.      echo '<a href="index.html" target="_self"><img src="' . $mosConfig_live_site . '/' . $default_image . '" border="0" alt="" /></a>';

Cuando tengas los dos archivos terminados, adjúntalos en un zip con el nombre mod_cambiarimagen.zip. Ingresa a tu administrador y haz click en el menú Installers -> Modules.
Donde dice "Install new Modules" haz click en el botón Examinar..., selecciona el zip de tu módulo y haz click en el botón "Upload File & Install". Si todo sale bien te mostrará el mensaje de Success.

Ahora ve al menú Modules -> Site Modules. Al hacer click en el nombre del módulo que acabamos de crear (Cambiar Imagen) verás las propiedades del módulo y los parámetros que recibe.

2:Módulo 'Cambiar Imagen'

En el campo de texto del parámetro "Imagen por default" escribe header_default.jpg o similar y haz click en el botón Save. No olvides subir al directorio images esta imagen que servirá como imagen por defecto.

Nota La posición que especifíques para este módulo depende de ti, asegúrate de que el espacio sea suficiente para el tamaño de tus imágenes. Recuerda que puedes crear nuevas posiciones dentro del administrador de plantillas (Site -> Template Manager -> Module Positions).


Descargar Archivo
Tags: ,
Joomla!

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por Carla Macías el Septiembre 22, 2008 @ 5:45 pm

Muchas gracias, Mauricio.

Saludos.

  Comentario por Mauricio Aguilera el Septiembre 22, 2008 @ 4:20 pm

genial, sencillo y potente, te pasaste Carla... Felicidades

  Comentario por Carla Macías el Agosto 17, 2008 @ 1:55 pm

Hola Javier,

Gracias por tus felicitaciones.
Me parece que los temas rhuk_solarflare_ii y madeyourweb no utilizan la posición header; es decir, no tienen la instrucción de PHP para cargar el módulo que se encuentra en la posición header. Para probar lo anterior busca el archivo index.php en la carpeta del template rhuk_solarflare_ii. A ese archivo agrégale la instrucción:

Texto Plano
PHP:
  1. <?php mosLoadModules ( 'header' ); ?>


inmediatamente después del tag:

Texto Plano
HTML:

.
Si todo sale bien la imagen se mostrará.

Te recomiendo que, si estás creando o tienes un tema hecho por ti, añadas una nueva posición en el administrador de Joomla! y en el index.php de tu tema indiques esta nueva posición con la instrucción de PHP que te puse más arriba. De esta forma, podrás jugar con los divs y la hoja de estilos de tu template para posicionar y mostrar tu header como mejor te guste.

Saludos.

  Comentario por javier el Agosto 17, 2008 @ 7:13 am

hola, muy bueno el tutorial. la verdad es que llevo tiempo buscando algo asi y no encontraba mucha informacion. Tengo 1 duda: el modulo funciona al 100 por cien, pero en el caso de que le ponga como posicion "header", no se ve ninguna imagen. En cambio en cualquier otra posicion si que se ven las imagenes. He probado con los 3 temas que vienen por defecto en la version de joomla 1.0.15 y no consigo que se vean las imagenes en la posicion header. Tienes alguna sugerencia que me puedas hacer.

muchas gracias y felicidades por el articulo

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)