web_image Shortcode
El shortcode web_image renderiza el componente de imagen.
Los atributos que aparecen a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis en bruto únicamente para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_image get_image="123"]Atributos
| Atributo | Valor por defecto | Valores aceptados | Propósito |
|---|---|---|---|
get_image |
— | Cadena, salvo que se indique lo contrario | Selecciona la imagen que se va a mostrar. |
image_overlay |
— | hover, hide-on-hover, always |
Controla la superposición. |
image_overlay_effect |
— | gradient |
Elige el estilo de superposición de la imagen. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_frame |
— | yes |
¿Añadir un marco a la superposición?. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_enter_mode |
— | follow |
¿Hacer que la superposición entre por el mismo lado por el que entra tu cursor?. Disponible cuando image_overlay es hover. |
image_overlay_zoom |
yes |
yes o vacío |
Habilita el zoom de la imagen al pasar el cursor. Disponible cuando hay una superposición habilitada. |
image_overlay_icon |
— | Cadena, salvo que se indique lo contrario | Controla el icono de la superposición. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_elements |
title,description,view_icon,link_title,link_icon |
title, caption, description, view_icon, link_title, link_icon, button |
Contenido de la superposición separado por comas cuando se omite en la sintaxis en bruto del shortcode. Page Builder puede guardar su propia selección explícita. |
button_text |
Read more |
Cadena, salvo que se indique lo contrario | Establece la etiqueta visible del botón. Disponible cuando image_overlay_elements es button. |
button_style |
1 |
1 o un slug de estilo de botón configurado |
Selecciona un estilo de botón definido en el sistema de diseño de POM. Disponible cuando image_overlay_elements es button. |
image_click_event |
link |
link, modal_box_open, slider |
Selecciona lo que quieres que ocurra al hacer clic en el icono o botón del enlace. Disponible cuando image_overlay_elements es link_title o link_icon o button. |
image_overlay_align |
web-image-box-center align-center |
web-image-box-top align-left, web-image-box-top align-center, web-image-box-top align-right, web-image-box-center align-left, web-image-box-center align-center, web-image-box-center align-right, web-image-box-bottom align-left, web-image-box-bottom align-center, web-image-box-bottom align-right |
Controla la alineación de los elementos de la superposición. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_background |
1 |
Cadena, salvo que se indique lo contrario | Controla el color de fondo de la superposición. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_background_alpha |
50 |
Número | Establece un valor de opacidad personalizado. Disponible cuando image_overlay es hover o hide-on-hover o always. |
image_overlay_text_color |
11 |
Cadena, salvo que se indique lo contrario | Controla el color del texto de la superposición. Disponible cuando image_overlay es hover o hide-on-hover o always. |
whole_image_click_event |
none |
none, modal_box, modal_box_open, link, slider |
¿Qué ocurre al hacer clic en la imagen?. |
image_slider_id |
— | Cadena, salvo que se indique lo contrario | Introduce el ID del Slider que quieres gestionar. Disponible cuando whole_image_click_event es slider. |
image_slider_action |
next |
next, previous, custom |
Controla la acción del slider. Disponible cuando whole_image_click_event es slider. |
image_slider_custom_slide_id |
— | Cadena, salvo que se indique lo contrario | Controla el id de slide personalizado. Disponible cuando image_slider_action es custom. |
image_popup_elements |
— | description |
Elementos que se mostrarán en la ventana emergente de la imagen. Disponible cuando whole_image_click_event es modal_box. |
image_xfn |
— | Cadena, salvo que se indique lo contrario | Esto se colocará en el parámetro rel=\"\" del enlace. |
modal_box_id |
— | Cadena, salvo que se indique lo contrario | Introduce el ID del modal que deseas abrir. Disponible cuando whole_image_click_event es modal_box_open. |
image_alignment |
center |
left, right, center |
Selecciona la alineación de la imagen. |
image_size |
full-original-ratio |
Cualquier slug de tamaño de imagen registrado en WordPress | Selecciona el tamaño de imagen generado. |
image_loading |
lazy |
lazy, eager, auto |
Los atributos de carga explícitos omiten el analizador de carga diferida del tema para esta imagen. La carga diferida requiere habilitar Avanzado > Carga diferida en los ajustes del tema. |
image_fetchpriority |
— | high, low, auto |
Utiliza «high» únicamente para imágenes situadas por encima del pliegue. La prioridad alta fuerza la carga inmediata. |
image_fit |
— | yes |
Si está marcado, la imagen se ajustará al ancho del div padre. |
image_change_hover |
— | yes |
Cambia la imagen cuando el ratón está encima. |
image_to_change_hover |
— | Cadena, salvo que se indique lo contrario | Selecciona la imagen que usar al pasar el cursor. Disponible cuando image_change_hover es yes. |
image_gif_play_options |
— | gif_autoplay, gif_mouse_over, gif_on_click, gif_play_in_viewport |
Elige cómo reproducir el .gif. |
gif_thumbnail |
— | Cadena, salvo que se indique lo contrario | Selecciona la miniatura para los GIF sin reproducción automática. Disponible cuando image_gif_play_options es gif_mouse_over o gif_on_click o gif_play_in_viewport. |
custom_width |
— | Cadena, salvo que se indique lo contrario | Esto anulará el atributo de ancho en línea de la imagen. |
custom_height |
— | Cadena, salvo que se indique lo contrario | Esto anulará el atributo de alto en línea de la imagen. |
render_svg |
— | yes |
Inserta un SVG local de la biblioteca saneado de hasta 512KB. Otras fuentes usan un elemento de imagen ordinario. Se conservan el ajuste, el hover y las dimensiones de la imagen. |
gallery_photoswipe_width, gallery_photoswipe_height |
— | Dimensiones positivas en píxeles | Anula las dimensiones de la caja de luz; normalmente la imagen original las proporciona. |
device_visibility |
— | Cadena, salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_id |
— | ID HTML único válido | ID de la imagen. |
el_class |
— | Clases CSS separadas por espacios | Añade clases auxiliares o personalizadas existentes al contenedor de la imagen de la biblioteca. Para una URL de imagen externa, las clases permanecen en el propio elemento de imagen. |
Verificación
El título vinculado, el icono de enlace y el botón siguen a image_click_event; el icono de la caja de luz siempre amplía la imagen. Las acciones de modal y de slider requieren un ID de destino existente, pero no requieren una URL de destino de la biblioteca. Cuando tanto la imagen completa como su icono abren la caja de luz, representan un único elemento de galería.
Para los estados de GIF detenido, selecciona una gif_thumbnail fija. El texto alternativo de la biblioteca y otros metadatos se leen en el momento de la renderización; las páginas almacenadas en caché pueden requerir un refresco de caché para mostrar las ediciones.
La imagen de hover utiliza el mismo tamaño de imagen seleccionado y las mismas dimensiones personalizadas que la imagen principal, con sus propios candidatos responsive y su relación de aspecto. Se carga de forma diferida cuando la carga diferida global está habilitada y no hereda la prioridad de carga alta de la imagen principal. Comprueba un área de visualización estrecha y el estado de hover después de cambiar el tamaño. Las imágenes de la biblioteca con un texto alternativo vacío conservan alt="" y omiten el tooltip de título automático; deja esto vacío solo cuando la imagen sea decorativa o repita información cercana.
Para medios multilingües, selecciona el elemento de la biblioteca correspondiente al idioma de la página. Page Builder mantiene su referencia de archivo adjunto cuando ese elemento sigue coincidiendo con la URL del archivo seleccionado, incluidos los elementos traducidos que comparten un único archivo físico. Cambiar la URL de la imagen actualiza la referencia; las URL externas no conservan una referencia de biblioteca no relacionada. Gestiona las traducciones en tu plugin multilingüe, guarda la página y comprueba el texto alternativo renderizado.
Comprueba web_image con el medio previsto, un tamaño responsive apropiado y cualquier texto alternativo o transcripción requeridos. Presta especial atención a get_image y image_overlay.
Para la creación de contenido con Gutenberg, consulta Añadir una imagen de la biblioteca en vivo.