Gallery Grid Pro | WellPlayedWP

Overview

Gallery Grid Pro is a premium Elementor widget for building editorial-style image mosaics with a visual CSS grid area builder. It is designed for builders who want something far more art-directed than a standard thumbnail gallery without having to hand-code grid placement.

Requirements

WordPress 6.5 or newer
Elementor active
PHP 7.4 or newer

Installation

Upload the plugin folder to wp-content/plugins.
Activate Gallery Grid Pro in WordPress.
Open a page in Elementor.
Search for Gallery Grid Pro in the widget panel.

What Makes This Widget Premium

Beyond the core image grid and click settings, the widget includes three standout features that make it feel like a product rather than a basic addon:

Visual layout builder: open the larger modal editor, switch between Desktop, Tablet, and Mobile tabs, set rows and columns for each breakpoint, and assign images to named CSS grid areas instead of guessing numeric placement.
Dynamic gallery support: connect the Images control to an Elementor dynamic tag such as an ACF Gallery field and keep the original attachment order from the source field.
Editorial overlays: pull titles, captions, and alt text from the Media Library to create polished, magazine-style storytelling on hover or permanently on the tile.
Motion and spotlight mode: combine reveal animations, hover zoom or pan effects, and sibling dimming for a more immersive gallery experience.

Basic Workflow

Add the widget to your Elementor section.
Choose the images in the Images control. You can also click the dynamic tags icon on Images and choose an ACF Gallery field when this widget is used inside an Elementor template.
If you are using a dynamic gallery source, wait for Elementor to refresh the live preview after choosing the field.
Pick a Starter Layout if you want a fast starting point.
Use the Visual Layout Planner: Open the layout builder. When Images uses a dynamic gallery field, the builder reads the gallery from the live preview so all source images are available while you plan the layout. Switch between Desktop, Tablet, and Mobile tabs as needed. Set the row and column counts for the active device inside the modal. Drag across the grid to define that image’s named area. Click and release on the same cell to create a 1×1 tile. Use the modal Starter Layout picker with Apply Preset when you want a faster starting point for the active device. Use Clear All in the modal if you want to reset the draft layout. Choose Save Layout to keep the changes, or Close Without Saving to discard them.
Choose the Image Click Action: Do Nothing Open Lightbox Open Image File
Style the gallery with gap, image size preset, overlays, and motion controls.

Responsive Behavior

Desktop, Tablet, and Mobile can each have their own named-area layout.
Row and column counts for each breakpoint are managed inside the layout builder modal.
Only images assigned in the layout builder are rendered.
This lets you art-direct each breakpoint instead of relying on automatic repacking.
When the gallery source is dynamic, the builder keeps the saved layout while Elementor refreshes the source field and then repopulates the image list from the live preview.

Control Reference

Gallery

Images: Select the gallery images manually or use Elementor dynamic tags to pull an ACF Gallery field from the current post, archive item, or template preview context. The rendered grid keeps the attachment order stored in ACF, and the layout builder uses the live preview source when a dynamic gallery is selected.
Starter Layout: Loads one of the bundled layout concepts as a starting point.
Visual Layout Planner: Open the modal builder, switch devices, set rows and columns for each breakpoint, and drag across the grid to assign images to named areas. When the gallery source is dynamic, wait for the live preview to refresh before opening the builder so the planner can load the current gallery items.
Image Click Action: Choose no action, Elementor lightbox, or opening the image file.
Requested Image File Size: Choose which WordPress image size is used in the grid for performance. Fixed size choices output only that file size in the image src. Choose Full (Responsive) when you want WordPress to output responsive srcset and sizes markup.

Editorial Overlay

Overlay Display: Hidden, on hover, or always visible.
Overlay Content: Title + caption, title only, caption only, or alt text.
Show Image Number: Adds a numbered badge to each tile.
Overlay Alignment: Left, center, or right aligned content.

Motion & Spotlight

Hover Effect: None, zoom in, zoom out, or slow pan up.
Entrance Effect: None, fade up, or staggered reveal.
Spotlight Hover: Dims neighboring images while the active tile is hovered.
Spotlight Tint Color: Sets the tint color applied to non-hovered images during spotlight mode.
Spotlight Tint Opacity: Controls how strong the tint appears on non-hovered images during spotlight mode.

Grid Style

Gap Between Images: Controls the spacing between tiles.
Image Size Preset: Responsive control with cascade. Desktop flows down to tablet and mobile until you override tablet, and tablet then flows down to mobile until you override mobile.
Custom Tile Height: Responsive control with per-breakpoint overrides. It affects the gallery when the matching Image Size Preset is set to Custom Height.
Corner Radius: Rounds the image tile corners.
Image Fit: Cover or contain.
Image Focus: Controls object-position for all images in the widget.
Box Shadow: Add depth around each tile.

Overlay Style

Typography: Controls overlay text styling.
Text Color: Controls overlay text color.
Overlay Color: Controls the gradient surface behind overlay content.
Overlay Padding: Controls the inner spacing of the overlay panel.

Tips

Use Balanced Editorial when you want a fast, polished layout that works with almost any image set.
Use Hero Left or Hero Center when one image should lead the story.
Use Media Library captions for short descriptive overlay text instead of retyping content in Elementor.
When using this widget in a single template or loop template, set the Images control from an ACF Gallery dynamic tag so each item can inherit its own gallery automatically.
After changing the Images control to a dynamic gallery, let Elementor finish refreshing the preview before opening the layout builder so the planner can load the full image list.
If you use Open Lightbox, the gallery follows Elementor’s own lightbox settings instead of a separate plugin-specific modal.
In the Elementor editor preview, image clicks stay inactive so you can select and edit the widget without opening the lightbox.
Choose a smaller requested image size when using many small tiles to improve performance, or choose Full (Responsive) when the browser should pick from WordPress responsive image candidates.

Developers

Gallery Grid Pro includes filters and actions for extending layouts and output. The examples below can go in a small custom plugin or your theme’s functions.php.

`ggp_gallery_layout_presets`

Use this filter to add a new preset option to the Elementor dropdown. Pair it with ggp_gallery_preset_assignments to define the actual tile map.

add_filter(
    'ggp_gallery_layout_presets',
    function( $presets ) {
        $presets['feature-strip'] = array(
            'label' => __( 'Feature Strip', 'my-site' ),
        );

        return $presets;
    }
);

`ggp_gallery_preset_assignments`

Use this filter to define the row and column spans for a custom preset. Each item should include image_index, row_start, row_span, column_start, and column_span.

add_filter(
    'ggp_gallery_preset_assignments',
    function( $assignments, $preset, $image_count, $columns, $rows ) {
        if ( 'feature-strip' !== $preset ) {
            return $assignments;
        }

        return array(
            array(
                'image_index'  => 0,
                'row_start'    => 1,
                'row_span'     => min( 2, $rows ),
                'column_start' => 1,
                'column_span'  => min( 3, $columns ),
            ),
            array(
                'image_index'  => 1,
                'row_start'    => 1,
                'row_span'     => 1,
                'column_start' => min( 4, $columns ),
                'column_span'  => max( 1, $columns - 3 ),
            ),
            array(
                'image_index'  => 2,
                'row_start'    => 2,
                'row_span'     => 1,
                'column_start' => min( 4, $columns ),
                'column_span'  => max( 1, $columns - 3 ),
            ),
        );
    },
    10,
    5
);

`ggp_gallery_saved_assignments`

Use this filter to adjust or normalize the assignments saved by the Elementor planner before the gallery renders.

add_filter(
    'ggp_gallery_saved_assignments',
    function( $assignments, $raw_layout, $image_count, $columns, $rows ) {
        return array_values(
            array_filter(
                $assignments,
                function( $assignment ) use ( $columns, $rows ) {
                    return $assignment['column_start'] <= $columns && $assignment['row_start'] <= $rows;
                }
            )
        );
    },
    10,
    5
);

`ggp_gallery_layout_items`

Use this filter to adjust the fully resolved layout before it is rendered. This is useful when you want to enforce a special hero tile or reshuffle specific images programmatically.

add_filter(
    'ggp_gallery_layout_items',
    function( $layout_items, $images, $settings ) {
        if ( empty( $layout_items ) ) {
            return $layout_items;
        }

        $layout_items[0]['column_span'] = min( 3, max( 1, (int) $settings['columns'] ) );
        $layout_items[0]['row_span']    = 2;

        return $layout_items;
    },
    10,
    3
);

`ggp_gallery_image_data`

Use this filter to alter the metadata used for overlays and lightbox captions.

add_filter(
    'ggp_gallery_image_data',
    function( $image_data, $attachment_id ) {
        $credit = get_post_meta( $attachment_id, '_photo_credit', true );

        if ( $credit ) {
            $image_data['caption'] = trim( $image_data['caption'] . ' / Photo: ' . $credit );
        }

        return $image_data;
    },
    10,
    2
);

`ggp_gallery_before_grid`

Use this action to output content immediately before the gallery markup.

add_action(
    'ggp_gallery_before_grid',
    function( $settings ) {
        if ( 'always' === $settings['overlay_visibility'] ) {
            echo '<div class="my-gallery-kicker">Featured Story Gallery</div>';
        }
    }
);

`ggp_gallery_after_grid`

Use this action to output supporting content after the gallery.

add_action(
    'ggp_gallery_after_grid',
    function( $settings, $layout_items ) {
        printf(
            '<p class="my-gallery-summary">%s</p>',
            esc_html(
                sprintf(
                    /* translators: %d number of rendered items. */
                    _n( '%d image rendered.', '%d images rendered.', count( $layout_items ), 'my-site' ),
                    count( $layout_items )
                )
            )
        );
    },
    10,
    2
);

Changelog

1.2.0 (May 8, 2026)

Add Full (Responsive) as the responsive image-size option while fixed requested image sizes now render only the selected file size.

1.1.0 (May 8, 2026)

Add Elementor dynamic tag support to the Images control for ACF gallery fields.
Add preview-aware layout builder support so dynamic gallery sources can be assigned visually inside Elementor templates.
Fix layout preservation when switching the Images control from a manual gallery to a dynamic gallery source.
Fix the dynamic gallery layout builder image list so unassigned preview images still appear in the planner.
Add gallery value normalization so dynamic ACF gallery values render in their original ACF order.

1.0.1 (April 11, 2026)

Fix Elementor editor previews so clicking gallery images does not trigger the lightbox while editing.
Fix occasional Elementor editor warnings related to missing responsive image size preset keys.
Remove the responsive control condition from custom tile height so Elementor does not evaluate missing tablet and mobile preset keys.

1.0.0 (April 8, 2026)

Add the Elementor widget, visual planner, starter layouts, responsive desktop/tablet/mobile layouts, overlays, responsive tile sizing, spotlight tint controls, and Elementor lightbox integration.