SignCity Gallery Plugin

An interactive gallery plugin for WordPress with GSAP-powered animations, ACF integration, and advanced filtering capabilities.

Features

• ACF Integration: Works with your existing ACF-managed Gallery CPT and taxonomy
• Interactive Thumbnails: Mouse-position-based image slider on hover
• GSAP Animations: Smooth, fluid animations powered by GSAP
• Category Filtering: Filter galleries by taxonomy categories
• Search Functionality: Real-time search through gallery titles
• Responsive Grid: Customizable column layouts with 4 breakpoints
• AJAX Loading: Seamless content updates without page reload

Installation

1. Upload the signcity-gallery folder to /wp-content/plugins/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Make sure Advanced Custom Fields (ACF) is installed and activated with your Gallery CPT
4. Make sure the Mojo Juju plugin is installed and activated (for GSAP)
5. The plugin will automatically detect your existing Gallery post type and taxonomy

ACF Field Requirements

The plugin expects an ACF Gallery field with the following configuration:

• Field Name: images (as defined in your ACF JSON)
• Field Type: Gallery
• Return Format: Array
• Location: Post Type = gallery

Your existing ACF setup already has this configured correctly!

Usage

Basic Gallery Grid

Display all galleries in a 3-column grid:

[gallery_grid]

Gallery Grid with Specific Category

Display galleries from a specific category:

[gallery_grid category="signage"]

Custom Column Layout

Change the number of columns (2, 3, or 4):

[gallery_grid columns="4"]

Limit Number of Posts

[gallery_grid posts_per_page="6"]

Combined Options

[gallery_grid category="vehicle-wraps" columns="3" posts_per_page="9"]

Gallery Search & Filter Interface

Display search box and category filters:

[gallery_search]

This creates:

• A search input field
• Category filter buttons
• A results grid that updates via AJAX

Creating Gallery Posts

1. Go to Galleries > Add New
2. Enter a title for your project
3. Add gallery images using the Images field
4. Select or create Gallery Categories
5. Publish

Customization

SCSS Variables

The plugin uses the color scheme from Mojo Juju. To customize colors, edit:

// assets/scss/gallery.scss
$orange: #f16822;
$gray: #414042ff;
$mid-gray: #8c8a8eff;
$light-gray: #d3d0d6ff;
$ultra-light-gray: #f6f6f6ff;

After editing, your VS Code SASS compiler will automatically compile to gallery.css.

Aspect Ratio

To change the thumbnail aspect ratio, edit gallery.scss:

.gallery-item-slider {
    padding-bottom: 75%; // 4:3 ratio (change to 56.25% for 16:9)
}

Animation Speed

Adjust GSAP animation durations in assets/js/gallery.js:

gsap.to(slide, {
    xPercent: offset,
    duration: 0.6, // Change this value
    ease: 'power2.out'
});

How It Works

Interactive Slider

When hovering over a gallery thumbnail:

1. The mouse position is tracked horizontally (0-100%)
2. This position maps to which image should be displayed
3. GSAP smoothly animates between images
4. The thumbnail scales up slightly for visual feedback

AJAX Filtering

• Filter buttons send AJAX requests to load specific categories
• Search performs real-time queries
• Results fade in/out smoothly with GSAP
• Gallery sliders are reinitialized after each content update

Browser Support

• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile responsive
• Requires JavaScript enabled

Dependencies

• WordPress 5.0+
• Advanced Custom Fields (ACF) or ACF Pro
• Mojo Juju plugin (for GSAP)
• jQuery (bundled with WordPress)

Troubleshooting

Images not showing

• Verify ACF field name is exactly images
• Check that images are uploaded in the Images field

Slider not working

• Ensure Mojo Juju plugin is activated (provides GSAP)
• Check browser console for JavaScript errors

Categories not appearing

• Make sure you've assigned categories to your gallery posts
• Use the exact category slug in shortcodes

Support

For issues or questions, contact the developer.