View
1.341
Download
0
Category
Preview:
Citation preview
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
/
Recommended