Introducción a los temas en Omeka S
En Omeka S, un tema consiste en un conjunto estructurado de plantillas y hojas de estilo que determinan el diseño visual y la organización de la interfaz pública del sitio. Cada sitio individual dentro de una misma instalación de Omeka S puede tener su propio tema asignado, facilitando así que diferentes sitios se muestren y funcionen de forma independiente.
¿Cómo se aplica un tema a un sitio? Al crear un nuevo sitio en Omeka S, si no se selecciona un tema específico, el sitio usará por defecto el tema “Default” (Predeterminado). Podemos cambiar el tema de un sitio en cualquier momento desde el panel de administración de Omeka S, navegando a la sección “Theme” (Tema) dentro de la configuración del sitio y eligiendo uno de los temas instalados. A continuación veremos cómo realizar esta selección y qué opciones básicas de configuración ofrecen los temas.
Temas oficiales disponibles en Omeka S
A continuación se listan los principales temas disponibles actualmente en el directorio oficial de Omeka S (https://omeka.org/s/themes/), junto con una breve descripción de cada uno:
Tema | Descripción breve |
Default | Tema predeterminado que viene con Omeka S (apariencia básica genérica). Es sencillo y sirve como base para construir otros temas. |
Center Row | Tema con tipografías serif delicadas y un menú de navegación centrado en una sola línea, dando una estética clásica y limpia. |
Cozy | Tema que se caracteriza por tener un menú lateral plegable (off-canvas) para la navegación, optimizando la experiencia en pantallas pequeñas. |
The Daily | Tema oficial de estilo magazine/noticias, adaptable a móviles. Incluye por ejemplo un carrusel para mostrar imágenes destacadas, lo que lo hace adecuado para sitios con contenido tipo blog o boletines. |
Foundation | Tema base de Omeka S construido sobre el framework ZURB Foundation, e incluye varias hojas de estilo predefinidas (ej. Revolution, Sea Foam, Inkwell) para elegir distintas estéticas. Es ideal para desarrolladores que quieran una base sólida y personalizable. |
Thanks, Roy | Tema de estilo serif tradicional en homenaje a Roy Rosenzweig, basado en el histórico tema “Thanks, Roy” de Omeka Classic. Presenta un diseño elegante inspirado en páginas impresas. |
Freedom | Tema moderno y responsivo (diseño mobile-first), con interfaz limpia y múltiples opciones de personalización. Se enfoca en una experiencia de usuario accesible y flexible. |
Lively | Tema moderno y modular, muy similar a Freedom en filosofía (diseño mobile-first y UX accesible), pero con una paleta de colores diferente. Ofrece también un diseño limpio y opciones configurables para logo, colores, etc. |
Papers | Tema inspirado en el proyecto histórico “Papers of the War Department”. Presenta una estética acorde a archivos históricos e incluye un estilo adicional para integrarse con el módulo Scripto (transcripción colaborativa). |
Multilingual | Tema que permite al usuario final cambiar el idioma de la interfaz del sitio fácilmente, cuando se utiliza junto con el módulo de internacionalización. Útil para sitios multilingües. |
Bookshelf | Tema contribuido por Indic Digital Archive Foundation, concebido para presentar colecciones digitales a modo de “estantería”. Está construido sobre la base del tema Default de Omeka S, añadiendo su propio estilo. |
Además de estos, existen otros temas desarrollados por la comunidad (y se pueden crear temas personalizados desde cero). Los temas oficiales mencionados suelen contar con documentación y actualizaciones periódicas por parte del equipo de Omeka o sus contribuyentes. Siempre es recomendable revisar la compatibilidad del tema con la versión de Omeka S en uso y leer las instrucciones particulares de cada tema.
Personalización básica de temas
En esta sección nos enfocaremos en las tareas de personalización que no requieren conocimientos de programación, ideales para usuarios principiantes o con conocimientos básicos. Esto incluye seleccionar y activar un tema, y realizar configuraciones sencillas como cambiar colores, logos o disposición de ciertos elementos usando la interfaz gráfica de Omeka S.
Seleccionar y activar un tema desde la interfaz de usuario
Para modificar el tema de un sitio en Omeka S, es necesario ingresar al panel de administración del sistema y acceder al apartado específico del sitio que deseamos personalizar. Desde allí, seleccionamos la opción "Theme" (Tema) disponible en el menú lateral izquierdo dentro de la configuración del sitio.
Interfaz de selección de tema en Omeka S (ejemplo donde “Default” está activo y otros temas –Cozy, The Daily, Thanks, Roy– aparecen listados para elegir). Para activar un nuevo tema, simplemente hacemos clic en la tarjeta del tema que queremos utilizar. Al seleccionarla, dicha tarjeta quedará resaltada en color gris y mostrará una marca de verificación (✔) en la esquina.
Después de seleccionar el tema, debemos guardar los cambios haciendo clic en el botón “Save” (Guardar) en la esquina superior derecha. Si navegamos al sitio público, veremos que ahora se aplica la nueva apariencia.
Una vez guardado, la pantalla de Theme mostrará el nuevo tema como “Current Theme” (Tema actual). A la derecha de la vista previa del tema activo aparecerán opciones adicionales como “Edit theme settings” (Editar ajustes del tema) y “Configure resource pages” (Configurar páginas de recursos). La opción de Edit theme settings nos permite hacer personalizaciones básicas que detallaremos a continuación. (La opción de Configure resource pages es más avanzada y se explicará más adelante.).
Ajustes básicos del tema: logos, colores y más
Cada tema suele proveer un conjunto de ajustes configurables a través de la interfaz, sin necesidad de tocar código. Para acceder a estos ajustes, pulsamos el botón “Edit theme settings” en la pantalla de Theme, como mencionamos arriba. Los ajustes disponibles dependen del tema activo, pero típicamente incluyen opciones como:
- Logo del sitio: Todos los temas permiten subir una imagen que reemplace el título del sitio como logo en la cabecera. Por ejemplo, podemos colocar el logotipo de nuestra institución para que aparezca en el encabezado en lugar del nombre textual del sitio. Omeka S acepta archivos JPG, PNG, GIF o SVG para el logo, y una vez cargado el archivo queda almacenado como un asset reutilizable.
- Imagen de banner o cabecera: Casi todos los temas permiten definir una imagen de cabecera (banner) que se mostrará en la parte superior de cada página. Algunos temas usan esta imagen como fondo sobre el cual se superpone el título, mientras que otros la muestran como un elemento decorativo independiente. Suele haber opciones para ajustar la altura del banner o su posición (por ejemplo, centrado o alineado arriba/abajo).
- Colores y tipografías: Varios temas ofrecen ajustes de color para personalizar la paleta. Por ejemplo, el tema Default permite seleccionar un “Main accent color” (color de acento principal) que se aplica a enlaces y botones destacados. En el tema Foundation se puede elegir entre estilos predefinidos con distintas combinaciones de tipografía y colores (Revolution, Sea Foam, etc.). En Thanks, Roy se pueden ajustar colores específicos como el del fondo, texto principal, enlaces visitados, etc., directamente desde los ajustes del tema. Esto permite cambiar rápidamente la apariencia (colores corporativos, por ejemplo) sin editar hojas de estilo manualmente.
- Navegación y disposición básica: Algunos temas incluyen configuraciones sobre la navegación. Por ejemplo, “Top navigation depth” controla cuántos niveles de páginas hijas se muestran en el menú principal del sitio (un valor 0 suele indicar que no hay límite, mostrando todos los subniveles). En el tema Foundation, se puede elegir el layout de navegación (menú horizontal superior vs. columna lateral) desde sus ajustes.
- Pie de página (footer): La mayoría de temas permiten editar el texto del footer, por ejemplo para añadir créditos, enlaces o texto personalizado (por defecto suele decir “Powered by Omeka S”). Este campo acepta HTML simple, así que podemos incluir enlaces o formato básico.
- Otros ajustes específicos: Dependiendo del tema, pueden existir opciones adicionales. Por ejemplo, el tema Freedom y Lively incluyen campos para enlaces a redes sociales (Facebook, Twitter, etc.) para mostrar iconos correspondientes en la interfaz. Foundation ofrece alternar la disposición de listados de ítems en grid (rejilla de miniaturas) o list (lista vertical) según convenga. Cada tema documenta sus propias opciones en su archivo theme.ini o en la documentación en línea.
En general, estas personalizaciones básicas se realizan de forma visual y no destructiva. Es decir, podemos experimentar con distintos logos, colores o estilos; Omeka S recordará la configuración que hayamos hecho para cada tema. Incluso si cambiamos temporalmente de tema y luego volvemos al anterior, los ajustes que habíamos realizado (por ejemplo un color de fondo o un logo cargado) se conservarán para ese tema.
Disposición de bloques y contenido en páginas
Omeka S dispone de un sistema modular de páginas basado en bloques, lo cual facilita personalizar el contenido de la página inicial o cualquier otra página estática del sitio sin necesidad de conocimientos de programación. Desde la sección "Pages" (Páginas) del sitio, es posible insertar distintos tipos de bloques de contenido (como bloques de texto HTML, listas de elementos, galerías de imágenes, mapas interactivos, entre otros) y organizarlos fácilmente mediante un sistema de arrastrar y soltar.
La edición de páginas en Omeka S utiliza este sistema de bloques flexibles para configurar, por ejemplo, la página principal de nuestro sitio. Podemos añadir un bloque de texto HTML con un mensaje de bienvenida, seguido por un bloque tipo carrusel con elementos destacados, y finalmente otro bloque HTML con información adicional o contacto. Cada bloque ofrece opciones específicas según su función: el bloque de elementos permite seleccionar qué contenidos mostrar, mientras que el bloque de texto admite la edición en formato enriquecido. Este enfoque basado en bloques proporciona una herramienta sencilla y eficaz para personalizar la disposición del contenido en distintas páginas sin necesidad de intervenir directamente sobre las plantillas del tema.
- Ejemplo: Para añadir un bloque personalizado al home, iríamos a Pages > [Página de inicio] > Edit. En el menú lateral de tipos de contenido elegimos, por ejemplo, “HTML”. Escribimos el contenido deseado (puede incluir imágenes o vídeos embebidos), guardamos, y luego arrastramos ese bloque a la posición deseada en la página (arriba o abajo de otros bloques). Al guardar la página, el sitio mostrará ese nuevo bloque en la home. De esta forma, usuarios sin conocimientos técnicos pueden crear un diseño atractivo combinando bloques (a modo de “widgets”) ofrecidos por Omeka S o sus módulos, logrando personalizaciones significativas en la estructura de la página inicial y subsecciones.
Personalización intermedia (CSS y plantillas)
Pasando a un nivel intermedio de personalización, nos adentramos en modificaciones que implican ajustar código HTML/CSS de los temas o hacer cambios más específicos en las plantillas de vista. Estas acciones requieren cierta familiaridad con conceptos web (HTML, CSS e idealmente nociones básicas de PHP), pero siguen siendo alcanzables para administradores con algo de experiencia técnica. Veremos cómo añadir estilos CSS propios, cómo modificar archivos de plantilla del tema para alterar vistas particulares, y otras técnicas intermedias.
Ajustes de estilo mediante CSS personalizado
Una de las formas más comunes de refinar la apariencia de un tema es añadiendo o sobrescribiendo estilos CSS. Omeka S ofrece dos vías principales para incluir CSS personalizado:
1. Usar el módulo “CSS Editor”: Es la opción más sencilla. El módulo CSS Editor permite escribir CSS directamente desde la interfaz de administración de Omeka S.
Tras instalar y activar este módulo, aparecerá una opción “CSS Editor” en el menú de cada sitio. Al entrar, veremos un cuadro de texto grande donde podemos pegar reglas CSS, y un campo para URLs de hojas de estilo externas.
Usando esta herramienta, podemos agregar reglas CSS que se aplicarán por encima del tema activo. Por ejemplo, si queremos cambiar la fuente de los títulos, podríamos escribir en el editor CSS algo como:
h1, h2, h3.site-title {
font-family: 'Arial', sans-serif;
}
Al guardar, este CSS se cargará en todas las páginas públicas del sitio, sobrescribiendo las reglas del tema donde corresponda (salvo que alguna esté marcada como !important). El módulo también nos permite incluir fácilmente hojas de estilo alojadas externamente: por ejemplo, podemos pegar la URL de Google Fonts para una fuente específica en la sección External stylesheets, y luego utilizar esa tipografía en nuestras reglas CSS.
Consejo: utilizar la herramienta de inspección del navegador (Inspector) nos ayudará a identificar las clases o elementos HTML que queremos modificar.
2. Editar la hoja de estilo del tema: La otra vía es modificar directamente los archivos CSS/SCSS del tema. Los temas oficiales de Omeka S están construidos con Sass (una extensión de CSS), lo que significa que sus estilos originales se definen en archivos .scss que luego se compilan a CSS. Si tenemos conocimientos de Sass y queremos cambios profundos, podemos localizar el archivo fuente correspondiente (por ejemplo asset/sass/_variables.scss en muchos temas contiene variables de colores, tipografías, espaciados, etc) y ajustarlo, luego recompilar el CSS usando las herramientas provistas (normalmente vía npm o gulp, según las instrucciones de cada tema).
En caso de no saber Sass, otra opción es editar directamente el CSS compilado (normalmente un archivo asset/css/style.css o similar). Sin embargo, esto es menos recomendable porque estos cambios se sobrescribirían si se recompila Sass o se actualiza el tema. Una práctica intermedia podría ser crear un archivo CSS adicional (por ej. asset/css/custom.css), colocar allí nuestras reglas, e incluirlo en la plantilla principal del tema (layout) para que cargue después del CSS principal. Para ello, tendríamos que editar el archivo view/layout/layout.phtml del tema e insertar una línea usando el helper de Omeka S para CSS:
Lo anterior agregaría nuestra hoja custom.css al final de la cola de estilos cargados, de modo que sus reglas puedan redefinir las existentes. Esta aproximación requiere acceso al servidor de archivos y editar código fuente del tema, por lo que debe hacerse con precaución. En general, para la mayoría de usuarios, la opción del CSS Editor será suficiente y más segura para ajustes de estilos relativamente simples (colores adicionales, esconder algún elemento con display: none, cambiar la tipografía del cuerpo del texto, etc.).
Modificar plantillas de vista (.phtml) en el tema
Otra manera de personalizar un tema es alterando las plantillas que generan el HTML de cada página. Omeka S utiliza archivos de plantilla en PHP (con extensión .phtml) para renderizar las páginas públicas: hay plantillas para la vista de un item individual, para la lista de items, para colecciones (item sets), para páginas estáticas, entre otras. Cada tema puede traer sus propias plantillas que sobrescriben las plantillas genéricas por defecto de Omeka S. Si deseamos hacer un cambio estructural en cómo se muestra cierta información (por ejemplo, agregar un campo extra en la página de un item, reordenar la forma en que se listan los metadatos, etc.), probablemente necesitemos editar la plantilla correspondiente.
¿Dónde encontrar las plantillas? Omeka S tiene un conjunto de vistas predeterminadas ubicadas en el directorio application/view/ de la instalación (no tocar estos archivos, son el “core”). Un tema funciona copiando cualquiera de esos archivos de vista al directorio del tema (usando la misma estructura de carpetas) y modificándolos allí; Omeka S automáticamente usará la versión presente en el tema en lugar de la predeterminada. Por ejemplo, el archivo que genera la página de detalle de un ítem suele ser application/view/omeka/site/item/show.phtml. Si nuestro tema no define ese archivo, Omeka S usará la plantilla genérica; pero si copiamos ese archivo dentro de themes/mi-tema/view/omeka/site/item/show.phtml, entonces podremos editar la copia para ajustar la salida a nuestro gusto. Lo mismo aplica para otras vistas: la lista de ítems (item/browse.phtml), la vista de una colección (item-set/show.phtml), la lista de colecciones (item-set/browse.phtml), la página principal del sitio (page/show.phtml si se usa una página estática como home), etc.
Veamos un caso concreto: supongamos que queremos personalizar la vista de un item para que debajo del título aparezca un texto adicional o cambiar el orden de los metadatos. Procederíamos así:
- Localizar la plantilla original de la vista de ítem. Como mencionamos, suele ser omeka/site/item/show.phtml: la URL de un ítem {midominio}/item/show/{ID} corresponde al archivo item/show.phtml.
- En nuestro servidor, navegamos a la carpeta de nuestro tema (themes/NombreTema/). Si el tema ya tiene la ruta view/omeka/site/item/show.phtml, la abrimos. Si no existe, la creamos copiando el archivo desde la ruta de application/view correspondiente. Es importante respetar la misma estructura de subdirectorios dentro de view/ para que Omeka lo detecte.
- Editamos el archivo .phtml con las modificaciones deseadas. Estos archivos contienen HTML mezclado con PHP. Por ejemplo, podríamos insertar una línea de texto estática, o usar las variables disponibles (como $item) para mostrar algún dato adicional. También podemos utilizar los helpers de vista de Omeka S (ver sección avanzada) para imprimir propiedades de los ítems, links, etc.
- Guardamos los cambios. Al recargar la página pública del ítem, deberíamos ver reflejada la modificación.
Este mismo proceso se aplica para personalizar la vista de una colección (en Omeka S llamadas item sets). Habría que copiar y editar item-set/show.phtml. Igualmente, para cambiar la plantilla que lista todas las colecciones, usar item-set/browse.phtml, etc. Como referencia, la documentación de Omeka S ejemplifica que para modificar la página de browse de colecciones en el tema Default, hay que copiar el archivo predeterminado a themes/default/view/omeka/site/item-set/browse.phtml.
Algunas recomendaciones al editar plantillas:
- No editar directamente las plantillas del núcleo (en application/view) ya que esos cambios se perderán al actualizar Omeka S. Siempre sobreescribir desde el tema.
- Hacer copia de seguridad de los archivos del tema antes de editarlos, o mejor aún, realizar estos cambios en un tema clonado o hijo para no estropear el original. Una práctica común es duplicar un tema (por ejemplo duplicar la carpeta default y renombrarla default-personalizado) y activar esa copia para editar libremente.
- Seguir la sintaxis PHP correctamente. Un error de sintaxis en un .phtml puede romper la carga de la página. Después de cada cambio, conviene probar la página correspondiente.
- Usar los View Helpers que Omeka S provee en lugar de escribir consultas complejas manualmente. Por ejemplo, para obtener el título de un item dentro de item/show.phtml, típicamente se usaría echo $this->escapeHtml($item->displayTitle()); en vez de acceder directamente al objeto; para obtener la URL de un recurso existe $this->url(), para incluir una imagen del tema se usa $this->assetUrl() etc. Estos helpers nos facilitan trabajo y mantienen compatibilidad.
Ejemplo práctico: cambiando la tipografía del sitio
Como ilustración de personalización intermedia, imaginemos que deseamos cambiar la tipografía por defecto de nuestro sitio Omeka S a otra fuente de Google Fonts no incluida originalmente en el tema. Resumiendo los pasos que podríamos seguir:
- Usando el CSS Editor, en la sección de External stylesheets, añadimos la URL de Google Fonts para la tipografía elegida. Por ejemplo, si queremos usar “Lato”, pegaríamos: https://fonts.googleapis.com/css?family=Lato. Guardamos para que Omeka S cargue ese CSS externo.
- A continuación, en el campo principal del CSS Editor, añadimos reglas CSS que apliquen esa fuente. Por ejemplo, esto define que el texto del cuerpo y los encabezados usen "Lato". Al guardar, los cambios son inmediatos en el sitio público:
body {
font-family: 'Lato', sans-serif;
}
h1, h2, .site-title {
font-family: 'Lato', sans-serif;
}
- Si quisiéramos hacerlo vía archivos del tema (método manual), tendríamos que editar view/layout/layout.phtml del tema: insertar la línea <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> en el <head> (para cargar la fuente), y luego en la hoja de estilo del tema (o en CSS Editor igual) poner las reglas de font-family correspondientes. Con CSS Editor evitamos modificar archivos y mantenemos todo dentro de Omeka.
En este ejemplo vemos que no fue necesario tocar PHP ni las plantillas: solo agregamos CSS. Muchos cambios estéticos (colores adicionales, fuentes, tamaños de texto, ocultar/mover algún elemento) pueden lograrse con estas técnicas de CSS personalizado.
Ejemplo práctico: agregar un bloque personalizado en la página de inicio
Para agregar un bloque de contenido personalizado en la página principal (u otra página) de nuestro sitio, podemos aprovechar las páginas de Omeka S y sus bloques, funcionalidad mencionada en la sección básica. Supongamos que queremos destacar una cita o un texto informativo en la portada de nuestro sitio:
- Vamos al menú Pages del sitio y seleccionamos la página que está marcada como inicio (Home). Si nuestro sitio no tiene aún una página de inicio definida, podemos crear una nueva página y luego establecerla como página inicial en las opciones del sitio.
- En el editor de páginas, pulsamos Add new block y elegimos el tipo HTML (un bloque de HTML libre). En el formulario, ingresamos el contenido: por ejemplo, un párrafo con la cita destacada, quizás con formato cursiva o un color distintivo usando HTML. Guardamos el bloque.
- Ahora podemos arrastrar ese bloque en la posición deseada dentro de la página (por ejemplo, al principio, antes de otros bloques existentes como listas de items).
- Guardamos la página. Al visitar la página de inicio en el sitio público, veremos la cita añadida.
Este proceso es totalmente mediante la GUI. Sin embargo, si por “bloque personalizado” nos referimos a un tipo de bloque nuevo (no uno de los tipos predefinidos), eso sí sería más complejo e involucraría desarrollo de un módulo. A nivel intermedio, nos referimos a combinar bloques existentes para personalizar el contenido. Omeka S ofrece bloques predeterminados bastante versátiles (HTML libre, Embed, Lista de ítems, Búsqueda, Carrusel de medios, Mapa, etc., ampliables con módulos adicionales), con los cuales se puede lograr una portada muy personalizada. La ventaja es que estos cambios no requieren modificar el tema directamente, sino que el tema simplemente dará estilo a esos bloques de contenido.
Ejemplo práctico: personalizar la vista de un ítem o colección
Retomando la personalización de plantillas, veamos un ejemplo concreto de personalización avanzada moderada: agregar un elemento de texto en la página de vista de cada ítem, digamos una nota fija. Queremos que en cada página de ítem (después del título) aparezca el mensaje “Consulta los derechos de este objeto antes de su uso.” a modo de recordatorio.
Para lograrlo, editaríamos la plantilla de ítem (item/show.phtml) en nuestro tema activo:
- Abrimos themes/MiTema/view/omeka/site/item/show.phtml. Si no existe en el tema, lo copiamos como explicamos anteriormente.
- Buscamos dentro del código el lugar apropiado. Probablemente veamos algo como <h1> con el título, seguido de una sección que lista metadatos. Justo debajo del título podríamos insertar un párrafo HTML con nuestra nota, por ejemplo:
<p class="rights-reminder">Consulta los derechos de este objeto antes de su uso.</p>
Este mismo método se puede usar para muchísimos tipos de personalización: por ejemplo, reordenar la lista de metadatos (cortando y pegando bloques de código dentro de la plantilla), envolviendo ciertos campos en divs con clases para aplicarles estilo especial, etc. Para personalizar la vista de una colección (item set), haríamos análogamente editando item-set/show.phtml en el tema.
Hay que recalcar que estos cambios afectan solo a nuestro sitio/tema en particular. Si actualizamos la versión del tema en el futuro, es posible que tengamos que re-aplicar los cambios en la nueva versión (de ahí la recomendación de mantener un tema hijo o registro de las modificaciones realizadas).
Personalización avanzada (estructura de temas y desarrollo)
En esta sección abordaremos aspectos avanzados de la personalización de temas en Omeka S, pensados para desarrolladores o usuarios con experiencia en programación web. Esto incluye conocer la estructura interna de un tema, el uso del archivo de configuración theme.ini, las rutas de vistas de Omeka S, y cómo utilizar view helpers y modificar el layout principal. Con estas habilidades, es posible crear temas totalmente nuevos o modificar profundamente los existentes.
Estructura de un tema Omeka S
Un tema de Omeka S es esencialmente una carpeta dentro de themes/ que contiene varios subdirectorios y archivos esenciales. La estructura típica de un tema incluye:
- config/theme.ini: archivo de configuración obligatorio que identifica el tema (nombre, autor, versión, compatibilidad con versiones de Omeka S) y también define los ajustes configurables que aparecerán en la interfaz de administración para ese tema. Por ejemplo, en theme.ini se listan las opciones como “Logo”, “Banner”, “Color primario”, etc., que luego el usuario puede cambiar desde “Edit theme settings”. Los desarrolladores pueden añadir sus propias opciones en este archivo para hacer el tema más flexible.
- asset/: directorio que contiene los recursos estáticos del tema, típicamente organizado en subcarpetas como css/, sass/, js/, images/ (o img/). Aquí residirán las hojas de estilo CSS (o archivos Sass fuente), los archivos JavaScript propios del tema, fuentes, imágenes utilizadas en el diseño, etc. Omeka S provee funciones para referenciar estos recursos desde las plantillas, por ejemplo usando $this->assetUrl('img/logo.png') se obtiene la URL pública al archivo asset/img/logo.png del tema.
- view/: este directorio contiene las vistas (templates) personalizadas del tema. Sigue la misma estructura de carpetas que la de application/view/ de Omeka S para las vistas por defecto. Es decir, normalmente habrá subdirectorios como common/, layout/, omeka/ dentro de view/. Las vistas dentro de omeka/site/... corresponden a páginas públicas específicas (ítems, colecciones, búsqueda, página simple, etc.), mientras que la carpeta layout/ suele contener layout.phtml que es la plantilla marco general del sitio (cabecera y pie global). Un tema puede tener tantas (o tan pocas) plantillas en view/ como necesite: si una vista no está presente, Omeka S usará la genérica.
Además de estos, un tema puede incluir otros archivos auxiliares (por ejemplo, a veces se incluye documentación, archivos de licencia, etc., que no afectan al funcionamiento). Lo importante es entender que Omeka S reconocerá un tema por su archivo theme.ini y usará cualquier plantilla en view/ para sobreescribir las correspondientes del núcleo.
En el archivo theme.ini, bajo la sección [info] van los metadatos del tema (nombre, author, etc.), y bajo [config] se definen las opciones de configuración para el usuario. Cada opción se define con una sintaxis que indica el tipo de campo (texto, checkbox, select, etc.) y sus propiedades. Por ejemplo, un extracto podría ser:
[info]
name = "Mi Tema Personalizado"
author = "Nombre del Autor"
version = "1.0"
omeka_version_constraint = "^4.0.0"[config]
elements.logo.name = "logo"
elements.logo.type = "Omeka\Form\Element\File"
elements.logo.options.label = "Logo del sitio"
Esto indicaría a Omeka S que el tema tiene un ajuste “logo” de tipo archivo (para subir imagen) con la etiqueta "Logo del sitio". La interfaz de administración generará automáticamente un campo para esta opción. Entender theme.ini es útil cuando queremos extender un tema: por ejemplo, podríamos añadir un nuevo ajuste para el color de fondo de la cabecera y luego usar ese valor en nuestras plantillas (Omeka S pasa los valores seleccionados a las vistas a través de la variable de configuración del tema).
Layout principal y lógica de carga
La plantilla layout.phtml (ubicada en view/layout/ del tema) es la responsable de la estructura global de cada página. En Omeka S, normalmente el layout incluye la sección <head> del HTML con las cargas de CSS/JS, la cabecera del cuerpo (que puede contener el título del sitio, menú de navegación principal), luego imprime el contenido específico de cada página con <?php echo $this->content; ?> (esto inyecta la vista particular, como la de item, o la de home), y finalmente el pie de página. Si queremos hacer modificaciones que afecten a todas las páginas (por ejemplo incluir una librería JS adicional en todas las páginas, o cambiar el marcado general de header/footer), este es el archivo a editar.
Por ejemplo, para añadir una referencia a un nuevo script JavaScript global, lo haríamos en layout.phtml usando $this->headScript()->appendFile($this->assetUrl('js/miscript.js')); dentro del <head>. Para añadir una meta etiqueta o un enlace a favicon, también se hace aquí.
Es importante conservar las llamadas que Omeka S espera, como echo $this->headLink() y echo $this->headScript() (que son las que finalmente imprimen todas las hojas de estilo y scripts encolados, incluidos los del core y módulos). Asimismo, si el tema define regiones como sidebars, a veces el layout incluye condicionales para imprimirlas si están pobladas.
Modificar el layout es avanzado porque un error aquí impactará en todo el sitio. No obstante, a veces es necesario para lograr ciertos efectos de diseño global. Una personalización avanzada común es cambiar la estructura de columnas – por ejemplo, mover una barra lateral de derecha a izquierda – lo cual implicaría ajustar el HTML en layout.phtml y las clases CSS asociadas.
Rutas de vistas y jerarquía
Omeka S, bajo el capó, funciona con el framework MVC de Laminas (antes Zend). Esto significa que las rutas URL están mapeadas a acciones que renderizan ciertas vistas. Conocer la ruta nos ayuda a saber qué plantilla modificar. Algunos mapas comunes de rutas a archivos de vista son:
- /:site/item/browse – lista de ítems de un sitio. Vista correspondiente: view/omeka/site/item/browse.phtml.
- /:site/item/set (puede ser item-set dependiendo versión) – listado de colecciones (item sets). Vista: item-set/browse.phtml.
- /:site/item/show/:id – página de detalle de ítem. Vista: item/show.phtml.
- /:site/item-set/show/:id – detalle de una colección. Vista: item-set/show.phtml.
- /:site/page – página estática genérica (cuando se crea una página vía Pages). Vista: page/show.phtml.
- /:site (raíz del sitio) – si está asignada una página de inicio, redirige a page/show de esa página; si no, puede mostrar un listado por defecto de items o sitios. Esto varía, pero generalmente se gestiona vía configuración.
Omeka S 4.x introdujo una característica llamada “Resource page configuration” que permite configurar mediante la interfaz algunas de estas páginas de recurso (ítems, colecciones, media) añadiendo bloques en regiones predefinidas. Por ejemplo, temas como Default, Cozy, Center Row, etc., soportan que el administrador inserte bloques en la página de un ítem a través de la opción “Configure resource pages”. Esto internamente crea un esquema de dividir la vista en regiones (como main, sidebar) que cargan bloques. Si estamos personalizando esas vistas manualmente, debemos tener en cuenta esa posible configuración. Si el objetivo es algo complejo (como mostrar campos solo si cierta condición), probablemente debamos editar la plantilla directamente, lo cual deshabilitaría en parte la configuración vía GUI para esa sección. Es un equilibrio a considerar: usar las nuevas opciones de configuración de páginas de recurso (más sencillo, pero limitado a lo que permiten los bloques) vs. editar el código (más flexible, pero más técnico).
View Helpers y otras herramientas avanzadas en plantillas
Al editar o crear plantillas de un tema, es fundamental aprovechar los View Helpers que proporciona Omeka S. Estos son métodos PHP accesibles a través de $this dentro de las vistas, que realizan tareas comunes:
- $this->url($resource, $action) – genera una URL hacia un recurso o ruta específica dentro del sitio.
- $this->assetUrl('ruta/archivo') – devuelve la URL completa a un archivo dentro de asset/ del tema, útil para incluir imágenes o archivos estáticos en el HTML.
- $this->translate('Texto') – internacionaliza un texto dado (por si tenemos el sitio en múltiples idiomas).
- $this->escapeHtml($string) – escapa caracteres especiales en una cadena (importante para seguridad al imprimir datos del usuario).
- $this->partial('ruta/parcial', [...]) – incluye otra plantilla parcial pasando datos. Omeka S y módulos a veces traen parciales reutilizables.
- Helpers específicos de Omeka S: por ejemplo, $this->thumbnail($item) podría (en contexto Omeka S) retornar una imagen miniatura de un ítem; $this->linkPretty($itemSet) generar un enlace formateado a una colección, etc. (Estos nombres pueden variar; conviene consultar la documentación de View Helpers de Omeka S).
Conocer y usar estos helpers nos evita “reinventar la rueda”. Por ejemplo, en vez de escribir manualmente HTML <img src="..."> con la URL de una imagen de item, podemos usar el helper de media para obtener la imagen con atributos adecuados. En la documentación de desarrolladores de Omeka S hay una sección dedicada a View Helpers donde se listan los disponibles y sus métodos.
Finalmente, un desarrollador avanzado podría incluso crear un tema desde cero. Omeka S proporciona guías para iniciar un nuevo tema, esencialmente copiando la estructura básica (incluso Omeka tiene un tema de ejemplo mínimo posiblemente, o se puede basar en Foundation si se quiere partir de un esqueleto). Para registrar un tema nuevo, basta con crear la carpeta con un theme.ini válido y activarlo desde la interfaz. A partir de allí, se agregan las vistas y assets necesarios. Esta es ya una tarea de desarrollo web completa, equiparable a desarrollar una pequeña aplicación web frontend, pero con las ventajas de conectarse al sistema de Omeka S.
