Template override Modulo Banners, Vista WordPress

Esto se puede hacer facilmente con el módulo de personalizacion HTML que incluye joomla! pero lo que el usuario pregunta es como poder utilizar el componente y modulo banners para la vista tipo wordpress y su posterior control de impresiones y clics.

Lo primero antes que nada, es generar los anuncios con las imagenes con la medida deseada, que en este caso sera de 125×125, los cuales incluiremos todos en la misma categoria, pudiendo ser de distintos clientes, para luego poder mostrarlos todos en una sola posicion de modulo en nuestra plantilla joomla.

Crearemos entre cuatro y seis maximo ya que un mayor numero cargaria demasiado el diseño y peso de nuestra web y un numero par, para cuadrar la vista y conservar una estetica correcta.

Identificación clases módulo anuncios (banners) joomla con Firebug

Ahora, para ajustar la vista de los banners en nuestra plantilla, tipo wordpress, lo que debemos hacer es identificar las clases del modulo banners, para luego añadir el codigo que nos presentara los mismos en dos columnas, con una separacion entre cada banner dentro del archivo template.css de la plantilla en uso, situado en la carpeta /css.

Alguna vez he mencionado que la herramienta para el navegador Firefox, Firebug nos puede ayudar a identificar, no solo las clases de una extension, si no que son muchas otras las cualidades de esta herramienta. Para aprender a utilizarla, nada mejor que un extenso y agotador tutorial sobre uso de firebug como el de Victor Javier. Pero claro siempre sera mas rapido si les indico cual es el procedimiento rapido. Vean la siguiente imagen con texto que les indico.

Modificar estilos módulo Anuncios Joomla

Conociendo las clases, podemos pasar ya a modificar los estilos dentro del archivo template.css de la plantilla que estamos ultilizando para mostrar los banners en dos columnas y con una separacion adecuada para la vista definitiva. Editamos el archivo template.css de nuestra plantilla y añadiremos el siguiente codigo. Pudiendo cambiar el tamaño de los pixeles segun convenga.

.bannergroup{
 margin-left: 12px;
}
.banneritem{
 float: left;
 margin: 4px;
}

/* Default skyscraper style */
.bannergroup {
}
.banneritem img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

Lo rempalzamos con el siguiente código

/* Default skyscraper style */
/*.bannergroup {
}
.banneritem img {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
*/

Dar formato vista anuncios tipo WordPress

foreach($list as $item) :
 ?><div><?php
 echo modBannersHelper::renderBanner($params, $item);
 ?><div></div>
 </div>
<?php endforeach; ?>

Añadiendo el siguiente código, al final del anterior

<?php if((count($list)%2)!=0): ?>
 <div>
 <img alt="sitio libre" src="http://www.DOMINIO.com/images/banners/sitiolibre.png" width="125" height="125" />
 </div>
 <?php else: ?>
 <div>
 <img alt="sitio libre" src="http://www.DOMINIO.com/images/banners/sitiolibre.png" width="125" height="125" />
 </div>
 <div>
 <img alt="sitio libre" src="http://www.DOMINIO.com/images/banners/sitiolibre.png" width="125" height="125" />
 </div>
 <?php endif; ?>

Ir añadiendo las rutas de imagen Sitio libre según convenga.

Les muestro el código completo del archivo default.php de una web a la cúal se le ha aplicado esta técnica template override, para mostrar los banners al estilo wordpress.

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<div>
<?php if ($headerText) : ?>
 <div><?php echo $headerText ?></div>
<?php endif;
foreach($list as $item) :
?><div><?php
echo modBannersHelper::renderBanner($params, $item);
?><div></div>
</div>
<?php endforeach; ?>
<?php if((count($list)%2)!=0): ?>
<div>
<img alt="sitio libre" src="http://www.ciudadanosyaccion.com/images/banners/sitiolibre.png" width="125" height="125" />
</div>
<?php else: ?>
<div>
<img alt="sitio libre" src="http://www.ciudadanosyaccion.com/images/banners/sitiolibre.png" width="125" height="125" />
</div>
<div>
<img alt="sitio libre" src="http://www.ciudadanosyaccion.com/images/banners/sitiolibre.png" width="125" height="125" />
</div>
<?php endif; ?>
<?php if ($footerText) : ?>
<div>
<?php echo $footerText ?>
</div>
<?php endif; ?>
</div>

Como demostración, una captura rescatada de nuestra antigua plantilla.

Espero les haya sido de ayuda.