Media Gallery Preview Images Not Updating After Replacing via Media Library (WPBakery Grid Fix)

Troubleshooting Guide: WPBakery Media Grid Thumbnails Not Updating

This guide will help you resolve the issue where preview images (thumbnails) in a WPBakery Media Grid or Post Grid do not update after you’ve replaced the underlying image in the WordPress Media Library.

The Core Problem: Why It Happens

This issue is almost always caused by one of two things:

1. Caching: WPBakery, your caching plugin (like WP Rocket), your server, or even your browser is holding onto an old, cached version of the thumbnail.
2. Thumbnail Generation: WPBakery creates its own specific thumbnail sizes for its grids. When you replace an image in the Media Library, WordPress might not regenerate the exact custom size that WPBakery is looking for, leaving the old file on the server.

Follow these steps in order. The first one solves the problem 90% of the time.

Step 1: Clear All Layers of Cache (The Most Likely Fix)

You need to purge every cache, as any one of them could be serving the old image.

1. Clear WPBakery’s Internal Cache: This is the most important and often overlooked step.
   • In your WordPress dashboard, navigate to WPBakery Page Builder > General Settings.
   • Look for the section related to caching. It may be labeled “Automated Template Library and Shortcode Caching”.
   • Click the “Clear Cache” or “Delete Cache” button.
2. Clear Your Caching Plugin:
   • Go to your caching plugin’s settings (e.g., WP Rocket, W3 Total Cache, LiteSpeed Cache).
   • Find and click the “Purge All Caches” or “Empty All Caches” button. This is often available in the top admin bar as well.
3. Clear Your Browser Cache:
   • Perform a “hard refresh” in your browser to bypass its local cache.
     • Windows/Linux: Ctrl + Shift + R
     • Mac: Cmd + Shift + R
   • If that doesn’t work, manually clear your browser’s cache through its settings menu.
4. Clear Server/CDN Cache (If Applicable):
   • If you use a CDN like Cloudflare, log in and purge its cache.
   • If your hosting provider (e.g., Kinsta, WP Engine) has a built-in server cache, use their dashboard tools to clear it.

After completing all four of these steps, check the page again in a private/incognito window.

Step 2: Force WPBakery to Re-Save the Grid

If caching wasn’t the issue, the next step is to force WPBakery to rebuild the grid’s structure. This makes it look for the image files again.

1. Navigate to the page with the media grid and open it with the WPBakery editor.
2. Hover over the Media Grid element and click the pencil icon to edit its settings.
3. Make a small, insignificant change. For example, change the “Grid elements gap” from 15px to 16px.
4. Click “Save changes” and then “Update” the page.
5. Check the live page. If it’s fixed, you can go back, change the setting back to its original value (15px), and save again.

This simple act of saving forces WPBakery to regenerate the shortcode and its associated assets, which often picks up the new image.

Step 3: Regenerate Thumbnails

If the specific thumbnail size WPBakery needs was never created for the new image, you need to force WordPress to regenerate it.

1. Install and activate the free Regenerate Thumbnails plugin from the WordPress repository.
2. In your WordPress dashboard, navigate to Tools > Regenerate Thumbnails.
3. You have two options:
   • Recommended: Go to your Media > Library. Switch to the list view. Find the specific images you replaced, hover over them, and click the “Regenerate” link.
   • If you have many images: Use the main tool under Tools > Regenerate Thumbnails to regenerate thumbnails for all your uploads.
4. After regeneration is complete, repeat Step 1 and clear all your caches again, as the old versions might still be cached.

Step 4: The Last Resort – Re-add the Image to the Grid

If nothing else has worked, this final step removes any possibility of a stubborn database reference to the old file.

1. Edit the page with WPBakery.
2. Open the settings for your Media Grid.
3. In the “Images” section, find the image that isn’t updating and click the ‘x’ to remove it from the grid selection.
4. Save the grid and Update the page.
5. Now, edit the grid again. Click the ‘+’ icon to add an image and select the same image you just removed from the Media Library.
6. Place it back in the correct order.
7. Save the grid and Update the page.

This process ensures that WPBakery is building a fresh link to the media item, bypassing any old, cached data paths.