Back to Community

Troubleshooting Common Kadence Advanced Gallery Display Issues

Content

The Kadence Blocks Advanced Gallery is a powerful tool for creating beautiful image layouts, but like any complex feature, it can sometimes run into display problems. Based on community reports, here are the most common issues and how to resolve them.

1. Images Not Loading or Gallery Appears Empty

This is a frequent issue where images vanish from both the editor and the front end, even though they exist in the media library.

  • Quick Fix: Try re-saving the gallery. Click the pencil (edit) icon within the block, let the gallery editor load, and then click the 'Update Gallery' button. Finally, update the page or post.
  • Image Size Setting: An incorrect thumbnail size selection can cause this. In the gallery settings, try selecting a different image size for the thumbnails and then reselect your preferred size. Ensure the chosen size is appropriate for the images you've uploaded.

2. Masonry Layout Order Mismatch Between Editor and Frontend

Users often report that the image order in a Masonry gallery looks correct in the WordPress editor but is different on the published page.

  • Why it happens: This is expected behavior. The Masonry layout relies on a JavaScript script that calculates the final positions based on image heights after the page has fully loaded in the browser. The editor can't perfectly replicate this complex calculation.
  • The Solution: Unfortunately, you must preview or publish the page to see the true, final order. This is a limitation of the dynamic layout process.

3. Gallery Not Displaying Correctly Inside Tabs, Accordions, or Modals

Placing an Advanced Gallery, particularly a Carousel type, inside a hidden container (like a tab, accordion, or modal) is a common source of problems. The gallery may not render correctly, appear squished, or not function.

  • Why it happens: The gallery's initialization scripts often run when the page loads. If the gallery is hidden inside a tab, the script may not be able to calculate its dimensions correctly.
  • Potential Fix: The Kadence Blocks team has addressed some of these compatibility issues in past updates. The first step is to ensure your Kadence Blocks plugin is updated to the latest version. If the problem persists, it may indicate an ongoing compatibility challenge with your specific setup.

4. JavaScript Errors (e.g., 'imagesLoaded is not defined')

Some users encounter browser console errors that prevent Masonry galleries from functioning.

  • Common Cause: This is almost always a plugin or theme conflict. Another plugin (or sometimes the theme) may be incorrectly handling script dependencies, breaking the core scripts that the Kadence gallery needs to run.
  • Troubleshooting Steps:
    1. Temporarily deactivate all other plugins except Kadence Blocks.
    2. If the gallery works, reactivate your plugins one by one to identify the culprit.
    3. Switch to a default WordPress theme (like Twenty Twenty-Four) to rule out a theme conflict.
    4. Clear all caching, including any caching plugins (e.g., WP Rocket) and your browser cache, after making changes.

5. Responsive Column Issues on Mobile

Galleries may not adjust their columns or image sizes properly on mobile devices.

  • The Fix: Within the Advanced Gallery block settings, click on the 'Columns' option. Ensure the 'Individual' control is selected. This will reveal separate column number inputs for Desktop, Tablet, and Mobile, allowing you to explicitly set the layout for each screen size.

General Troubleshooting Tips

For any persistent issue, follow this standard procedure:

  1. Update Everything: Ensure WordPress, your theme, and all plugins (especially Kadence Blocks) are up to date.
  2. Conflict Test: As mentioned above, deactivate other plugins and switch themes to identify conflicts.
  3. Clear Caches: Clear your site's cache (if using a caching plugin) and your browser's cache.

Many display issues with the Kadence Advanced Gallery block can be resolved by methodically checking for conflicts and ensuring your settings are configured for your specific use case.

Related Support Threads Support