Interactive Features
Square Orb Gallery provides visitor interaction tools to make exploring large photo libraries engaging, fast, and accessible.
1. Smart Search (Experimental AI)
When enabled, Smart Search renders a responsive search input directly above your gallery grid.
- Live Client-Side Filtering: As visitors type, gallery items filter instantly without reloading the page. Searches evaluate image titles, captions, and assigned category taxonomy names.
- Instant Feedback & Counters: Displays a dynamic result counter (
Showing X itemsorShowing 1 item) so visitors know how many matches exist. - Filter Reset Button: An inline Reset filters button appears as soon as a search or filter is applied, allowing visitors to return to the full collection with one click.
- Empty State Handling: If no images match the search criteria, a clean notification message (“No items matched your current filter/search.”) is displayed in place of an empty space.
2. Category Filters
Square Orb automatically bridges WordPress categories with your media library attachments.
- Taxonomy Integration: When your attachment images have categories assigned, enabling Category Filters automatically generates filter buttons above the gallery.
- Dynamic Active States: An All chip is active by default. Clicking any category button filters the grid using smooth CSS opacity and transform transitions.
- Combined Discovery: Category filters and Smart Search work together—visitors can click a category (e.g., “Portraits”) and then search within that category.
3. Viewport Scroll Animations
Square Orb includes hardware-accelerated scroll animations to provide a polished, app-like entrance for your photography.
- Intersection Observer: Uses native browser
IntersectionObserverAPIs (threshold: 0.1) to monitor when images scroll into view. - Performance Focused: Non-visible elements stay lightweight until needed, reducing CPU and GPU work during rapid scrolling.
- Auto-Disable: Scroll animations are automatically disabled on the Traveler’s Map layout to keep pin rendering crisp and responsive.
4. Dynamic AJAX Loading & “Load More”
For galleries containing dozens or hundreds of photos, Square Orb avoids long initial page load times by loading images progressively.
- Initial Media Per Page: Choose how many media items load initially (min: 4, default: 20).
- REST API Endpoint: When clicking Load More, the gallery requests the next batch from
/wp-json/square-orb/v1/get-imagesand injects new cards into the DOM. - Toggle to “Show Less”: Once all images in the gallery have been loaded, the button text seamlessly changes to Show Less (customizable), allowing visitors to collapse dynamically loaded items back to the initial set.
- Custom Button Styling:
- Shape: Pill (Fully Rounded), Rounded Corners, Square, or Inherit WordPress Theme Default.
- Colors: Independent control over button background color and label text color.