LoopMosaic for Elementor WP Registry grade A. No security issues foundWP RegistryNo security issues foundOpen the reportA

The ultimate Elementor addon for stunning post displays. Create beautiful Mosaic, Grid, and Masonry layouts with advanced features including AJAX-powered modal popups, real-time JetSmartFilters search integration, infinite scroll pagination, and seamless support for Elementor Loop Items & JetEngine Listings.

---

🚀 Key Features

🎨 Flexible Layout Patterns

• Classic Grid — Clean, uniform post grid
• Metro Mosaic — Dynamic tile sizes for visual interest
• Masonry — Pinterest-style staggered layout
• Highlight First — Featured first post with smaller cards
• Uniform Grid — Equal-sized cards in perfect rows
• Featured Grid — Alternating pattern of 2+3 cards
• Hero Grid — Alternating pattern of 1 hero + 3 small cards

✨ Interactions & Animations

• Scroll Animations — Hardware-accelerated, staggered entry animations (Fade, Slide, Scale, Zoom) via IntersectionObserver.
• Hover Effects — Smooth scaling and image transitions.

📐 Full Customization

• Columns: 3-6 column layouts with responsive controls
• Gaps & Padding: Pixel-perfect spacing control
• Border Radius: Rounded corners for modern aesthetics
• Color Overlays: Gradient overlays with multiple color presets
• Box Shadows: Depth and elevation effects
• Card Borders: Normal and hover border controls for classic card styles
• Floating Icon Cards: Modern image-first cards with icon, arrow, sizing, and pattern-aware controls
• Typography: Full control over titles and category labels

🔗 Template Integrations

Integration	Description
Default Cards	Built-in responsive card design
Elementor Loop Items	Use your custom Loop Builder templates
JetEngine Listings	Full JetEngine listing template support

🔍 JetSmartFilters Integration

• Real-time Search — Instant results as you type
• AJAX Filtering — No page reloads
• Multiple Filter Types — Search, checkboxes, dropdowns, range
• Pagination Support — Works with JSF pagination widgets

⚡ Built-in AJAX Modal System

Forget heavy third-party popup plugins! LoopMosaic includes a lightweight, performant modal system:

• Instant Loading — Content fetched dynamically via AJAX
• Custom Templates — Use any Elementor template as popup content
• Dynamic Data — Automatically pulls post data (title, image, content, custom fields)
• Keyboard Navigation — ESC key to close
• Click Outside — Close by clicking overlay
• Smooth Animations — Elegant open/close transitions

🔄 Infinite Scroll & Load More Button

• Auto-Load — Posts load automatically on scroll (Infinite Scroll mode)
• Manual Button — Click to load more posts (Load More Button mode)
• Smooth Animation — Fade-up animation for new items
• Loading Indicator — Built-in spinner
• Smart Detection — Stops when no more posts
• Button Styling — Full customization: text, colors, typography, padding, margin
• Button Alignment — Left, Center, Right alignment options
• Works with Filters — Compatible with JetSmartFilters

🛠️ Widget Controls

Query Builder

• Post Type selection (Posts, Pages, Custom Post Types)
• Taxonomy filtering (Categories, Tags, Custom Taxonomies)
• Order by (Date, Title, Menu Order, Random)
• Posts per page limit
• Offset support

Click Actions

Action	Description
Open Single Post	Navigate to post permalink
Open Built-in Modal	Open AJAX modal with post content
None	Static grid (no click action)

Styling Options

• Title typography, color, alignment
• Category badge styling
• Overlay gradient colors
• Hover effects
• Box shadow presets

---

📦 Installation

From GitHub

1. Download the latest release from Releases
2. Upload to /wp-content/plugins/ directory
3. Activate via Plugins menu in WordPress

Requirements

Requirement	Version
WordPress	6.0+
PHP	7.4+
Elementor	3.0+
Elementor Pro	Optional (for Loop Items)
JetEngine	Optional (for Listings)
JetSmartFilters	Optional (for Filtering)

---

🎯 Usage Guide

Basic Setup

1. Open Elementor Editor
2. Drag LoopMosaic Grid widget to your page
3. Configure query settings (post type, taxonomy, limit)
4. Choose layout pattern
5. Style as desired

Using Custom Templates

With Elementor Loop Items

1. Create a Loop Item template in Elementor
2. In LoopMosaic widget, set Template Source to Elementor Loop Item
3. Select your template from dropdown

With JetEngine Listings

1. Create a Listing in JetEngine
2. In LoopMosaic widget, set Template Source to JetEngine Listing
3. Select your listing from dropdown

Modal with Custom Template

1. Create a template in Theme Builder or Saved Templates
2. In LoopMosaic widget → Interaction
3. Set Click Action to Open Built-in Modal
4. Enable Use Custom Template
5. Select your template

JetSmartFilters Integration

1. In LoopMosaic widget → JetSmartFilters
2. Enable Enable JetSmartFilters
3. Set a Query ID (e.g., my-grid)
4. Add JSF filter widgets (Search, Checkbox, etc.)
5. Set filter's Content Provider to LoopMosaic Grid
6. Set filter's Query ID to match (e.g., my-grid)

Using Infinite Scroll or Load More Button

1. In LoopMosaic widget → Query
2. Enable Enable Infinite Scroll
3. Set Posts Per Page for initial load
4. Choose Load Mode:
   • Infinite Scroll — Auto-load on scroll
   • Load More Button — Manual click button
5. Customize button text and alignment
6. Style button in Load More Button tab
7. Save and test on frontend

---

📋 Changelog

Version 1.20.6 (2026-06-14)

• Fixed: Carousel image scale overrides — added image property overrides (transform: none !important, opacity: 1 !important, and transition: none !important) to all images inside .loopmosaic-carousel-wrap. This neutralizes external page animations (e.g. .img_gal scroll animations) that scale down the carousel's slide images and leave thick gaps/borders on the sides of the slides.

Version 1.20.5 (2026-06-14)

• Fixed: Carousel image border/gap (object-fit) — added width: 100% !important and object-fit: cover !important to the carousel media wrapper and image classes. This fixes the issue where landscape images scaled to 100% height would leave vertical empty columns (showing as a thick green border/gap) on the left and right sides of the slide.

Version 1.20.4 (2026-06-14)

• Fixed: Carousel template height collapsing and alignment — corrected CSS selectors for .loopmosaic-item__media, .loopmosaic-item__image, and Elementor loop templates (.elementor) to properly inherit the 100% height inside the Swiper carousel. This stops container backgrounds and layout designs from collapsing or shifting out of place.
• Fixed: Stacked card on last slide — added swiper callbacks to dynamically add .lm-carousel-end class to the wrapper when reaching the last slide (with loop disabled), hiding the stacked card when there are no subsequent cards.

Version 1.20.3 (2026-06-14)

• Fixed: Dark strip at the top of carousel slides — slide images defaulted to display: inline-block, leaving baseline whitespace above the image that exposed the swiper background. Slide images are now display: block so the photo sits flush to the rounded top.

Version 1.20.2 (2026-06-14)

• Fixed (root cause): Green stacked-card bar flashing over the photo during a loop wrap. Swiper's cloned loop slides kept loading="lazy" images that weren't loaded yet, so the wrapped-to slide was transparent and revealed the stacked card behind it. Carousel images are now force-loaded eagerly, and the swiper container has an opaque background as a fallback.

Version 1.20.1 (2026-06-14)

• Fixed: Stacked card overlay on last slide — transform: translateZ(0) on the swiper promoted it to a GPU composite layer, breaking z-index ordering so the stack card rendered over slide content. Removed the transform; simple z-index: 1 is sufficient and correct.
• Fixed: Carousel stopping on last slide — removed watchSlidesProgress (conflicts with loop mode) and added loopAdditionalSlides: 1 for seamless infinite looping.

Version 1.20.0 (2026-06-14)

• Fixed: Slide transition glitch — removed will-change: transform from swiper container (was corrupting overflow: hidden clip for GPU-composited children); replaced with transform: translateZ(0).
• Fixed: Stage and stacked card now have transition: none !important to prevent the theme's blanket transition: all from animating them during Swiper's slide changes.
• Fixed: Hover lift — extended override to include box-shadow: none !important alongside transform: none !important (Elementor Loop Template containers animate a box-shadow on hover which was creating the "lift forward" illusion).

Version 1.19.9 (2026-06-14)

• Fixed: Stacked card glitch during slide transition — replaced CSS ::before pseudo-element with a real DOM element so Swiper's GPU compositing layers don't interfere.
• Fixed: Hover lift now suppressed for all element types inside carousel (Elementor Loop .e-con, .elementor-widget-wrap, JetEngine .jet-listing-grid__item, Swiper slide, default card).

Version 1.19.8 (2026-06-14)

• Fixed: Stacked card color lightened further to rgba(22,82,68,0.74).

Version 1.19.7 (2026-06-14)

• Fixed: Carousel border radius default raised to 24px (was 18px); stacked card peek is now lighter (rgba(15,58,50,0.82)); stacked card top-corners now track the Border Radius control automatically.

Version 1.19.6 (2026-06-14)

• Fixed: Stacked card Elementor control default was rgba(10,41,38,0.5) (50% opacity) and was overriding the CSS file — raised default to rgba(8,35,32,0.92) so the peek renders solid by default.

Version 1.19.5 (2026-06-14)

• Fixed: Stacked card behind carousel CSS opacity raised from 0.5 → 0.92.

Version 1.19.4 (2026-06-14)

• New: Stacked card "peek" behind carousel slides for a layered look, with toggle, color, peek-amount, and inset controls.

Version 1.19.3 (2026-06-14)

• Fixed: Carousel slides no longer lift "forward" on hover (the grid card-lift is disabled in carousel mode).

Version 1.19.2 (2026-06-14)

• Fixed: Carousel pagination switches now render below the card (not on the photo), so they never overlap slide titles/buttons. Navigation arrows stay centered on the card.

Version 1.19.1 (2026-06-14)

• Improved: Carousel pagination switches are now on by default and styled as pill indicators (active switch elongates), with editable Switch / Active Switch colors.

Version 1.19.0 (2026-06-14)

• New: Carousel (Slider) layout mode — powered by Swiper 11, with right-side vertical navigation (↑↓ circular buttons). Supports Default Cards, Elementor Loop Templates, and JetEngine Listings.
• New: Full Elementor controls for carousel: height, border radius, loop, autoplay, transition speed, pagination dots, and navigation button styling.

Version 1.18.1 (2026-06-13)

• Performance: loopmosaic_get_redirect_url() now skips four regex scans when post content doesn't contain "location", eliminating unnecessary work for the vast majority of posts.

Version 1.18.0 (2026-06-13)

• Security: AJAX query inputs (Load More / JetSmartFilters) are now sanitized before reaching WP_Query — post type must be publicly queryable, taxonomy must be registered, order/orderby are whitelisted, and posts-per-page is clamped.
• Security: The modal endpoint now serves only publicly viewable posts and rejects non-template IDs, preventing enumeration of private/draft content (IDOR).
• Security: All inline overlay CSS variables are consistently escaped, closing an attribute-injection vector on the filter endpoint.
• Refactor: Item markup is now produced by a single shared LoopMosaic_Renderer, replacing five duplicated render paths.
• Fix: Load More and filtered results now match the initial render (media wrapper, hover overlay, custom overlay colors, floating icons).
• Fix: Masonry re-lays out after JetSmartFilters AJAX filtering, and pagination resets to page 1 for the filtered set.
• Fix: Filter values are scoped per grid query ID, so multiple grids on one page no longer interfere.
• Cleanup: Removed dead code (jetsmartfilters-compat-clean.php, duplicate JS helpers, duplicate provider hook, leftover console.log calls).

Version 1.12.8 (2026-03-16)

• New: Added Featured Grid (2+3) layout pattern — 2 large cards on top, 3 equal cards below, repeating cyclically.
• New: Added Hero Grid (1+3) layout pattern — 1 full-width hero card on top, 3 equal cards below, repeating cyclically.
• New: Responsive support for both new patterns — collapse to uniform grid on tablet/mobile.

Version 1.12.7 (2026-03-16)

• New: Added Exclude Posts feature — searchable multi-select dropdown in Query settings to exclude specific posts from the grid.
• New: Exclude works with all post types and is compatible with Infinite Scroll / Load More.

Version 1.12.6 (2026-02-13)

• Improvement: Comprehensive responsive design overhaul for mobile and tablet devices.
• Improvement: 5 breakpoints (1024px, 768px, 600px, 480px, 360px) for grid layout.
• Improvement: Touch device optimizations — hover effects removed, 44px touch targets.
• Improvement: Mobile modal uses bottom-sheet UX pattern on small screens.
• Improvement: Gallery columns reduce automatically on smaller screens.
• Improvement: Load More button full-width on mobile.

Version 1.12.5 (2026-02-11)

• Fix: Resolved Z-Index conflict where Elementor Lightbox would open behind the LoopMosaic Modal.

Version 1.12.4 (2026-02-11)

• New: Added support for 1 and 2 Column Layouts in LoopMosaic widget.
• Fix: Resolved missing Elementor Post Info (Meta Data) in Modal Popup by enforcing correct post context.
• Fix: Fixed CSS visibility issues for Elementor dynamic content inside the Modal.

Version 1.12.3 (2026-02-10)

• Fix: "LoopMosaic Grid" now correctly appears in the "Filter for" dropdown for JetSmartFilters Checkbox, Radio, Select, and Range widgets.
• Improved: Robust provider injection into Elementor controls for better compatibility.

Version 1.12.2 (2026-02-10)

• New: Added "Under Image" Card Style option for alternative layouts.
• Fix: Resolved critical error with undefined $colors variable in AJAX requests.
• Fix: Fixed PHP fatal error caused by missing get_overlay_class method.
• Fix: Fixed potential crash with opacity slider controls returning unexpected data types.
• Fix: "Modal" click action now correctly works with Elementor Loop Items and JetEngine Listings (previously only worked with Default Cards).
• Tweak: Improved internal link generation logic for better compatibility across template types.

Version 1.12.1 (2026-02-10)

• Fix: Restored missing "Load More" button controls and rendering logic.
• Fix: Corrected Infinite Scroll behavior issues.
• Fix: Improved "Load More" button styling and positioning integration.

Version 1.12.0 (2026-02-10)

• New: Major refactor for better performance and stability.
• New: Enhanced "Load More" button vs Infinite Scroll handling.
• New: Improved custom overlay color logic.

Version 1.9.15 (2026-02-09)

• ✅ New: No Posts Found Customization - custom message text and styling (color, typography, alignment, padding)
• ✅ New: Custom Overlay Colors - opacity slider, text color, and hover text color controls
• ✅ Improved: CSS variables for dynamic custom overlay styling
• ✅ Fixed: Text color CSS specificity issues in Elementor editor

Version 1.9.6 (2026-02-09)

• 🔒 Security: Fixed critical vulnerability in Load More handler (enforced nonce verification)
• ✅ Fixed: Resolved popup click action not working on filtered items
• ✅ Improved: Synchronized AJAX rendering logic with main widget
• ✅ Changed: Removed strict dependency on JetSmartFilters for standalone usage

Version 1.9 (2026-02-06)

• ✅ New: Load More button feature - choose between Infinite Scroll or manual button
• ✅ New: Button text customization
• ✅ New: Full button styling controls (colors, typography, padding, margin)
• ✅ New: Button alignment options (Left, Center, Right)
• ✅ Improved: Enhanced JavaScript for button click handling and state management
• ✅ Improved: Added loading spinner animation for button mode

Version 1.8 (2026-02-06)

• 🧹 Cleaned: Removed all debug logging code for production release
• 🧹 Cleaned: Removed all console.log statements from JavaScript
• 🧹 Cleaned: Deleted old debug JavaScript files (v2-v9)
• ✅ Optimized: Single clean mosaic-filters.js for better performance

Version 1.7 (2026-02-06)

• ✅ New: Comprehensive JetSmartFilters support for ALL filter types:
  • Search inputs
  • Checkbox filters
  • Radio button filters
  • Select/Dropdown filters
  • Range slider filters
  • Date picker filters
  • Apply/Reset buttons
• ✅ Improved: Enhanced PHP filter parser with checkbox and range support
• ✅ Improved: Better debouncing for filter requests

Version 1.6 (2026-02-06)

• ✅ Fixed: JetSmartFilters search integration now works correctly
• ✅ New: Direct search input binding for reliable filtering
• ✅ Improved: Better debouncing for search requests
• ✅ Fixed: Duplicate data attributes issue resolved

Version 1.5

• ✅ Added infinite scroll pagination
• ✅ Improved modal loading animation
• ✅ Better JetEngine compatibility

Version 1.0

• 🚀 Initial release
• Mosaic, Grid, Masonry layouts
• AJAX Modal system
• Elementor Loop Item support
• JetEngine Listing support

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

📄 License

This plugin is licensed under the GPL v2 or later.

---

👤 Author

Abe Prangishvili

• GitHub: @prangishviliAbe

---

⭐ Support

If you find this plugin useful, please consider giving it a ⭐ on GitHub!