Introducción
La extensión Grid Elements transfiere el concepto de backend layouts conocido desde TYPO3 4.5 a los elementos de contenido. Un ejemplo de aplicación común serían los elementos contenedores de varias columnas, en los que los elementos de contenido pueden ser colocados.
En este artículo explicamos la instalación y mostramos un ejemplo de aplicación utilizando un elemento contenedor de 2 columnas.
Nuevas funciones en el módulo de páginas
Grid Elements también aporta algunas funciones nuevas para el módulo de página.
El símbolo más en la parte superior abre un asistente de arrastre, que puede utilizarse para arrastrar y soltar todos los elementos de contenido disponibles en la página.
Hay un nuevo icono en el área de contenido. Aquí puede utilizar el navegador de elementos TYPO3 para copiar contenido de otras páginas directamente a la página actual.
Crear carpeta
Para guardar los elementos de la rejilla que se crearán más tarde en algún lugar, lo mejor es crear una carpeta separada para ellos.
Atención: Si ya ha definido una carpeta para el sitio web como"Recopilación general de conjuntos de datos", ¡los elementos de cuadrícula deben guardarse allí!
Crear elemento de rejilla
Ficha "General
Título: Aquí debe introducir un título para el elemento de la cuadrícula.
Descripción: Aquí puede introducir una descripción opcional.
Visualización: aquí puede definir un icono para el elemento de la cuadrícula. Este icono también será visible posteriormente en el backend. Esto es útil cuando se utilizan varios elementos de rejilla para visualizar la función.
Ficha "Configuración
Diseño de nivel superior: los elementos de la rejilla también pueden anidarse unos dentro de otros. Si marca esta casilla, el elemento de rejilla marcado de este modo no podrá subordinarse a otros elementos de rejilla.
Configuración de larejilla: Es el elemento central de la configuración. Aquí se define la disposición del elemento de la rejilla. Para ello, haga clic en el icono situado a la derecha del campo. Se abre el asistente de rejilla. El funcionamiento es prácticamente idéntico al de la creación de diseños de backend.
Asistente de cuadrícula
Puede utilizar el Asistente de cuadrícula para definir el diseño.
Puede añadir y eliminar columnas o filas adicionales utilizando las flechas pequeñas del borde derecho e inferior. Las flechas grises más grandes de las celdas pueden utilizarse para enlazar varias celdas entre sí.
A continuación, haga clic en el icono del lápiz situado junto a cada celda para seguir configurando las celdas individuales.
Definir nombre de celda y número de columna
Asigne a cada celda un nombre significativo. Esto también será visible más adelante en el módulo de página.
Además, cada celda debe tener un número de columna único (ID). Esto se utiliza para definir la salida de la celda más tarde a través de Typoscript.
En el área "CE permitido ", puede restringir los tipos de elementos de contenido que pueden almacenarse en la celda. Si no selecciona nada aquí, se permitirán todos los elementos de contenido disponibles para el usuario backend correspondiente.
A continuación, haga clic en "Guardar en celda".
Para cerrar el asistente de cuadrícula, haga clic en el icono "Guardar y cerrar" de la parte superior.
Una vez que haya guardado y cerrado el Asistente de rejilla, verá la configuración que acaba de crear en el campo "Configuración de rejilla".
En principio, se trata de un Typoscript normal, que también puede editarse manualmente. Así, si desea cambiar el nombre o el ID (colPos) de una celda, por ejemplo, puede hacerlo directamente en este campo sin tener que iniciar de nuevo el Asistente de rejilla.
Configurar la salida del elemento de cuadrícula mediante Typoscript
Aunque el contenido del elemento grid ya es visible en el frontend, aún faltan algunos pasos.
En nuestro ejemplo, queremos mostrar el contenido en dos columnas una al lado de la otra. Por lo tanto, debemos asegurarnos de que el contenido se muestre en una estructura HTML que permita posteriormente aplicar el estilo adecuado mediante CSS.
En este ejemplo, la columna de la izquierda debe estar encerrada por un <div> con la clase col1 y la columna de la derecha por un <div> con la clase col2.
Además, todo el elemento debe estar rodeado por un <div> con la clase element2cols. Sin embargo, esto no es absolutamente necesario (dependiendo del CSS del resto del sitio web).
Puede escribir el siguiente Typoscript en la configuración de su plantilla raíz, o puede crear una plantilla de extensión e integrarla en la plantilla raíz. El procedimiento aquí es una cuestión de gusto, por así decirlo.
Asegúrese de introducir el ID correcto del elemento de rejilla. En mi ejemplo, es 3. Si sólo ha creado un elemento de rejilla hasta ahora, probablemente será 1.
# Personalizar la salida de los elementos de la rejilla
tt_content.gridelements_pi1.20.10.setup {
# ID del elemento de rejilla
3 < lib.gridelements.defaultGridSetup
3 {
columnas {
# ID de colPos
10 < .default
10.wrap = <div class="col1">|</div>
# colPos ID
20 < .default
20.wrap = <div class="col2">|</div>
}
# Opcionalmente, se puede dar una envoltura a todo el elemento
wrap = <div class="element2cols">|</div>
}
}Personalizar la salida en el frontend mediante CSS
Aunque la estructura HTML correcta ya debería estar generada en el frontend tras el último paso, aún falta el estilizado mediante CSS.
El siguiente código CSS podría utilizarse para el elemento de cuadrícula de ejemplo.
Nota: si desea que se muestre correctamente en navegadores antiguos, es posible que deba modificar el CSS o el HTML generado por Typoscript. El código utilizado es sólo un ejemplo.
.element2cols { overflow:hidden;} .col1, .col2 { width:48%; float:left; } .col1 { margin-right:2%; } .col2 { margin-left: 2%; }
