MyListing Better Header Gallery Slider
The {CODICTS} MyListing Better Header Gallery Slider plugin replaces the default listing header gallery slider (Cover Style → Gallery) with an improved layout that respects each image’s native aspect ratio instead of cropping all images to a uniform size.
By default, MyListing’s gallery slider crops images to fill a uniform container — portrait images lose their sides, landscape images lose their top and bottom, and the original composition is never preserved. This plugin renders each image at its full, uncropped aspect ratio in a horizontally-scrollable carousel where images of varying widths sit side by side naturally.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
That’s it — the plugin is zero-configuration. On activation, the gallery template is automatically copied to your child theme. Visit any listing with Cover Style → Gallery to see the improved slider.
Key Features
| Feature | Description |
|---|---|
| Aspect-Ratio Preservation | Images are never cropped. Each image displays at its full, natural proportions — portrait images appear narrower, landscape images wider, and square images equal in width and height. |
| Variable-Width Carousel | Images of varying widths sit side by side naturally in a magazine-style header, creating a visually dynamic layout. |
| Responsive Breakpoints | Adapts the number of visible images for mobile (1), tablet (2), and desktop (3). |
| Infinite Looping | The carousel loops continuously for seamless browsing. |
| PhotoSwipe Lightbox | Clicking any image opens the full-resolution version in a zoom gallery overlay with swipe navigation between all images. |
| Zero Configuration | No settings page or options to configure. Activate the plugin and it works automatically. |
| Non-Destructive | Deactivation removes the template from the child theme, restoring MyListing’s original gallery behavior. |
Before vs After
| Default MyListing Gallery | With This Plugin |
|---|---|
All images cropped to a uniform container size using CSS background-size: cover. | Each image displayed at its full, uncropped aspect ratio with dynamically calculated width. |
| Portrait images lose their sides. Landscape images lose top/bottom. | Portrait images appear narrower. Landscape images appear wider. Nothing is cropped. |
| All carousel items have identical width. | Carousel items have variable widths based on each image’s natural proportions. |
| Standard fixed-width carousel. | Magazine-style variable-width carousel with smooth horizontal scrolling. |
How It Works
The plugin overrides MyListing’s default gallery template with an improved version. When a visitor views a single listing page with Cover Style set to “Gallery”:
1. The plugin’s gallery template loads instead of MyListing’s default.
2. Each gallery image is rendered as an <img> element (instead of a CSS background image).
3. The display width of each image is dynamically calculated from its natural aspect ratio relative to the carousel’s fixed height — ensuring images are never cropped.
4. The carousel uses variable-width mode so images of different proportions sit side by side naturally.
5. Clicking any image opens the full-resolution version in a PhotoSwipe lightbox with swipe navigation.
If a listing has no gallery images, the template automatically falls back to MyListing’s standard single cover image display.
Responsive Behavior
| Screen Size | Visible Images |
|---|---|
| Mobile (<480px) | 1 image |
| Tablet (480px–991px) | 2 images |
| Desktop (≥992px) | 3 images |
If the gallery has fewer images than the breakpoint allows, the carousel adjusts automatically and won’t display empty slots.
Customization
The plugin works out of the box with no configuration needed. However, you can customize the gallery’s appearance using CSS in your child theme’s style.css file.
Important: Avoid editing the gallery template file directly in your child theme. Plugin updates will overwrite your changes. Use CSS overrides instead to preserve your customizations across updates.
Show Navigation Arrows
Navigation arrows are hidden by default — the carousel is designed for swipe/drag navigation. To show arrows, add this CSS to your child theme:
.header-gallery-carousel .owl-nav {
display: block !important;
}Adjust Gap Between Images
The default gap between images is 5px. To change it, override this CSS:
.header-gallery-carousel a {
padding: 0 5px; /* Increase for wider gaps, decrease for tighter */
}Frequently Asked Questions
Does this require a child theme?
Yes. The plugin copies a gallery template file into the child theme directory. Without a child theme, the plugin cannot install its template and will show an error notice.
Is there a settings page?
No. This is a zero-configuration plugin. It works automatically once activated. The only requirement is that MyListing and a child theme are active.
Which cover style does this affect?
Only the Gallery cover style. Other cover styles (single image, video, etc.) are not affected. If a listing doesn’t use Gallery cover style, the plugin has no effect on that listing.
What happens if a listing has no gallery images?
The template automatically falls back to MyListing’s standard single cover image display.
Can I still click images to view them full-size?
Yes. The PhotoSwipe lightbox is fully preserved. Clicking any image opens the full-resolution version in a zoom gallery overlay with swipe navigation between all images.
How do I navigate the carousel?
By default, the carousel is navigated by touch/swipe on mobile and mouse drag on desktop. Navigation arrows are hidden by default but can be enabled via CSS (see Customization section above).
Will my CSS customizations survive plugin updates?
Yes — CSS added to your child theme’s style.css file will persist across plugin updates. However, direct edits to the gallery template file in the child theme will be overwritten when the plugin updates.
What happens when I deactivate the plugin?
The gallery template file is removed from the child theme and MyListing reverts to its default gallery slider behavior. Reactivating copies the template again.
Does the plugin create any database tables?
No. The plugin stores only a single value in the options table to track the installed template version.
Troubleshooting
Gallery Slider Looks the Same as Before
| Cause | Solution |
|---|---|
| Template not installed | Deactivate and reactivate the plugin to force-reinstall the template. Verify the file exists at templates/partials/single/cover/gallery.php in your child theme. |
| Page caching | Clear all caches — plugin cache, server cache, CDN cache, and browser cache. |
| Cover Style not set to Gallery | The plugin only affects listings using the Gallery cover style. Check the listing type editor and ensure the cover style is set to “Gallery.” |
| Plugin not activated | Go to Plugins → Installed Plugins and verify the plugin is active. |
Images Not Displaying or Broken
| Cause | Solution |
|---|---|
| No gallery images | The listing must have images in its Gallery field. If empty, the template falls back to the standard single cover image. |
| Images deleted from Media Library | If gallery images were deleted, they’ll appear broken. Re-upload or reassign images in the listing’s Gallery field. |
Carousel Not Working (Images Stacked Vertically)
| Cause | Solution |
|---|---|
| JavaScript error | Check the browser console (F12 → Console) for errors. Conflicts with other plugins’ scripts can prevent the carousel from initializing. |
| MyListing scripts not loading | The carousel depends on jQuery, Owl Carousel, and MyListing’s gallery carousel script. Ensure no other plugin is dequeuing these scripts. |
PhotoSwipe Lightbox Not Opening When Clicking Images
| Cause | Solution |
|---|---|
| JavaScript error | Check the browser console for errors preventing PhotoSwipe initialization. |
| MyListing PhotoSwipe script not loaded | Ensure no other plugin or customization is dequeuing the mylisting-photoswipe script. |
Template Overwrite Warning
The following template file in your child theme is managed by this plugin and will be overwritten on activation and updates:
templates/partials/single/cover/gallery.phpDo not customize this file directly — changes will be lost on plugin updates. Use CSS overrides in your child theme’s style.css instead.
“MyListing Theme Not Detected” or “Child Theme Not Detected” Error
The MyListing theme and a child theme must both be installed and active. Go to Appearance → Themes to verify.
For further support, visit codicts.com or contact us at support@codicts.com.