Joomla 1.5: galera de imgenes rotatorias

Qu es una galera de imgenes rotatoria

Muchos sitios web colocan en su pgina principal un recuadro en el que van rotando automticamente imgenes, por ejemplo, con sus principales productos.

Extensiones gratuitas

En el market oficial de Joomla! encontramos numerosas extensiones gratuitas que hacen justamente esto:ShowMB Template Slide

AnimateHover

Kupo Slides

Unique Gallery

Extensiones gratuitas: ShowMB

Extensiones gratuitas: Animate Hover

Extensiones gratuitas: Kupo Slides

Instalamos la extensin

Nos hemos quedado con ShowMB

Descargamos la extensin y la instalamos

Accedemos Extensiones/ Gestor de mdulos/ ShowMB y lo configuramos

Error al intentar instalar el mdulo:
Fallo al mover el archivo!

Puede ocurrirnos que, al intentar instalar el mdulo nos de el error Fallo al mover el archivo!

Se trata de un problema de directorios, veamos cmo resolverlo

Error al intentar instalar el mdulo:
Fallo al mover el archivo!

Comprobamos en Ayuda/ Sistema/ Permisos sobre directorios

Si aparece que los directorios no son escribibles, efectivamente hemos localizado el problema

Error al intentar instalar el mdulo:
Fallo al mover el archivo!

Efectivamente, desde la shell comprobamos que las carpetas enumeradas como no escribibles no tienen permiso de escritura para el resto

Error al intentar instalar el mdulo:
solucin

Como se trata de una instalacin local, podemos resolver simplemente dando todos los permisoschmod - -recursive 777

Refrescamos la pantalla de permisos de directorios:

Error al intentar instalar el mdulo:
solucin

Y ahora s que podemos instalar el mdulo

Elegimos posicin

En el frontend, para elegir la posicin en la que queremos mostrarlo, le decimos al Joomla que nos muestre los nombres de las posiciones

Para ello, escribimos en un navegador:http:///index.php?tp=1

Con esto conseguimos que nos muestre junto a cada rea de visualizacin, el nombre de ese rea.

Elegimos posicin

Elegimos posicin

En nuestro caso nos gustara mostrarnos en el lugar en el que se muestra la foto principal, pero este rea NO tiene un nombre asignado para Joomla

As que de momento nos conformaremos con mostrarlo justo debajo, el rea que en mi plantilla se llama breadcrumb

Resultado

Configuracin del mdulo

Tamao: altoTtulos de las imgenesColor de fondo de la galeraDescripcin de las imgenesImgenes que muestra

Resultado

Hemos cargado nuestras propias imgenes

Crear un rea en la plantilla

Qu quiero hacer?

Quiero crear un nuevo rea en la plantilla de trabajo

Ahora mismo, mi galera de imgenes rotatorias se muestra en la zona reservada para los artculos breadcrumb

Quisiera crear un nuevo rea sobre la plantilla justo donde est la imagen principal.

En otras plantillas este rea se llama user3.

Luego, en la configuracin del mdulo de imgenes rotatorias establecera user3 como rea en la que debe posicionarse.

Qu quiero hacer?

Crear un rea horizontal de cabeceraEn otras plantillas se llama user3Estara justo donde la imagen principal

Ficheros de nuestra plantilla

Los ficheros que debemos modificar estn todos bajo la ruta:/ templates/ /

Los ficheros que modificaremos son:index.php

templateDetails.xml

css/template.css

El fichero index.php es el responsable de mostrar los elementos de nuestra plantilla en el lugar adecua2do, de definir las reas, de definir el rea principal,...

Editamos el archivo

Localizamos el rea que muestra el componente principal

Qu son las posiciones de mdulos?

En una plantilla simple, nos encontramos con las siguientes reas o posiciones:

Qu son las posiciones de mdulos?

En una plantilla ms elaborada tendramos:

reas existentes

Las reas para mdulos son un trozo de cdigo PHP con el siguiente aspecto:

Si nos fijamos en el cdigo de index.php podremos ver cmo se van aadiendo las diferentes reas:

reas existentes

As, si recorremos el cdigo de index.php podemos ver todas las reas que hay definidas.

En el backend, cuando vamos a ubicar nuestro nuevo mdulo, nos ofrece las reas que aqu vemos.

Adems, antes de definir un rea, lo encierra en un condicional if contando el nmero de mdulos definidos en ella, porque si es 0 NO la muestra

Crear un nuevo rea

Vamos a crear dos reas nuevas, una que llamaremos contlenttop y otra que llamaremos top

contenttop estar justo encima del rea principal (component area)

top estar justo debajo del men horizontal, ocupando todo su ancho

Para ello, editamos el fichero index.php y aadimos estas dos lneas:

Crear un nuevo rea

En templateDetails.xml agregamos estas dos nuevas posiciones

Resultado

Si mostramos las reas existentes, tenemos:

Nueva rea topNueva rea contenttop

Resultado

Si vamos al men de configuracin del mdulo, veremos que en el parmetro posicin nos aparecen las dos reas que hemos creado.

Activamos el mdulo en el rea top

Ahora aparecen las dos nuevas reas: top y contenttop

Resultado

Como vemos, efectivamente se coloca sobre el rea top pero sobreescribe todo el contenido de la pgina y que se coloca sobre la imagen principal, lo cual produce un aspecto desordenado y sucio

A continuacin veremos cmo resolver este nuevo problema

Establecer alto automtico

index.php: Nuestra rea est embebida dentro de una capa que se llama h_area

capa h_areasta es nuestra nueva rea,que hemos llamado top

capa main_bg o banner1

Establecer alto automtico

En el fichero template.css vemos que h_area tiene definido un alto de 275px

Eliminamos esa lnea para que tome el alto de forma automtica

Eliminar imagen de fondo

En el fichero template.css la imagen est establecida como fondo de la capa banner1, que es la misma que main_bg, sobre la que se encuentra nuestro componente.

Eliminamos esta lnea

Resultado

Resultado usando otro componente:
Unique Gallery

/