=== 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.12 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.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 `