monitojoomla

Banners mejorados con imágenes y template overrides del módulo banner

Lunes, 30 Agosto 2010 | Escrito por Jhon Marreros Guzman

Detalles Tutorial - Nivel : Intermedio - Avanzado, Versión Joomla : 1.5.x, Formato : texto y video.
En este tutorial veremos cómo mejorar el módulo banner de joomla, implementando imágenes en lugar de texto y además utilizando la técnica de template overrides para mostrar una imagen adicional de: anuncie aqui.

En este primer video se explica la generalidad del ejemplo así como también el paso del texto a imágenes

En este segundo video se mejora la apariencia de las imágenes aplicando CSS y la técnica de template overrides en el modulo banners

Resultado Final

Cambiamos el texto por imágenes

Después de haber creado las categorías, los clientes y los anuncios en texto, procedemos a cambiar el texto de los anuncios a imágenes, borramos el código del anuncio personalizado y ubicamos las imágenes dentro de la carpeta /images/banner para poder seleccionarla, tal como se muestra en la imagen

Modificamos el archivo de estilos

Posteriormente modificamos los estilos para que se muestren las imágenes en columnas, en este caso particular se ajusta a dos columnas debido a la dependencia con el contenedor principal right (el contenedor es de aproximadamente 300px de ancho por lo que sólo entran dos imágenes). El siguiente código debe ser agregado al archivo de estilos de nuestro template.

.bannergroup{
 margin-left: 15px;
}

.banneritem{
 float: left;
 margin: 5px;
}

.clear{
 clear:both;
}

Utilizando la técnica de Template overrides para el módulo banner

Esto se realiza para conseguir que el módulo de banner complete una imagen adicional llamada: anuncia aquí. Copiamos la carpeta de la siguiente ruta: /modules/mod_banners/tmpl hacia la carpeta html dentro de nuestro template, renombramos la carpeta copiada de tmpl a mod_banners, posteriormente editamos el archivo default.php dentro de esta carpeta.

A continuación se muestra el código agregado, el código se agrega después del bucle foreach, en la línea 17 aproximadamente del archivo default.php

<?php if((count($list)%2)!=0): ?>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
<?php else: ?>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
<?php endif; ?>

<div class="clear"></div>

Consideraciones Finales

En el tutorial por video no se muestra el uso de la clase clear en el CSS y tampoco la línea de código adicional (<div class="clear"></div>) en el archivo default.php, pero esto es necesario en la mayoría de los casos para limitar el comportamiento float en los módulos inferiores de nuestro template.

Al descargar el archivo mod_banners.zip, será necesario modificar la ruta de la imagen (lineas 20,24,27) por la ruta de imagen de su template en el archivo default.php

Conclusión

El uso del componente banners y de su módulo respectivo, nos facilita la administración de los anuncios que se publican en nuestro sitio web, y la personalización del módulo banners con la técnica de template overrides nos brinda la flexibilidad de personalización de acuerdo a nuestras necesidades.

• Descargar Imágenes banners
• Descargar mod_banners

Comparte este post