Este documento describe cómo instalar y configurar una galería de imágenes rotatoria en Joomla usando la extensión gratuita ShowMB. Explica cómo resolver errores de permisos al instalar módulos y cómo crear nuevas áreas de posicionamiento en la plantilla para mostrar la galería.

1. 1/36
Joomla 1.5: galería de imágenes
rotatorias

2. 2/36
Qué es una galería de imágenes rotatoria
● Muchos sitios web colocan en su página principal un
recuadro en el que van rotando automáticamente
imágenes, por ejemplo, con sus principales productos.

3. 3/36
Extensiones gratuitas
● En el market oficial de Joomla! encontramos numerosas
extensiones gratuitas que hacen justamente esto:
– ShowMB Template Slide
– AnimateHover
– Kupo Slides
– Unique Gallery

4. 4/36
Extensiones gratuitas: ShowMB

5. 5/36
Extensiones gratuitas: Animate Hover

6. 6/36
Extensiones gratuitas: Kupo Slides

7. 7/36
Instalamos la extensión
● Nos hemos quedado con ShowMB
● Descargamos la extensión y la instalamos
● Accedemos Extensiones/ Gestor de módulos/ ShowMB y
lo configuramos

8. 8/36
Error al intentar instalar el módulo:
¡Fallo al mover el archivo!
● Puede ocurrirnos que, al intentar instalar el módulo nos de
el error ¡Fallo al mover el archivo!
● Se trata de un problema de directorios, veamos cómo
resolverlo

9. 9/36
Error al intentar instalar el módulo:
¡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

10. 10/36
Error al intentar instalar el módulo:
¡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

11. 11/36
Error al intentar instalar el módulo:
solución
● Como se trata de una instalación local, podemos resolver
simplemente dando todos los permisos
– chmod - -recursive 777 <mi_carpeta_joomla>
● Refrescamos la pantalla de permisos de directorios:

12. 12/36
Error al intentar instalar el módulo:
solución
● Y ahora sí que podemos instalar el módulo

13. 13/36
Elegimos posición
● En el frontend, para elegir la posición en la que queremos
mostrarlo, le decimos al Joomla que nos muestre los
nombres de las posiciones
● Para ello, escribimos en un navegador:
– http://<nuestro sitio web>/index.php?tp=1
● Con esto conseguimos que nos muestre junto a cada área
de visualización, el nombre de ese área.

14. 14/36
Elegimos posición

15. 15/36
Elegimos posición
● En nuestro caso nos gustaría 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

16. 16/36
Resultado

17. 17/36
Configuración del módulo
Tamaño: alto
Imágenes
que muestra
Descripción de las imágenes
Títulos de las imágenes
Color de fondo de la galería

18. 18/36
Resultado
● Hemos cargado nuestras propias imágenes

19. 19/36
Crear un área
en la plantilla

20. 20/36
¿Qué quiero hacer?
● Quiero crear un nuevo área en la plantilla de trabajo
● Ahora mismo, mi galería de imágenes rotatorias se
muestra en la zona reservada para los artículos
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 configuración del módulo de imágenes
rotatorias establecería user3 como área en la que debe
posicionarse.

21. 21/36
¿Qué quiero hacer?
Crear un área horizontal de cabecera
En otras plantillas se llama user3
Estaría justo donde la imagen principal

22. 22/36
Ficheros de nuestra plantilla
● Los ficheros que debemos modificar están todos bajo la
ruta:
– <mi sitio web>/ templates/ <mi_plantilla>/
● 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
<jdoc:include type="component" />

23. 23/36
¿Qué son las posiciones de módulos?
● En una plantilla simple, nos encontramos con las
siguientes áreas o posiciones:

24. 24/36
¿Qué son las posiciones de módulos?
● En una plantilla más elaborada tendríamos:

25. 25/36
Áreas existentes
● Las áreas para módulos son un trozo de código PHP con
el siguiente aspecto:
<jdoc:include type="modules" name="left" style="xhtml" />
● Si nos fijamos en el código de index.php podremos ver
cómo se van añadiendo las diferentes áreas:

26. 26/36
Áreas existentes
● Así, si recorremos el código de index.php podemos ver
todas las áreas que hay definidas.
● En el backend, cuando vamos a ubicar nuestro nuevo
módulo, nos ofrece las áreas que aquí vemos.
● Además, antes de definir un
área, lo encierra en un
condicional if contando el
número de módulos definidos
en ella, porque si es 0 NO la
muestra

27. 27/36
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 añadimos estas
dos líneas:

28. 28/36
Crear un nuevo área
● En templateDetails.xml agregamos estas dos nuevas
posiciones

29. 29/36
Resultado
● Si mostramos las áreas existentes, tenemos:
Nueva área top
Nueva área contenttop

30. 30/36
Resultado
● Si vamos al menú de configuración del módulo, veremos
que en el parámetro posición nos aparecen las dos áreas
que hemos creado.
● Activamos el módulo en el área top
Ahora aparecen las dos nuevas
áreas: top y contenttop

31. 31/36
Resultado
● Como vemos, efectivamente se coloca sobre el área top
pero sobreescribe todo el contenido de la página y que se
coloca sobre la imagen principal, lo cual produce un
aspecto desordenado y sucio
● A continuación veremos cómo resolver este nuevo
problema

32. 32/36
Establecer alto automático
● index.php: Nuestra área está embebida dentro de una
capa que se llama h_area capa main_bg o banner1
capa h_area
ésta es nuestra nueva área,
que hemos llamado top

33. 33/36
Establecer alto automático
● En el fichero template.css vemos que h_area tiene
definido un alto de 275px
● Eliminamos esa línea para que tome el alto de forma
automática

34. 34/36
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 línea

35. 35/36
Resultado

36. 36/36
Resultado usando otro componente:
Unique Gallery