Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 1 -

Guía Saga Suite Galería de Imágenes

Tabla de contenido Acceso a la Edición del recurso ........................................................................................................... - 2 -

Cómo editar el recurso ........................................................................................................................ - 3 -

Pestaña Contenido .......................................................................................................................... - 3 -

Pestaña etiquetas ............................................................................................................................ - 5 -

Formatters disponibles y sus settings .................................................................................................. - 7 -

Formatter por defecto ..................................................................................................................... - 8 -

Estos son los settings disponibles para el Formatter por defecto (y para todos los demás) del

recurso: ....................................................................................................................................... - 8 -

Formatter BX Slider ......................................................................................................................... - 8 -

Formatter mixto con slider en la zona superior .............................................................................. - 9 -

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 2 -

Guía de edición del Recurso Destacado

El recurso de galería de imágenes nos permite crear bloques con formato caja que cargan

automáticamente todas las imágenes contenidas en una galería de imágenes de OpenCms. Tiene 3

formatters diferentes para mostrar el contenido: Imágenes en cuadrícula, en Slider y un formato

mixto de los dos anteriores.

Acceso a la Edición del recurso

Debemos seleccionar la vista de “Default” en la web para que al hacer click en la varita se despliegue

la lista de recursos de contenido básico.

Una vez en esta vista desplegamos con la varita mágica todos los tipos de recursos que tenemos

disponibles para arrastrar a la página, elegimos el tipo “Galería de Imágenes” y lo arrastramos a la

página:

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 3 -

Cómo editar el recurso

Para modificar un nuevo recurso disponemos de la diana de edición en el extremo superior

derecho del recurso. Si pasamos el ratón por dicha diana veremos la opción Edit. Entonces, aparece la

pantalla con el formulario de edición del recurso.

Nos encontramos dos pestañas que agrupan campos: “Contenido” y “Etiquetas”. La primera gestiona

el contenido principal del recurso y la segunda gestiona los mensajes para la paginación sobre todo:

informe de resultados, título de los enlaces para cambiar de página… etc.

Pestaña Contenido

Estos son los campos que encontramos en esta pestaña:

1. Título: Es el título que se mostrará en página.

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 4 -

2. ID: El id del recurso. Es muy importante de cara al funcionamiento correcto del javascript

asociado y para la paginación. Debemos dar siempre un id específico al recurso. Si tenemos

dos recursos de este tipo en la misma página y tienen ambos el mismo id vamos a tener

problemas de javascript y un mal funcionamiento de la paginación.

3. Subtítulo: Es el subtítulo que se mostrará en página.

4. Date: Fecha del recurso (sólo se utiliza para listados de galerías de imágenes).

5. Description: Texto que se mostrará por encima del bloque con las imágenes.

Aquí vemos cómo quedaría sólo editando estos campos:

6. Imagen Representativa: se trata de la imagen a mostrar en el elemento cuando aparezca en

un listado. Si no se va a listar el recurso no es necesario editar este campo.

7. Teaser: se trata de la descripción a mostrar en el elemento cuando aparezca en un listado. Si

no se va a listar el recurso no es necesario editar este campo.

8. Carpeta de imágenes: En este campo vamos a seleccionar la Galería de Imágenes de OpenCms

de la que queremos mostrar las imágenes contenidas. Sólo hay que hacer click en el icono de

“carpeta” situado a la derecha del campo y accedemos a la lista de las galerías disponibles.

Cuando encontremos la deseada hacemos click en el icono de “check”:

9. Número de imágenes por fila: aquí definimos cuantas imágenes por fila vamos a mostrar en

nuestra cuadrícula de thumbnails.

10. Número de imágenes por página: Definimos el número de imágenes por página.

11. Número máximo de imágenes: definimos el total de imágenes a mostrar.

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 5 -

12. Tamaño de navegación: si activamos la paginación aquí definimos el número de enlaces

directos a página de la misma.

13. Mostrar paginación: si marcamos este checkbox mostraremos la paginación (lógicamente,

siempre que el número total de imágenes sea superior al número de imágenes por página

definido anteriormente).

14. Mostrar informe de resultados: si marcamos este checkbox mostraremos el informe. El texto

del mismo se edita en la segunda pestaña de campos del recurso (“etiquetas”). Se trata del

típico texto de “Mostrando de la 1 a la 14 de un total de 140 imágenes”, por ejemplo.

Pestaña etiquetas

Aquí definimos todos estos mensajes:

Sólo destacar que en el campo de “Informe de resultados” se utilizan macros:

1. !(firstresult): se trata del número de la primera imagen de la página que estemos viendo.

2. !(lastresult): se trata del número de la última imagen de la página que estemos viendo.

3. !(resultsize): se trata del número total de imágenes.

Lo único que hay que hacer es incluirlos en nuestro texto donde deseemos.

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 6 -

Basándonos en el contenido y la configuración de este recurso de Galería de Imágenes, éste sería el

resultado en página:

Si hacemos click sobre cualquiera de las imágenes nos carga la imagen a su tamaño original en un

diálogo:

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 7 -

Si configuramos el número de imágenes por página más bajo para que se cargue la paginación

obtenemos esto:

Formatters disponibles y sus settings

Los settings son ajustes que se aplican al recurso sólo para la página contenedora a la que son

arrastrados. Si arrastras un recurso a una página, por ejemplo la home, y configuras sus settings de

una forma determinada, cuando vuelvas a arrastrar el mismo recurso a otra página, esos settings

tendrán los valores por defecto.

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 8 -

Formatter por defecto

Estos son los settings disponibles para el Formatter por defecto (y para todos los

demás) del recurso:

1. Hide title: Si se marca esta casilla no se mostrará el título del recurso en la página.

2. Tipo de encabezado: podemos elegir qué tipo de elemento html va a ser nuestro

encabezado/título: h1, h2, h3… etc. de manera que sea mucho más fácil mantener la

semántica, la conformidad con los estándares y el posicionamiento SEO.

3. Clase css del contenedor principal: Podemos definir una clase css para el contenedor del

recurso (sólo para esta página), de modo que podremos definir reglas de estilo específicas

para este bloque y sólo para esta página.

4. Margen inferior: podemos seleccionar un margen inferior para nuestro recurso.

5. Show in devices: Podemos decidir si nuestro recurso se mostrará en esta página para todos o

sólo algunos de los dispositivos disponibles:

a. Desktop: El recurso se mostrará en ordenadores de sobremesa y portátiles.

b. Tablet: El recurso se mostrará en dispositivos Tablet.

c. Mobile: El recurso se mostrará en dispositivos móvil (smartphones).

Formatter BX Slider

Este formatter nos carga las imágenes en un Slider:

Guía Saga Suite Galería de Imágenes

Guía Saga Suite Galería de Imágenes - 9 -

Formatter mixto con slider en la zona superior

Este formatter nos muestra un Carrusel en la zona superior en el que se van cargando las imágenes

cuando hagamos click sobre su thumbnail de la zona inferior: