WP Manifestindependent plugin directory
manifest / media / my-simple-media-gallery

Fluid Media Gallery

Features silky smooth animations, stable JS Masonry layout, dynamic filtering, and enhanced Admin/Elementor UI.

by MGM · github.com/martogt/my-simple-media-gallery

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/martogt/my-simple-media-gallery/archive/refs/heads/main.zip
Readme github.com/martogt/my-simple-media-gallery ↗

A powerful WordPress plugin for organizing and displaying media in beautiful masonry galleries with advanced filtering capabilities.

Features

📁 Media Organization

  • Custom Taxonomy: Organize media files into hierarchical folders
  • Bulk Operations: Move multiple files between folders at once
  • Upload Integration: Assign folders directly during upload
  • Admin Filtering: Filter Media Library by folder or view uncategorized items
  • Sub-folder Support: Create nested folder structures

🎨 Visual Display

  • Masonry Layout: Lightweight vanilla JavaScript masonry implementation
  • Responsive Design: Automatically adapts to Desktop, Tablet, and Mobile
  • Two Filter Styles:
    • Dropdown: Clean, minimal dropdown selector
    • Visual Slits: Beautiful image-based category cards
  • Smooth Animations: Fluid transitions and hover effects
  • Native Lightbox: Integrated Elementor lightbox support

⚙️ Elementor Widget

  • Folder Selection: Choose any folder to display
  • Customizable Grid: Control columns and gaps for all devices
  • Filter Layout: Configure Visual Slits appearance (columns, height, spacing)
  • Image Settings: Select resolution and sort order
  • Back Button: Floating action button with customizable position and colors
  • Live Preview: Real-time updates in Elementor editor

🔧 Admin Features

  • Folder Thumbnails: Set custom images for each folder
  • Sub-folder Counter: See how many sub-folders each folder contains
  • Folder Icons: Visual indicators (📁 for parents, 📷 for leaf folders)
  • Bulk Move UI: Dedicated interface for moving media files
  • Count Display: See item counts for each folder

Installation

  1. Upload the plugin files to /wp-content/plugins/my-simple-media-gallery/
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Navigate to Media > Folders to create your first folder
  4. Upload images and assign them to folders
  5. Use the Fluid Media Gallery widget in Elementor

Usage

Creating Folders

  1. Go to Media > Folders
  2. Click Add New Folder
  3. Enter folder name and optionally set a thumbnail image
  4. Save the folder

Organizing Media

During Upload:

  • When uploading new files, select a folder from the dropdown

After Upload:

  • Go to Media > Library (List View)
  • Select files using checkboxes
  • Choose destination folder from "Move to" dropdown
  • Click Assign

Filtering:

  • Use the "All Folders" dropdown to filter by folder
  • Select "Uncategorized" to see unorganized files

Adding Gallery to Page

  1. Edit a page with Elementor
  2. Search for Fluid Media Gallery widget
  3. Drag it to your page
  4. Configure settings:
    • Folder: Select which folder to display
    • Filter Style: Choose Dropdown or Visual Slits
    • Grid Columns: Set responsive column counts
    • Image Resolution: Choose quality level
    • Sort By: Date, Title, or Random

Visual Slits Configuration

When using Visual Slits mode:

  • Columns: Control slit grid layout (responsive)
  • Slit Height: Adjust card height
  • Gap: Space between slits
  • Image Position: Control background positioning
  • Image Size: Cover, Contain, or Auto

Back Button Customization

  • Icon: Choose from Font Awesome icons
  • Position: Bottom/Top, Left/Right
  • Offsets: Fine-tune exact position
  • Colors: Background and icon colors

Technical Details

Requirements

  • WordPress 5.0+
  • Elementor 3.0+
  • PHP 7.4+

Architecture

  • Single File Plugin: All code in one PHP file for easy deployment
  • Vanilla JS Masonry: Custom implementation, no external libraries
  • Singleton Pattern: Clean, efficient code structure
  • WordPress Standards: Follows WordPress coding standards

Performance

  • Lightweight: ~750 lines of code
  • No Dependencies: Zero external JavaScript libraries
  • Optimized CSS: Compressed and efficient
  • Smart Loading: Images load progressively with layout recalculation

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Changelog

v4.10.0 (2026-01-23)

  • Feature: Sub-folders column in Admin UI
  • Feature: Folder type icons in Elementor dropdown (📁/📷)
  • Feature: Placeholder icons for empty Visual Slits
  • Fix: SessionStorage conflicts between different folders
  • Improvement: Compressed CSS and cleaned up JavaScript
  • Improvement: Enhanced code readability

v4.7.0 (2026-01-23)

  • Major: Custom vanilla JS masonry implementation
  • Removed: External library dependencies (Isotope/Masonry.js)
  • Fix: Rendering issues and flickering
  • Improvement: Absolute positioning for stable layout
  • Improvement: Responsive column calculations

Earlier Versions

  • v4.6.x: Control reorganization and visual polish
  • v4.5.x: Interaction and accessibility improvements
  • v4.4.x: Album mode UX refinements
  • v4.3.x: Widget and frontend features
  • v4.2.x: Admin UX enhancements
  • v4.1.x: Security and code structure

Support

For issues, questions, or feature requests, please contact the plugin author.

License

This plugin is licensed under the GPL v2 or later.

Credits

Author: MGM
Version: 4.10.0
Text Domain: fluid-media-gallery

Made with ❤️ for WordPress and Elementor