web_gallery Shortcode
The web_gallery shortcode renders the gallery 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_gallery]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
gallery_mode |
— | String unless stated otherwise | Controls the gallery mode. |
gallery_random_mode |
— | yes |
Display the images in a different order each time the page loads. |
gallery_image_size |
thumbnail |
Any registered WordPress image-size slug | Selects the generated image size used by gallery items. |
gallery_style |
grid |
grid, masonry, carrousel, carousel_2, full_screen, image_with_thumbnails |
Choose the style of the gallery. |
gallery_popup_elements |
— | description |
Elements to be displayed on image pop-up. |
gallery_go_to_link_event |
none |
none, same-page, other-window |
If image has a link, select what to do if clicked. |
gallery_xfn |
— | String unless stated otherwise | This will be placed on the link rel="" parameter. This will be applied to all links within the gallery. |
gallery_images |
— | String unless stated otherwise | Select the images to be displayed in the gallery. Available conditionally according to gallery_mode. |
gallery_videos |
— | String unless stated otherwise | Add videos from Youtube or Vimeo. Available conditionally according to gallery_mode. |
gallery_column_number |
3 |
1, 2, 3, 4, 6, 12 |
How many columns would you like to appear in one row?. Available when gallery_style is grid or masonry. |
gallery_mobile_column_number |
default |
default, 1, 2, 3, 4, 6, 12 |
How many columns would you like to appear in one row (in mobile)? It only works if it is Grid. It doesn't work with Isotope. Available when gallery_style is grid or masonry. |
gallery_column_spacing |
5 |
0, 1, 5, 10, 15 |
Spacing between images. Available when gallery_style is grid or masonry. |
gallery_overlay |
hover |
hover, hide-on-hover, always |
Controls the overlay. Available when gallery_style is grid or masonry. |
gallery_image_lightbox_click_full |
— | yes |
Make the complete image open the lightbox. The view icon may remain enabled; both controls open the same item. Available when gallery_style is grid or masonry. |
gallery_carousel_show_numbers |
— | yes |
Controls the enable carousel numbers. Available when gallery_style is carrousel. |
gallery_carousel_adaptive_height |
yes |
yes |
If checked, carousel height will adapt to each cell. Available when gallery_style is carrousel. |
gallery_carousel_cells_loop |
yes |
yes |
If checked, infinite loop will be allowed. Available when gallery_style is carrousel or carousel_2. |
gallery_carousel_draggable |
yes |
yes |
Enable dragging across slides. Available when gallery_style is carrousel or carousel_2. |
gallery_carousel_autoplay |
— | yes |
If checked, images will rotate on their own. Available when gallery_style is carrousel or carousel_2. |
gallery_carousel_autoplay_speed |
2000 |
Number | Select the carousel speed. Available when gallery_carousel_autoplay is yes. |
gallery_display_arrows |
yes |
yes |
If checked, arrows will be visible. Available when gallery_style is carrousel or carousel_2. |
gallery_carousel_gap |
— | yes |
If checked, there will be no gaps between images. Available when gallery_style is carousel_2. |
gallery_same_dimensions |
— | yes |
If checked, all images will have the same dimensions. Available when gallery_style is carousel_2. |
carousel_height_in_pixels |
500 |
Number | Specifies carousel height in pixels. Same dimensions checkbox must be enabled. Available when gallery_same_dimensions is yes. |
gallery_overlay_effect |
— | gradient |
Choose the overlay style of the image. Available when gallery_overlay is hover or hide-on-hover or always. |
gallery_overlay_frame |
— | yes |
Add a frame to the overlay?. Available when gallery_overlay is hover or hide-on-hover or always. |
gallery_overlay_enter_mode |
— | follow |
Make the overlay enter from the same side your cursor does?. Available when gallery_overlay is hover. |
gallery_overlay_zoom |
yes |
yes |
Enable image zoom on hover. Available when gallery_overlay is hover or hide-on-hover or always. |
gallery_overlay_elements |
title,description,view_icon,link_icon |
title, caption, description, view_icon, link_icon, button |
Elements to be displayed on image overlay. Available when gallery_overlay is hover or hide-on-hover or always. |
gallery_button_text |
Read more |
String unless stated otherwise | Controls the read more text. Available when gallery_overlay_elements is button. |
gallery_button_style |
1 |
1 or a configured button-style slug |
Selects the overlay button style. Available when gallery_overlay_elements is button. |
gallery_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 gallery_overlay is hover or hide-on-hover or always. |
gallery_overlay_background |
1 |
String unless stated otherwise | Controls the overlay background color. Available when gallery_overlay is hover or hide-on-hover or always. |
gallery_overlay_background_alpha |
50 |
Number | Set a custom opacity value. Available when gallery_overlay is hover or hide-on-hover or always. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
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. |
Customize the stylesheet
Administrators can replace the complete Gallery module stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Gallery. Saving publishes an optimized per-site copy without adding the stylesheet to pages that do not contain the shortcode. Reverting returns the existing web-gallery handle to the current gallery.min.css supplied by the theme. The gallery attributes, generated markup, web_gallery and web_carousel scripts, lazy PhotoSwipe boundary, carousel-only Flickity assets, masonry-only Isotope assets, and full-screen Swiper and pom-fullpage assets remain unchanged.
Verification
Gallery metadata is resolved from the media library at render time. Cached pages must be refreshed to show library changes. Thumbnail navigation is scoped to each gallery, including when several shortcode and Gutenberg galleries share a page. Full-screen images retain their alt text and responsive image sources.
The shortcode preserves its pixel-valued gallery_column_spacing contract. The Gutenberg Gallery block uses the theme's rem padding scale and supports explicit mobile column counts in masonry as well as grid.
Check web_gallery with the intended media, an appropriate responsive size and any required alternative text or transcript. Pay particular attention to gallery_mode and gallery_random_mode.