Miércoles, 29 Marzo 2017

Template override Modulo Banners, Vista WordPress

Contenido[Ocultar]
La primera redefinicion (Override) que vamos a ver surge de una pregunta realizada en el foro, sobre como mostrar banners como se suelen mostrar en desarrollos wordpress, vean el enlace pregunta Foro solojoomla.Lo que vamos a hacer es utilizar el modulo banners para la adaptacion del mismo para nuestra plantilla, sea cual sea y poder mostrar banners de 120x120 o 125x125 con una separacion entre si y a dos columnas...

Esto se puede hacer facilmente con el modulo 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 125x125, 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 firebugcomo 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.

Uso de Firebug

Siendo mod_banners la carpeta donde se encuentra los archivos del modulo banners. Editamos y miramos lo que se encuentra en las lineas <div class="...., dentro de etiquetas xhtml <div>... </div> ahi encontraremos como son llamadas las claeses que utiliza. Con firebug es aun mas facil, simplemente, activando firebug y situandonos encima de la imagen del banner nos mostrara la clase para banner llamada "banneritem" que pertenece al contenedor y dentro del mismo observaremos la ruta de la imagen en cuestion. Todo agrupado dentro de otra clase llamada "bannergroup". Si nos dirijimos al archivo defalut.php anteriormente citado observaran que son las mismas clases que estan escritas en ese archivo.

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;
}
A tener en cuenta el echo de que si ya tenemos un estilo definido para el modulo banners dentro del template que ultilizamos, lo cual es bastante probable, anularemos el codigo de la siguiente manera, siendo este una posible definicion del estilo.

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


Lo reempalzaremos asi


/* Default skyscraper style */
/*.bannergroup {
}
.banneritem img {
display: block;
margin-left: auto;
margin-right: auto;
}
*/
Observen que lo unico que se ha echo es añadir /* al inicio y */ al final, anulando asi el estilo definido.
Bien, ya tenemos la vista tipo wordpress y todo en orden. Pero nada de esto tiene que ver con la tecnica Template overrides.

Dar formato vista anuncios tipo WordPress

Ahora si, para poder dar rienda suelta a nuestra imaginacion, vamos a ver como poder darle la forma que tienen las paginas realizadas con WordPress en la vista de los banners incluyendo el famosillo, por decirlo de alguna manera, "Espacio libre - Anuniarse Aqui" cuando no hay ningun anunciante y que esa imagen se coloque de forma automatica, sin que tengamos que edtar nada, como sucede cuando lo hacemos personalizando un modulo HTML.
Apuntar que la idea es sacada de la web monito joomla de la visualizacion de un video de youtube el cual agradezco y visito por sus practicos video tutoriales. Dicho esto, paso a explicar en forma de texto, como en mi es habitual, la tecnica template overrides para incluir la imagen comentada en el caso de no disponer de anunciante.

Vamos ir a la carpeta /modules con nuestro cliente FTP, que contiene todos los modulos que se incluyen en la instalacion joomla y los que posteriormente hemos ido instalando. El modulo banners es llamado mod_banners. Localizado lo descargamos en nuestro ordenador para trabajar mas comodamente.

Accedemos a la carpeta del modulo mod_banners y observaremos que hay una carpeta llamada /tmpl, abreviatura de template. Como punto aclaratorio, les comento que todos los modulos joomla 1.5 inlcuyen esa carpeta y como definicion de la accion de redefinir, explico que Joomla al generar una url, hace primero un reconocimiento de la plantilla en uso de nuestra web buscando una posible redefinición que se haya generado de alguna de las extensiones componentes y modulos, dando prioridad a la misma.

La carpeta /tmpl que nos hemos descargado junto al modulo banners, debe ser insertada dentro de la carpeta /html de la plantilla que tengamos como predeterminada y por tanto en uso, para asi cerrrar el primer paso de la tecnica template overrides, la cual consiste en eso mismo, copiar esa carpeta /tmpl dentro de la carpeta /html de la plantilla en uso. En el caso de no disponer de la carpeta /html, simplemente la crearemos desde el mismo cliente FTP, haciendo clic con el boton derecho de nuestro raton en el espacio donde se encuentra la carpeta raiz de nuetsro template, y haciendo clic en crear directorio, aparecera una ventana con la ruta y el nombre Nuevo directorio, el cual reemplazaremos con html, y aceptar.

Una vez pegada la carpeta /tmpl deberemos renombrarla con el mismo nombre del modulo en cuestion, en este caso mod_banners. A partir de aqui podemos empezar a añadir funciones al mismo.

El archivo que deberemos editar y que esta en la carpeta renombrada como mod_banners es el archivo default.php. La parte que esta relacionada es la que hace referencia a la vista de impresion, la cual les muestro a continuacion y facilmente identificable en el archivo, siendo la variable $list lo que debemos tener en cuenta.

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


Añadiendo el siguiente codigo, 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 sitiolibre segun convenga.
Les muestro el codigo completo del archivo default.php de una web a la cual se le ha aplicado esta tecnica template overrides, 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.

Banners estilo WordPress

Espero les haya sido de ayuda.

Consultor y Desarrollador Proyectos Web
lorenzo
Author: lorenzo
Sobre mi...
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Solojoomla, un lugar donde encontrar ayuda para realizar tus proyectos en la red. Con Foro de ayuda gratuita y formularios para contratación de servicios ....

Videos Turtoriales de ayuda Joomla, WordPress, Less, Css...

Portafolio webs Joomla, Wordpress, HTML5..