LoopMosaic for Elementor

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.