Proba Timeline

Linea de tiempo tipo skyline para proyectos inmobiliarios: cada hito es una imagen de edificio parada sobre una linea base, con su ano y su estado. Es la version WordPress del bloque .tl de propuesta-web/propuesta-d.html, cambiando los rectangulos CSS por imagenes reales.

Instalar

El repo tiene layout plano: proba-timeline.php esta en la raiz, no dentro de una subcarpeta. Es lo que necesita Deployer for Git, que vuelca el contenido del repo directamente en wp-content/plugins/<carpeta>/; si el plugin quedara anidado, WordPress no lo detecta.

Con Deployer for Git

1. Apunta el deploy a wp-content/plugins/plugin-timeline/ (rama main).
2. Plugins → Plugins instalados → activa Proba Timeline (el deploy copia archivos, no activa).

Manual

1. Sube la carpeta a wp-content/plugins/ o comprimela en un zip y usa Plugins → Anadir nuevo → Subir plugin.
2. Activa. Aparece el menu Proba Timeline en el admin.

Usar

1. Proba Timeline → Anadir hito: titulo (nombre del proyecto), ano, descripcion corta, estado, altura del edificio en px y enlace opcional. La imagen del edificio va en Imagen destacada.
2. Proba Timeline → Apariencia: colores de acento, texto, fondo y linea base, ancho del contenido, separacion minima entre edificios, alineacion, reproduccion automatica e intervalo. Lo que se pone ahi es el valor por defecto de todas las instancias; el shortcode puede pisarlo una a una.
3. En Bricks: elemento Shortcode con [proba_timeline].

Shortcode

[proba_timeline]
[proba_timeline titulo="Nuestra trayectoria" kicker="" estado="entregado,construccion" orden="asc" gap="60"]
[proba_timeline ids="12,45,9" flechas="no" acento="#FBB900" fondo="#ffffff"]
[proba_timeline autoplay="no"]
[proba_timeline intervalo="6000" alineacion="centro"]

Imagenes de los edificios

• PNG o WebP con fondo transparente, edificio recortado a ras del borde inferior para que se pare sobre la linea.
• Ancho util 600–900 px. El plugin escala por altura; el ancho sale de la proporcion.
• Varia la altura entre hitos (140 / 200 / 240) para lograr el efecto skyline.

Comportamiento

• Un solo mecanismo en todos los tamanos: el viewport scrollea en horizontal. Sobre el trabajan las flechas, el arrastre con el mouse (1:1, cursor grab), la rueda del mouse y las flechas del teclado.
• Reparto a los extremos. El JS mide cuantos edificios entran en el viewport y ensancha la separacion hasta que ocupan el ancho exacto: el primero pegado al borde izquierdo, el ultimo visible pegado al derecho y los del medio repartidos por igual. Con 5 edificios y 3 visibles, el 1 y el 3 quedan en los extremos y el 2 en el centro. El gap del shortcode pasa a ser la separacion minima.
• Alineado a la izquierda. El borde izquierdo del carrusel siempre cae a ras de un edificio: las flechas, el automatico, la rueda y el arrastre terminan siempre en una posicion enganchada, nunca con un edificio partido a la izquierda. El contenedor de la seccion tambien va pegado a la izquierda (alineacion="centro" lo devuelve al centro).
• Reproduccion automatica. Avanza una pagina entera cada intervalo y da la vuelta al llegar al final. Se pausa sola con el puntero encima, con el foco de teclado dentro, mientras se arrastra, con la pestana en segundo plano y cuando la seccion sale de pantalla. Con prefers-reduced-motion: reduce no se reproduce.
• En tactil el gesto siempre gana. Mientras el dedo arrastra, y hasta 900 ms despues de que la inercia se detiene, el automatico espera; al aquietarse vuelve a dejar el borde izquierdo a ras de un edificio y sigue solo. El hover no pausa en tactil (un toque dejaba el pointerenter pegado y el carrusel no arrancaba mas) y los resize que dispara la barra de direcciones del movil se ignoran si el ancho no cambio, que era lo que movia el carrusel solo a media pasada.
• Las flechas avanzan los edificios enteros que quepan en pantalla y dan la vuelta en los extremos. Si todo cabe, la navegacion y la barra de avance se ocultan solas.
• Barra de avance bajo la linea y degradados en los bordes para avisar de que hay mas contenido.
• Movil (≤781px): un edificio por pantalla. Cada hito pasa a ocupar el ancho completo del viewport y queda centrado en el; el automatico y las flechas avanzan de uno en uno. Gesto tactil nativo con enganche (scroll-snap), flechas mas chicas y barra de avance a todo el ancho.
• Los hitos en construccion, venta, preventa o proximamente se pintan mas tenues y con el ano en color de acento; En venta ademas resalta su etiqueta en el color de acento.
• CSS y JS se cargan solo en las paginas donde se pinta el shortcode.

Estructura

plugin-timeline/            <- la carpeta del plugin en wp-content/plugins
├── proba-timeline.php      <- cabecera del plugin, debe quedar en la raiz
├── includes/
│   ├── class-proba-tl-cpt.php        CPT proba_hito + consulta normalizada
│   ├── class-proba-tl-meta.php       campos del hito y columnas del listado
│   ├── class-proba-tl-admin.php      dashboard, apariencia, ayuda
│   └── class-proba-tl-shortcode.php  render + encolado condicional
└── assets/{css/timeline.css, js/timeline.js}