=== Luxe Gallery === Contributors: jannihares Donate link: https://jajasolutions.de Tags: gallery, lightbox, webp, responsive, gutenberg Requires at least: 5.0 Tested up to: 7.0 Requires PHP: 7.4 Stable tag: 2.2.13 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Premium gallery with customizable hero grid, WebP optimization and immersive fullscreen view for modern websites. == Description == Luxe Gallery revolutionizes WordPress galleries with a visual grid editor that lets you create unique hero layouts. Combined with automatic WebP conversion, category-based organization and an immersive fullscreen view, it offers the perfect solution for professional image presentations. = Key Features = * **🎨 Visual Grid Editor**: Create custom hero layouts with drag & drop - uniquely customizable for each gallery * **πŸ“± Mobile-First Design**: Responsive design with custom slider for mobile devices * **πŸ—‚οΈ Category-Based Organization**: Organize images in custom categories * **πŸ’‘ Lightbox**: Modern, touch-friendly lightbox experience * **⚑ WebP Optimization**: Automatic WebP conversion for better performance * **🎨 Drag & Drop Interface**: Intuitive admin interface for managing images * **πŸ“ Shortcode Support**: Easy integration with `[luxe_gallery id="123"]` * **πŸ”§ Page Builder Integration**: Native support for Gutenberg, Elementor, Divi, Beaver Builder and Bricks Builder * **βš™οΈ Comprehensive Settings**: Fully configurable options for performance and design = Performance Features = * **Lazy Loading**: Images are loaded only when needed * **WebP Support**: Automatic conversion to modern image formats * **Optimized Database Queries**: Minimal impact on website performance * **CDN Compatible**: Works with all common CDN solutions = Page Builder Compatibility = * **Gutenberg Block**: Native block for the WordPress Block Editor * **Elementor Widget**: Fully integrated widget with live preview * **Divi Module**: Custom module for the Divi Builder * **Beaver Builder Module**: Seamless integration with Beaver Builder * **Bricks Builder Element**: Native Bricks element with all options = Technical Details = * Fully responsive and mobile-optimized * SEO-friendly with structured data * Accessibility compliant (WCAG 2.1) * Translation-ready (i18n) * Compatible with all major themes and page builders * Clean, validated code = Shortcode Usage = `[luxe_gallery id="123"]` **Parameters:** * `id` - The gallery ID (required) * `show_title` - Show gallery title: yes/no (default: no) * `title_tag` - HTML tag for title: h1-h6 (default: h2) * `layout` - Layout style: hero-grid, grid, masonry (default: hero-grid) * `columns` - Number of columns: 2-6 (default: 4, for grid/masonry layouts) * `gap` - Gap between images in pixels (default: 8) * `border_radius` - Border radius in pixels (default: 12) * `show_image_count` - Show photo count on button: yes/no (default from settings) * `lightbox` - Enable lightbox: yes/no (default: yes) * `sharing` - Enable social sharing: yes/no (default: no) * `virtual_tour` - Virtual tour URL (optional) * `class` - Additional CSS classes (optional) **Example with all parameters:** `[luxe_gallery id="123" layout="masonry" columns="3" gap="12" lightbox="yes" sharing="yes"]` == Installation == 1. Upload the plugin via the WordPress admin panel or install it through the plugin directory 2. Activate the plugin through the 'Plugins' menu in WordPress 3. Go to 'Luxe Gallery' > 'Add New' to create your first gallery 4. Configure the plugin settings under 'Luxe Gallery' > 'Settings' 5. Use the shortcode `[luxe_gallery id="ID"]` to display the gallery = Usage with Page Builders = **Gutenberg**: Search for the "Luxe Gallery" block in the Block Editor **Elementor**: Find the "Luxe Gallery" widget in the Elementor sidebar **Divi**: Add the "Luxe Gallery" module from the Divi Builder **Beaver Builder**: Select "Luxe Gallery" from the Content Modules **Bricks Builder**: Use the "Luxe Gallery" element in the Bricks Editor = Manual Installation = 1. Upload the plugin directory to the `/wp-content/plugins/` folder 2. Activate the plugin through the 'Plugins' menu in WordPress 3. Follow the installation steps above == Frequently Asked Questions == = How do I create a new gallery? = 1. Go to 'Luxe Gallery' > 'Add New' 2. Enter a title for your gallery 3. Select 5 hero images for the grid layout 4. Add categories and organize your images 5. Save the gallery and copy the generated shortcode = Does the plugin support WebP images? = Yes, Luxe Gallery automatically converts uploaded images to WebP format for better performance. This can be configured in the plugin settings. = Is the plugin responsive? = Absolutely! Luxe Gallery is developed mobile-first and provides optimal display on all devices, from smartphones to desktop computers. = Can I customize the design? = Yes, the plugin offers comprehensive settings options. Additionally, you can further customize the appearance with CSS. = Does it work with my theme? = Luxe Gallery is designed to be compatible with most WordPress themes. If you encounter issues, please contact support. = Does the plugin work with page builders? = Yes! Luxe Gallery offers native integration for all major page builders: - Gutenberg (WordPress Block Editor) - Elementor - Divi Builder - Beaver Builder - Bricks Builder Each builder has its own custom module/widget with live preview and all settings options. = Which file formats are supported? = The plugin supports all common image formats: JPEG, PNG, GIF, WebP and SVG. = Can I use multiple galleries on one page? = Yes, you can include as many galleries as you like on a page by using multiple shortcodes. = Are there limits to the number of images? = No, there are no technical limits. Performance depends on your hosting and the number of images. == Screenshots == 1. Hero Grid Layout - Attractive 5-image grid as entry point 2. Mobile Slider - Optimized display for mobile devices 3. Category-Based Gallery - Organized image display with navigation 4. Lightbox - Modern lightbox experience 5. Admin Interface - Intuitive drag & drop management 6. Plugin Settings - Comprehensive configuration options == Changelog == = 2.2.13 = * Fixed: On Safari older than 15.4 (and any browser without native `` support), the full-view modal was not hidden when closed β€” its category navigation and image sections appeared permanently exposed below the gallery. The closed dialog is now explicitly hidden, and "Show all photos" opens it through a fixed full-screen fallback (with background-scroll lock and Escape-to-close) when `showModal()` is unavailable. * Improved: On smartphones the feature buttons (Video, Floor Plan, Before/After, 360Β° Virtual Tour) collapse to compact icon-only buttons and move into their own centered row below the slider, so they no longer overlap the "Show all photos" button. Each button keeps an accessible label for screen readers; desktop is unchanged. = 2.2.12 = * New: Two opt-in display settings under "Display Defaults" for the category navigation strip in the full-view modal. - **Category Navigation Layout** β€” choose between the existing single-row horizontal scroll (default) and "wrap into multiple rows", which is easier to discover on galleries with many categories. Mobile always keeps native horizontal swipe regardless of the setting. - **Category Thumbnail Format** β€” pick the aspect ratio of the small thumbnails: square (default), portrait (3:4), landscape (4:3), or circle. Useful when a theme overrides one dimension and the thumbnails come out stretched. * No behaviour change for existing installs: both settings only emit inline CSS when actively selected in the admin, so untouched sites render byte-identical HTML. = 2.2.11 = * Confirmed compatibility with WordPress 7.0. Verified the iframed block editor (editor styles are correctly declared via `block.json` `editorStyle`, no parent-frame DOM assumptions in the block JS), the new "Modern" admin theme (admin CSS uses `var(--wp-admin-theme-color, …)` with safe fallbacks, no hard-coded WP core blues), and PHP 8.3 (no `${var}` interpolation, no implicit `null β†’ string`, no undeclared dynamic properties). = 2.2.10 = * Fixed: `hero="no"` had no visible effect when combined with grid/masonry layout. Two layout-scoped CSS rules forced the dialog inline-visible (`display: block; position: static; background: transparent`) and disabled the modal backdrop on those layouts, regardless of the new `hero-hidden` container class. Both rules now exclude `hero="no"` instances so the dialog stays a true modal with an opaque backdrop on every layout. * Fixed: `LuxeGallery.open(id)` (and the `data-luxe-gallery-open` trigger) threw `InvalidStateError` when used on a grid/masonry gallery without `hero="no"` because the dialog already had the `open` attribute. The trigger now smoothly scrolls to the inline gallery in that case rather than failing silently. = 2.2.9 = * New: Public JavaScript API to open the full-view modal programmatically from any custom button, menu item or theme code. `LuxeGallery.open(id)`, `LuxeGallery.close(id)`, `LuxeGallery.toggle(id)` and `LuxeGallery.getInstance(id)` are exposed on `window` and work regardless of layout. * New: Declarative trigger attribute β€” any element with `data-luxe-gallery-open="123"` opens gallery 123 on click. Works on `