Template Configurable
Propiedades de configuración, Contenedores disponibles, parámetros que recibe.
Contenedores disponibles
Todo Theme de Saga Suite debe disponer de una plantilla configurable que nos va a permitir modelar distintos tipos de páginas a 1, 2 o 3 columnas.
Los nombres y tipos de los contenedores son estándares para todo Saga Suite para permitir la compatibilidad entre los distintos themes, por ejemplo, para un futuro cambio de theme.
En la siguiente tabla vemos la lista de los contenedores disponibles:
| Nombre | Tipo | Descripción |
|---|---|---|
| header-container | header | Contenedor superior sin ancho establecido, es decir, se expande al 100% del tamaño de la pantalla. |
| header-container-inf | content-full | Contenedor de cabecera con ancho fijo definido en CSS donde podremos poner algunos elementos como un menú superior, un banner, un carusel o slider. Normalmente es como una segunda cabecera. |
| sub-header-container | content-wide | Contenedor destinado, al igual que el anterior a añadir un banner destacado, un carusel o un slider pero en este caso que ocupe el ancho completo |
| content-sup | content | Zona destinada para añadir contenido en la zona central, por encima del contenido principal, para dar más información a dicha zona. Los usos más típicos: Rastro de migas, Banners superiores, menú para contenidos con mucha profundidad. |
| content-prin | content | Bloque de contenido principal, que es el utilizado para los detalles de recursos. Ocupa toda la columna central y debe ser usado para alojar el contenido principal de cada página. |
| content-inf | content | Bloque inferior donde podemos añadir normalmente cajas de contenido relacionado con el principal, por ejemplo, compartir en redes sociales, contenidos relacionados, etc. |
| aside-1-content | column | Columna de la izquierda. Esta columna es configurable mediante una propiedad de OpenCms con el que podemos definir tanto su ancho como si es visible o no. Zona destinada conmunmente para un menú de navegación y para banners. |
| aside-3-content | column | Columna de la derecha. Esta columna es configurable mediante una propiedad de OpenCms con el que podemos definir tanto su ancho como si es visible o no. Zona destinada normalmente para banners, accesos directos, encuestas, menú por categorías, etc. |
| footer-container-pre | content-full | Bloque en el pie que coje e, ancho fijo definido en la CSS donde podemos añadir infomación menos relevante de nuestro portal pero que queramos que esté disponible en todas nuestras páginas |
| footer-container | content-wide |
Bloque más inferior de todos que ocupa el 100% de la página y que se suele aplicar para dar un color de fondo distinto para cerrar la página. Normalmente se utiliza para añadir un texto de Copiright, avisos legales, versión, etc. |
Propiedades de configuración
El template que hemos creado para Saga Suite es totalmente configurable por medio de propiedades. Podremos por tanto configurar una página a 1, 2 o 3 columnas y modificar los anchos de cada una gracias a sistema de grid de Bootstrap. Esto nos permite que con un solo template podamos dar solución a muchas configuraciones de páginas distintas.
El ancho total que define bootstrap en su sistema es de 12 bloques. Por lo tanto, un tema a tener en cuenta es que cuando hagamos una configuración de columnas, el total de los anchos debe ser de 12. Podemos optar por distintas configuraciones, por ejemplo:
- 3-6-3
- 2-8-2
- 4-8
- 8-4
- 6-6
- 4-4-4
A continuación enumeramos las distintas propiedades que hemos definido en Saga Suite para conseguir esta configuración:
| Propiedad | Valores | Descripción |
|---|---|---|
| sagasuite.col-izq-visible | true | false | Booleano que nos indica si la columna de la izquierda es o no visible. |
| sagasuite.col-dcha-visible | true | false | Booleano que nos indica si la columna de la derecha es o no visible. |
| sagasuite.columns.width_col1 | 1-12 |
Ancho en bloques de la columna de la izquierda. En el caso que la columna no sea visible se ignorará dicho valor. |
| sagasuite.columns.width_col2 | 1-12 | Ancho en bloques de la columna de la central. En el caso que no se defina ni columna izquierda ni derecha, se cogerá 12 automáticamente |
| sagasuite.columns.width_col3 | 1-12 | Ancho en bloques de la columna de la derecha. En el caso que la columna no sea visible se ignorará dicho valor. |
| sagasuite.skin | String | Nombre del skin que vamos a utilizar. Si no se desea utilizar ningún skin dejar en blanco, se cogerá el estilo por defecto del theme. |
| sagasuite.template | String | Nombre del template que queremos usar. Si no se especifica nada, por defecto cogeremos el template "default.jsp" del theme seleccionado |
| sagasuite.editable | true | false |
Booleano que activa o desactiva las dianas de edición directa (ADE). |
| sagasuite.analytics | Path |
Ruta del archivo javascript que se carga con el objetivo de incluir el código de seguimiento de Google Analytics. Por defecto se carga el archivo "analytics.js" que se crea en el raíz del Site, pero puede definirse la ruta a otro js mediante esta property desde cualquier container page o carpeta de OpenCms. |
| sagasuite.js | Path |
Ruta del archivo javascript que se desee cargar con esta property para cualquier container page o carpeta de OpenCms. |
| sagasuite.css | Path |
Ruta del archivo css que se desee cargar con esta property para cualquier container page o carpeta de OpenCms. |
| sagasuite.metas | Path |
Ruta del archivo .src que se carga en el head con los metas de la página. Por defecto se carga el archivo "metas.src" que se crea en el raíz del Site, pero puede definirse la ruta a otro .src mediante esta property desde cualquier container page o carpeta de OpenCms. |
Parámetros de entrada
Tal y como hemos explicado en el cargador de themes, el template por defeto es uno llamado load-themeconfig.jsp, el cual se encarga de leer el fichero de configuración y las propiedades por defecto de Saga Suite y genera las variables que luego podremos usar en nuestros templates y formatters.
A continuación mostraremos las varibles que genera dentro del contexto 'request' por lo tanto las tendremos disponibles en todas la página, tanto template como formatters.
| Parámetro | Propiedad | Descripción |
|---|---|---|
| col_izq | sagasuite.col-izq-visible | Visibilidad de la columna. |
| col_dcha | sagasuite.col-dcha-visible | Visibilidad de la columna. |
| width_col1 | sagasuite.columns.width_col1 | Ancho de la columna |
| width_col2 | sagasuite.columns.width_col2 | Ancho de la columna |
| width_col3 | sagasuite.columns.width_col3 | Ancho de la columna |
| cont_width_1 | - | width_col1 * 100 |
| cont_width_2 | - | width_col2 * 100 |
| cont_width_3 | - | width_col3 * 100 |
| skin | sagasuite.skin | Nombre del skin |
| edit | sagasuite.editable | Booleano que indica si es editable o no la página |
| theme | sgthemeconfig - Theme | Nombre del theme utilizado |
| multilocale | sgthemeconfig - Multilocale | Booleano que indica si la web es multiidioma |
| template | sagasuite.template | Nombre del template configurado |
| descriptionpage | Description | Lee la propiedad Description de la pagina de detalle si existe o del containerpage actual en su defecto. |
| keywordspage | Keyword | Lee la propiedad Keywords de la pagina de detalle si existe o del containerpage actual en su defecto. |
