Shortcode web_image_comparer
El shortcode web_image_comparer renderiza el componente comparador de imágenes.
Los atributos que aparecen a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis sin procesar únicamente para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_image_comparer left_image="123" right_image="456" starting_position="50" accessible_name="Kitchen renovation"]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
left_image |
— | ID de la biblioteca, URL de la biblioteca o URL de imagen HTTP(S) | Imagen que se muestra a la izquierda; determina la altura de la comparación. |
right_image |
— | ID de la biblioteca, URL de la biblioteca o URL de imagen HTTP(S) | Imagen que se muestra a la derecha. |
starting_position |
50 |
Entero 1–99 | Porcentaje inicial de la imagen izquierda. |
accessible_name |
Comparación de imágenes | Texto sin formato | Nombre accesible para el grupo y el deslizador. |
left_label |
Antes | Texto sin formato | Nombre del lado izquierdo en el valor accesible del deslizador. |
right_label |
Después | Texto sin formato | Nombre del lado derecho en el valor accesible del deslizador. |
device_visibility |
— | Cadena salvo que se indique lo contrario | Aplica la regla de visibilidad adaptable seleccionada. |
el_class |
— | Cadena salvo que se indique lo contrario | Si deseas dar un estilo distinto a un elemento de contenido concreto, utiliza este campo para añadir un nombre de clase y, a continuación, haz referencia a él en tu archivo css. |
el_id |
— | Cadena salvo que se indique lo contrario | Establece un ID HTML único en el elemento renderizado. |
Personalizar la hoja de estilos
Los administradores pueden reemplazar la hoja de estilos completa de Juxtapose en Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Image comparer. Al guardar se publica una copia optimizada por sitio únicamente para las páginas que ya requieran web_image_comparer; al revertir se devuelve el controlador web-image-comparer existente al archivo image-comparer.min.css actual.
Esta personalización solo modifica la presentación. No altera ninguna de las dos fuentes de imagen, el marcado generado, el comportamiento del deslizador, el tamaño adaptable, la biblioteca Juxtapose incluida, el script web_image_comparer existente ni el descubrimiento condicional de recursos.
Verificación
La comparación llena su contenedor y escala ambas imágenes proporcionalmente a medida que el contenedor cambia de tamaño. Al mover el divisor se revela cada imagen sin cambiar sus proporciones.
Utiliza imágenes con proporciones iguales y revisa las flechas del teclado, Inicio/Fin, Re Pág/Av Pág, el arrastre y los contenedores inicialmente ocultos. Los pares que faltan no renderizan ningún comparador. Los ID de biblioteca y las URL de biblioteca que coincidan utilizan los metadatos actuales; las URL de imágenes externas conservan su origen sin una descarga al servidor. Sin JavaScript, las dos imágenes siguen siendo visibles. El reproductor interactivo carga ambas fuentes de comparación cuando se inicializa, incluso cuando las imágenes alternativas utilizan carga diferida nativa en una página HTML almacenada en caché. Tanto el shortcode como la Image Comparer block utilizan los mismos recursos condicionales y siguen renderizándose con la administración del Page Builder desactivada.