--- title: "Opening Shortcodes and FooGallery in FooBox (Pro)" id: "196439" type: "knowledgebase" slug: "foobox-shortcodes-foogallery" published_at: "2026-07-24T09:19:36+00:00" modified_at: "2026-07-24T09:19:36+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery.md" excerpt: "Shortcode output can be opened as inline HTML content by placing a Shortcode block inside a hidden FooBox Group. This works for FooGallery, forms, and other shortcodes that render correctly inside normal page content." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Opening Shortcodes and FooGallery in FooBox (Pro) ## Related Articles - [Getting Started with FooBox in the Block Editor](https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/) - [Creating Image Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Creating Video and Iframe Lightboxes (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/) - [Creating Button Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) - [Opening Hidden Block Content (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/) - [Creating Custom Lightbox Groups](https://fooplugins.com/documentation/foobox/block-editor/foobox-custom-lightbox-groups/) - [Using FooBox with the WordPress Core Lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) Shortcode output can be opened as inline HTML content by placing a Shortcode block inside a hidden FooBox Group. This works for FooGallery, forms, and other shortcodes that render correctly inside normal page content. Shortcode and inline HTML lightboxes require FooBox Pro ## See FooGallery inside FooBox Open a rendered FooGallery from hidden block content to preview the shortcode workflow before configuring it on your site. [See the FooGallery demo](/foobox/demos/#demo-hidden-foogallery) [View FooBox pricing](/foobox/#pricing) The hidden HTML content handler requires FooBox Pro. ## 1. Add the shortcode to a Group Add a Group block, then add a **Shortcode** block inside it. Enter the shortcode normally. For example: ``` [foogallery id="123"]Code language: JSON / JSON with Comments (json) ``` Select the outer Group, enable **Use as hidden FooBox content**, assign a unique HTML ID, and leave **Hide on front end** enabled. ![A FooGallery Shortcode block inside a hidden FooBox Group](https://fooplugins.com/wp-content/uploads/2026/07/45-shortcode-inside-group.webp)The shortcode remains editable WordPress content; FooBox does not require it to be copied into hand-written HTML. ## 2. Match the trigger to the Group Add a Button, enable FooBox, and set: - **Content type:** HTML content - **Lightbox URL or target:**`#` plus the hidden Group ID - **Width and Height:** large enough for the rendered shortcode output For example, if the Group ID is `hidden-foogallery`, the Button target is `#hidden-foogallery`. ![A Button targeting the hidden FooGallery Group with Pro HTML content](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201340%20780'%3E%3C/svg%3E)## 3. Preview the rendered shortcode Preview the page and click the Button. The shortcode is rendered by WordPress in the hidden Group and then displayed inside FooBox. ![A rendered FooGallery displayed inside a FooBox HTML lightbox](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)Test the shortcode’s own interactions inside the overlay. For a gallery, confirm thumbnails render and any nested links behave as intended. For a form, verify validation, AJAX submission, confirmations, and keyboard focus. ## Form example The same pattern can open a form shortcode: ``` [gravityform id="10" ajax="true" title="true"]Code language: JSON / JSON with Comments (json) ``` Use a unique Group ID such as `contact-form-lightbox` and point the Button to `#contact-form-lightbox`. AJAX behavior depends on the form plugin supporting inline rendered forms. ## Sizing shortcode content - Begin with a width around `900–1000` pixels for a gallery and a height around `650–700` pixels. - Use a smaller width for a simple form or text layout. - Test at desktop, tablet, and phone sizes; FooBox constrains the lightbox to the available viewport. - Avoid fixed-width child blocks that cannot shrink on smaller screens. ## Troubleshooting - **The raw shortcode is displayed:** confirm the shortcode’s plugin is active and the shortcode works in normal page content. - **Nothing opens:** verify FooBox Pro, the Group ID, the leading `#`, and the Button’s HTML content type. - **The rendered content is cut off:** increase the trigger dimensions or remove fixed dimensions from the nested content. - **A form does not submit:** test it outside FooBox first, then check the form plugin’s AJAX and inline-rendering support. - **The Group appears in the page:** enable Hide on front end on the outer Group. Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)