web_image Shortcode
The web_image shortcode renders the image component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_image get_image="123"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
get_image |
— | String unless stated otherwise | Select the image to be displayed. |
image_overlay |
— | hover, hide-on-hover, always |
Controls the overlay. |
image_overlay_effect |
— | gradient |
Choose the overlay style of the image. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_frame |
— | yes |
Add a frame to the overlay?. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_enter_mode |
— | follow |
Make the overlay enter from the same side your cursor does?. Available when image_overlay is hover. |
image_overlay_zoom |
yes |
yes or empty |
Enable image zoom on hover. Available when an overlay is enabled. |
image_overlay_icon |
— | String unless stated otherwise | Controls the overlay icon. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_elements |
title,description,view_icon,link_title,link_icon |
title, caption, description, view_icon, link_title, link_icon, button |
Comma-separated overlay content when omitted from raw shortcode syntax. Page Builder may save its own explicit selection. |
button_text |
Read more |
String unless stated otherwise | Sets the visible button label. Available when image_overlay_elements is button. |
button_style |
1 |
1 or a configured button-style slug |
Selects a button style defined in the POM design system. Available when image_overlay_elements is button. |
image_click_event |
link |
link, modal_box_open, slider |
Select what you want to happen when the link icon/button is clicked. Available when image_overlay_elements is link_title or link_icon or 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 |
Controls the overlay elements align. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_background |
1 |
String unless stated otherwise | Controls the overlay background color. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_background_alpha |
50 |
Number | Set a custom opacity value. Available when image_overlay is hover or hide-on-hover or always. |
image_overlay_text_color |
11 |
String unless stated otherwise | Controls the overlay text color. Available when image_overlay is hover or hide-on-hover or always. |
whole_image_click_event |
none |
none, modal_box, modal_box_open, link, slider |
What happens when clicking the image?. |
image_slider_id |
— | String unless stated otherwise | Enter the Slider ID you want to manage. Available when whole_image_click_event is slider. |
image_slider_action |
next |
next, previous, custom |
Controls the slider action. Available when whole_image_click_event is slider. |
image_slider_custom_slide_id |
— | String unless stated otherwise | Controls the custom slide id. Available when image_slider_action is custom. |
image_popup_elements |
— | description |
Elements to be displayed on image pop-up. Available when whole_image_click_event is modal_box. |
image_xfn |
— | String unless stated otherwise | This will be placed on the link rel="" parameter. |
modal_box_id |
— | String unless stated otherwise | Enter the modal box ID you wish to open. Available when whole_image_click_event is modal_box_open. |
image_alignment |
center |
left, right, center |
Select image alignment. |
image_size |
full-original-ratio |
Any registered WordPress image-size slug | Selects the generated image size. |
image_loading |
lazy |
lazy, eager, auto |
Explicit loading attributes bypass the theme lazy parser for this image. Lazy loading requires enabling Advanced > Lazy Load in the theme settings. |
image_fetchpriority |
— | high, low, auto |
Use high only for above-the-fold images. High priority forces eager loading. |
image_fit |
— | yes |
If checked image will fit to parent div width. |
image_change_hover |
— | yes |
Change image when the mouse is over. |
image_to_change_hover |
— | String unless stated otherwise | Select image to use when hover. Available when image_change_hover is yes. |
image_gif_play_options |
— | gif_autoplay, gif_mouse_over, gif_on_click, gif_play_in_viewport |
Choose how to play the .gif. |
gif_thumbnail |
— | String unless stated otherwise | Select the thumbnail for non autoplay GIFs. Available when image_gif_play_options is gif_mouse_over or gif_on_click or gif_play_in_viewport. |
custom_width |
— | String unless stated otherwise | This will override image inline width attribute. |
custom_height |
— | String unless stated otherwise | This will override image inline height attribute. |
render_svg |
— | yes |
Embed a sanitized local library SVG up to 512KB. Other sources use an ordinary image element. Fit, hover and image dimensions are preserved. |
gallery_photoswipe_width, gallery_photoswipe_height |
— | Positive pixel dimensions | Override the lightbox dimensions; normally the original image supplies them. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Image ID. |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Verification
The linked title, link icon and button follow image_click_event; the lightbox icon always enlarges the image. Modal and slider actions require an existing target ID but do not require a library destination URL. When both the whole image and its icon open the lightbox, they represent one gallery item.
For stopped GIF states, select a still gif_thumbnail. Library alternative text and other metadata are read at rendering time; cached pages may require a cache refresh to show edits.
Check web_image with the intended media, an appropriate responsive size and any required alternative text or transcript. Pay particular attention to get_image and image_overlay.
For Gutenberg authoring, see Add a live library image.