21 de abril de 2010

Cambio de pasaimagen con botonera de menu

Photoslide GK2 es un componente para joomla 1.5x elaborado por GavickPro en el que puedes crear una pasa imágenes muy atractivo hoy se me ocurría dar unos consejos de como se puede hace para crear un pasa imágenes como cabecera con este componente.

Primero descargate Photoslide necesitas estar registrado para descargártelo si no estas aun hazlo aqui.

El paquete que has descargado descomprímelo, dentro de la carpeta componente se encuentra com_gk2_photoslide.zip este es el componente que tienes que instalar en tu joomla.
luego en la carpeta modules también instala el modulo mod_gk_news_image_1.zip.

Ya tienes instalado tu componente y modulo para hacer el pasa imágenes ahora lo que tienes que hacer es:
ir al panel de control de joomla en la persiana componentes tiene que aparecer Gravick Photoslide GK2 ingresa ahí.
Luego en la parte superior derecha tiene q haber un botón que dice Add group este va a permitir crear un grupo de imágenes para mostrar con tu pasa imagen dale click a este.

aquí tienes que completar:

Group name: este es el nombre que va a identificar el grupo de fotos(este nombre va a ser el que selecciones en el modulo que instalaste).
Images quality (0-100): por ej 75 %
Image width:El ancho que quieres que se vean las imágenes
Image height:El alto que quieres que se vean las imágenes
Thumbnail width:Ancho de las miniaturas de foto
Thumbnail height:Alto de las miniaturas de foto
Background color:Color de fondo.
Title color:Color del titulo de la foto .
Text color:Color del texto de descripción de la foto.
Link color:Color de los links en el texto.
Hover link color:Color del link cuando posicionas el ratón sobre el.

Ahora presiona aplicar en la parte superior derecha.

Lo que sigue es ingresar al grupo que has creado(se identifica con el nombre que le pusiste).

Ya dentro del grupo en la parte superior derecha selecciona add Slide para agregar fotos al grupo.

aquí te pedirá :

Name: Nombre de la foto(casi siempre les voy poniendo FOTO1, FOTO2 puede ser cualquier nombre)
Image: Sube la imagen de tu PC al servidor
Access level:Puede ser Publico, Registrado o especial
Title:Titulo de la imagen.
Text:Descripcion de la imagen(si deseas no poner descripción te recomiendo que des un espacio aquí así te reconocerá como carácter a mostrar el “ ”  ya que sino pones espacio te tomara el texto del articulo que seleccionadas mas abajo)
Link type:  Puede ser un link puesto por ti o el link vinculado al articulo que seleccionas mas abajo   
Link value: Link elegido por ti   
Article: Articulo para vincular en Link type.
Wordcount: Cantidad de palabras.    
Image stretch: Imagen de estiramiento.

Listo ya tenemos nuestro grupo de imágenes ahora puedes agregar tantas imágenes como quieras al grupo ponle de nombre GRUPO1.

Crea otro grupo agrégale las fotos q quieras ponle de nombre GRUPO2.

Ahora vamos a Extensiones ->administrador de módulos en el panel de control de joomla y creamos dos nuevos módulos del tipo Gavick News Image I ( que hoy lo instalamos con mod_gk_news_image_1.zip recuerdas) con los nombres PASAIMAGEN1 y PASAIMAGEN2.

en sus opciones tenemos un largo etc. los remito a la documentación del componente para mas información descarga este .pdf que lo explica en la pag 16 pero lo mas importante para destacarles es que en "Slides group" es donde se selecciona el grupo de imágenes que habías creado .
Selecciona en PASAIMAGEN1 ->GRUPO1 y en PASAIMAGEN2 ->GRUPO2.

Ya tienes asignado el pasa imagen a cada uno de sus módulos ahora lo que hay que hacer es que cuando por ejemplo alguien haga clic en un botón de una botonera si este pasa imagen se encuentra ubicado en la cabecera cambie en función del botón que se ha seleccionado.

Como se haría esto, primero voy a la carpeta templates en donde tengo instalado mi joomla, y edito el archivo templateDetails.xml

entre las etiquetas positions( ) agrego dos nuevas posiciones.

<positions> 
    <position>pasaimagen1</position> 
    <position>pasaimagen2</position> 
</positions> 

Ahora voy a el panel de joomla en Contenidos->Administrador de artículos creo un nuevo articulo le pongo en Sección “Sin Sección asignada” con en titulo PASAIMAGEN1 y guardo.
Creo otro nuevo de la misma forma pero ahora con el nombre PASAIMAGEN2.

Ahora voy a el panel de joomla Menús->Administrador de menús creo un nuevo menús con dos botones.
A un botón le pongo de nombre "muestra imágenes 1" y le asigno el articulo ->PASAIMAGEN1 luego creo otro botón con el nombre "muestra imágenes 2" y le asigno el articulo ->PASAIMAGEN2.

Muestro la botonera con un modulo en la pagina principal.

Ahora voy a tener que editar el index.php del template con el que esta corriendo mi joomla.
primero voy a la carpeta templates en donde tengo instalado mi joomla, y edito el archivo index.php

Supongamos que el modulo de el pasa imagen va a estar el la cabecera entonces
tenemos que tener creado un en el que va a estar la cabecera por ejemplo veamos este trozo de código

<div class="division_top"></div>
 
<div class="cabecera"></div>

<div class="division_bottom"></div>

<div id="botones"><jdoc:include type="modules" name="botonera" /></div>

<div id="my_contenido"><jdoc:include type="component" /></div>

<div id="foter"><jdoc:include type="modules" name="pie" /></div>

agregamos un condicional if de esta forma:

<div class="division_top"></div>

<?php if ($this->title == "PASAIMAGEN1") { ?>

<div class="cabecera"><jdoc:include type="modules" name="pasaimagen1" style="xhtml" /></div>

<?php } elseif ($this->title == "PASAIMAGEN2") { ?>

<div class="cabecera"><jdoc:include type="modules" name="pasaimagen2" style="xhtml" /></div>

<?php }?>

<div class="division_bottom"></div>

<div id="botones"><jdoc:include type="modules" name="botonera" /></div>

<div id="my_contenido"><jdoc:include type="component" /></div>

<div id="foter"><jdoc:include type="modules" name="pie" /></div>

De esta forma podemos variar la cabecera en función del botón del menú que se presione.
Bueno ya tenemos una cabecera dinámica con pasa imágenes. :)

No hay comentarios:

Publicar un comentario