'%2F%3E%3Crect%20x%3D'589'%20y%3D'383'%20width%3D'94'%20height%3D'78'%20fill%3D'%23c9d8c4'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M120%20676H1170'%20stroke%3D'%238a7f6c'%20stroke-width%3D'10'%2F%3E%3C%2Fsvg%3E)
Galería incorporada.
Patrón canónico de galería incorporada para cochid-graphs, mapas, periodismo2 y firmas y documentos.
Verlo por niveles
Primero el componente, después la variación de marca y finalmente su uso dentro de una página.
'%2F%3E%3Crect%20x%3D'589'%20y%3D'383'%20width%3D'94'%20height%3D'78'%20fill%3D'%23c9d8c4'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M1164%20486C1212%20456%201262%20498%201252%20562C1244%20622%201184%20648%201156%20610C1132%20578%201126%20514%201164%20486Z'%20fill%3D'%23b9c9a4'%20stroke%3D'%237f8f6a'%20stroke-width%3D'3'%2F%3E%3Cpath%20d%3D'M120%20676H1270'%20stroke%3D'%238a7f6c'%20stroke-width%3D'10'%2F%3E%3C%2Fsvg%3E)
Ver y copiar el código de este render
<figure class="ui-sample ui-embed" data-embed="gallery"><div class="ui-embed__frame ui-embed__frame--wide" role="group" aria-label="Galería de planos, imagen 1 de 4"><img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1280'%20height%3D'720'%20viewBox%3D'0%200%201280%20720'%3E%3Cdefs%3E%3Cpattern%20id%3D'm'%20width%3D'112'%20height%3D'96'%20patternUnits%3D'userSpaceOnUse'%20x%3D'140'%20y%3D'190'%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'94'%20height%3D'78'%20fill%3D'%23d9d2c3'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D'1280'%20height%3D'720'%20fill%3D'%23efe9dc'%2F%3E%3Cpath%20d%3D'M0%20120C220%2070%20420%20150%20640%20110S1040%2060%201280%20120'%20fill%3D'none'%20stroke%3D'%239fbfcc'%20stroke-width%3D'44'%2F%3E%3Crect%20x%3D'140'%20y%3D'190'%20width%3D'1000'%20height%3D'476'%20fill%3D'url(%23m)'%2F%3E%3Crect%20x%3D'589'%20y%3D'383'%20width%3D'94'%20height%3D'78'%20fill%3D'%23c9d8c4'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M120%20676H1170'%20stroke%3D'%238a7f6c'%20stroke-width%3D'10'%2F%3E%3C%2Fsvg%3E" alt="Plano del damero fundacional de Santiago, entre el río Mapocho y la Cañada, con la Plaza de Armas al centro"/><button class="btn btn--icon" type="button" aria-label="Imagen anterior">←</button><button class="btn btn--icon" type="button" aria-label="Imagen siguiente">→</button></div><figcaption>Fuente: Archivo Círculo de Santiago · lámina redibujada · imagen 1 de 4</figcaption></figure>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
COCHID
Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.mdCambia en esta marca
- Cuadrado azul y namebrand de tres líneas
- Azul COCHID en selección, capas y series
Permanece canónico
- Estructura y semántica comunes
- Fuentes, unidades y alternativa tabular
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia en esta marca
- Navegación y contenido propios del servicio
- Acento reservado para acciones y datos
Permanece canónico
- Mark CIS y namebrand de tres líneas
- IBM Plex Sans, foco, espaciado y anatomía
Comparación histórica recuperable
Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.
- Estado actual
- Galería incorporada no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Galería incorporada para Patrón canónico de galería incorporada para cochid-graphs, mapas, periodismo2 y firmas y documentos.
- Qué ocurre si respondes No
- Galería incorporada queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.
Preparando comparación histórica…
Antes / r19
La comparación convierte una regla abstracta en una diferencia visible y verificable.
- Mantén proporción, título accesible, fuente y vista completa.
- Proporciona consentimiento y fallback cuando depende de terceros.
Contenido incorporadoRectángulo vacío sin fuente, fallback ni vista completa
- No cargues terceros sin política CSP y privacidad.
- No dejes un rectángulo vacío cuando falla el origen.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
Cobertura
| Dimensión | Contrato |
|---|---|
| Propietario canónico | Sistema de diseño CIS y servicio productor · core/core-style |
| Consumidores | cochid-graphs, Mapas, Periodismo2 y Firmas y Documentos |
| Dependencias | CSP, sandbox, fallback enlazable |
| Estado | candidato |
Evidencia de adopción
Patrón propuesto. 0 implementaciones observadas en 0 repositorios.
La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón propuesto |
| Implementaciones | 0 implementaciones observadas |
| Repositorios | Ningún repositorio observado |
| Snapshot | kit/componentes/componentes-observados.json |
Consumidores observados
El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.
Estados
| Estado requerido |
|---|
| cargando |
| disponible |
| bloqueado |
| error |
| sin JavaScript |
Accesibilidad
- Conserva nombre accesible, orden de lectura y foco visible.
- Funciona a 320 px, con zoom de 200% y texto largo.
- El color nunca es la única señal de estado o acción.
- El contenido esencial permanece disponible sin JavaScript.
Código HTML
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<figure class="ui-sample ui-embed" data-embed="gallery"><div class="ui-embed__frame ui-embed__frame--wide" role="group" aria-label="Galería de planos, imagen 1 de 4"><img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1280'%20height%3D'720'%20viewBox%3D'0%200%201280%20720'%3E%3Cdefs%3E%3Cpattern%20id%3D'm'%20width%3D'112'%20height%3D'96'%20patternUnits%3D'userSpaceOnUse'%20x%3D'140'%20y%3D'190'%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'94'%20height%3D'78'%20fill%3D'%23d9d2c3'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D'1280'%20height%3D'720'%20fill%3D'%23efe9dc'%2F%3E%3Cpath%20d%3D'M0%20120C220%2070%20420%20150%20640%20110S1040%2060%201280%20120'%20fill%3D'none'%20stroke%3D'%239fbfcc'%20stroke-width%3D'44'%2F%3E%3Crect%20x%3D'140'%20y%3D'190'%20width%3D'1000'%20height%3D'476'%20fill%3D'url(%23m)'%2F%3E%3Crect%20x%3D'589'%20y%3D'383'%20width%3D'94'%20height%3D'78'%20fill%3D'%23c9d8c4'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M120%20676H1170'%20stroke%3D'%238a7f6c'%20stroke-width%3D'10'%2F%3E%3C%2Fsvg%3E" alt="Plano del damero fundacional de Santiago, entre el río Mapocho y la Cañada, con la Plaza de Armas al centro"/><button class="btn btn--icon" type="button" aria-label="Imagen anterior">←</button><button class="btn btn--icon" type="button" aria-label="Imagen siguiente">→</button></div><figcaption>Fuente: Archivo Círculo de Santiago · lámina redibujada · imagen 1 de 4</figcaption></figure>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="gallery"><div class="ui-embed__frame ui-embed__frame--wide" role="group" aria-label="Galería de planos, imagen 1 de 4"><img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1280'%20height%3D'720'%20viewBox%3D'0%200%201280%20720'%3E%3Cdefs%3E%3Cpattern%20id%3D'm'%20width%3D'112'%20height%3D'96'%20patternUnits%3D'userSpaceOnUse'%20x%3D'140'%20y%3D'190'%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'94'%20height%3D'78'%20fill%3D'%23d9d2c3'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D'1280'%20height%3D'720'%20fill%3D'%23efe9dc'%2F%3E%3Cpath%20d%3D'M0%20120C220%2070%20420%20150%20640%20110S1040%2060%201280%20120'%20fill%3D'none'%20stroke%3D'%239fbfcc'%20stroke-width%3D'44'%2F%3E%3Crect%20x%3D'140'%20y%3D'190'%20width%3D'1000'%20height%3D'476'%20fill%3D'url(%23m)'%2F%3E%3Crect%20x%3D'589'%20y%3D'383'%20width%3D'94'%20height%3D'78'%20fill%3D'%23c9d8c4'%20stroke%3D'%238a7f6c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M120%20676H1170'%20stroke%3D'%238a7f6c'%20stroke-width%3D'10'%2F%3E%3C%2Fsvg%3E" alt="Plano del damero fundacional de Santiago, entre el río Mapocho y la Cañada, con la Plaza de Armas al centro"/><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Imagen anterior">←</button><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Imagen siguiente">→</button></div><figcaption class="text-sm text-slate-600">Fuente: Archivo Círculo de Santiago · lámina redibujada · imagen 1 de 4</figcaption></figure>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { MouseEventHandler } from "react";
export interface GalleryEmbedProps {
/** Nombre accesible del grupo; se completa con la posición («Galería, imagen 1 de 4»). */
label?: string;
/** Posición de la imagen visible, desde 1. */
position?: number;
/** Cantidad de imágenes de la galería. */
total?: number;
/** Texto de la posición; por defecto, `imagen ${position} de ${total}`. Vacío lo omite. */
positionLabel?: string;
/** Dirección de la imagen visible; por defecto, una lámina de ejemplo. Vacía (`""`) dibuja un marcador con `role="img"`. */
src?: string;
/** Descripción de la imagen visible. */
alt?: string;
/** Nombre accesible del botón que retrocede. */
previousLabel?: string;
onPrevious?: MouseEventHandler<HTMLButtonElement>;
/** Nombre accesible del botón que avanza. */
nextLabel?: string;
onNext?: MouseEventHandler<HTMLButtonElement>;
/** Origen de las imágenes, con su prefijo («Fuente: …»); vacío lo oculta. */
source?: string;
className?: string;
}
// Lámina redibujada del damero fundacional de Santiago: el río Mapocho al norte,
// la Cañada al sur y la Plaza de Armas al centro. Con ancho y alto propios para que
// llene el marco 16:9.
const LAMINA =
"data:image/svg+xml;charset=utf-8," +
encodeURIComponent(
"<svg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'>" +
"<defs><pattern id='m' width='112' height='96' patternUnits='userSpaceOnUse' x='140' y='190'>" +
"<rect x='1' y='1' width='94' height='78' fill='#d9d2c3' stroke='#8a7f6c' stroke-width='2'/></pattern></defs>" +
"<rect width='1280' height='720' fill='#efe9dc'/>" +
"<path d='M0 120C220 70 420 150 640 110S1040 60 1280 120' fill='none' stroke='#9fbfcc' stroke-width='44'/>" +
"<rect x='140' y='190' width='1000' height='476' fill='url(#m)'/>" +
"<rect x='589' y='383' width='94' height='78' fill='#c9d8c4' stroke='#8a7f6c' stroke-width='2'/>" +
"<path d='M120 676H1170' stroke='#8a7f6c' stroke-width='10'/>" +
"</svg>",
);
/**
* Galería de imágenes incorporada que muestra una imagen a la vez, con botones para avanzar y retroceder, la posición y la fuente; se usa para una serie de fotos o láminas dentro de un artículo.
*
* Sin estado interno: la página pasa `position` y cambia la imagen con `onPrevious` y `onNext`. La posición se anuncia en el nombre del grupo y en el pie.
*
* @example <GalleryEmbed position={2} total={4} src="/archivo/santiago-02.jpg" alt="Vista urbana de Santiago" onPrevious={anterior} onNext={siguiente} />
* @example <GalleryEmbed label="Galería de planos" position={3} total={12} src="/archivo/planos/03.jpg" alt="Plano de Santiago hacia 1910" source="Fuente: Museo Histórico Nacional" />
*/
export function GalleryEmbed({
label = "Galería de planos",
position = 1,
total = 4,
positionLabel,
src = LAMINA,
alt = "Plano del damero fundacional de Santiago, entre el río Mapocho y la Cañada, con la Plaza de Armas al centro",
previousLabel = "Imagen anterior",
onPrevious,
nextLabel = "Imagen siguiente",
onNext,
source = "Fuente: Archivo Círculo de Santiago · lámina redibujada",
className,
}: GalleryEmbedProps) {
const posicion = positionLabel ?? `imagen ${position} de ${total}`;
const nombre = [label, posicion].filter(Boolean).join(", ");
const pie = [source, posicion].filter(Boolean).join(" · ");
return (
<figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="gallery">
<div className="ui-embed__frame ui-embed__frame--wide" role="group" aria-label={nombre || undefined}>
{src ? <img src={src} alt={alt} /> : <div role="img" aria-label={alt}></div>}
<button className="btn btn--icon" type="button" aria-label={previousLabel} onClick={onPrevious}>←</button>
<button className="btn btn--icon" type="button" aria-label={nextLabel} onClick={onNext}>→</button>
</div>
{pie ? <figcaption>{pie}</figcaption> : null}
</figure>
);
}