Images not showing in media grid view (but showing in list view)

Question

In my Wordpress install, thumbnail images are not showing in the media library, when in grid view. They are showing when in list view.

In addition, if I once request a thumbnail directly, in the browser, by copy/paste of the image URL, the image afterwards shows up in the grid view, too. For all users, anywhere.

The console shows errors like this, for each failed image:

[Error] Failed to load resource: the server responded with a status of 404 () (filename.jpg, line 0)

But, requesting each image directly shows the image and then, reloading the grid, shows the image in the grid. (However, a script that lists all images in the relevant upload folder, then displays them with an image tag, or inside an iframe does not have the same effect.)

This started happening after moving my site to a new hosting provider.

Newly uploaded images display the same behaviour.

What is causing this? How to fix this?

Edit:

Turning on Wordpress' debug mode, showed the file "advanced-cache.php" was faulty. Replacing that with a backed up copy resulted in a complaint related to the "WP Super cache" plugin, even though that plugin was deactivated. Deleting the plugin saw that error message also disappear.

However, in the console, a section now showed up with the heading "PHP Errors in Ajax Response", and errors referencing the plugin "display-all-image-sizes". Disabling then deleting this plugin resulted in the errors going away, but the images still not showing in the image grid.

Also, the file "advanced-cache.php" disappears on its own accord. Some digging made me understand that some caching plugin was responsible for this, even though no caching plugin was active. However, turns out that wp-config still had a hardcoded caching reference:

define('WP_CACHE', true);

I changed that to 'false'. This saw the errors go away, but the images still not showing.

Answer 1

Please, enable the debug mode in WordPress maybe there will be answer. To enable it, open your wp-config.php file and look for define(‘WP_DEBUG’, false);. Change it to:

'define('WP_DEBUG', true);'

In order to enable the error logging to a file on the server you need to add yet one more similar line:

'define( 'WP_DEBUG_LOG', true );'

In this case the errors will be saved to a debug.log log file inside the /wp-content/directory.

Depending on whether you want your errors to be only logged or also displayed on the screen you should also have this line there, immediately after the line mentioned above:

'define( 'WP_DEBUG_DISPLAY', true );'

The wp-config.php is located in your WordPress root directory. It’s the same file where the database configuration settings are. You will have to access it by FTP or SFTP in order to edit it.

Answer 2

The site was running on NGINX with the old hosting provider and on Apache with the new hosting provider.

The uploads folder had a .htaccess file (which NGINX doesn't read) which was preventing requests from referrers that were not the http version of the site. Perhaps a leftover from some Wordpress upgrade, or perhaps added by hand over the 8 years the site has been live. This meant that, now that the site was running on Apache, direct requests (with no referrer) were fine, and cached versions served via Jetpack were also fine.

I still don't understand how, then, images in the list view were showing, as they do not seem to be served by Jetpack's CDN, but so be it.

Answer 3

Late answer, but I had a similar issue and it was caused by a technician renaming wp-admin/admin-ajax.php when the site was under attack and not reverting it to the original name.

Answer 4

I had a similar problem: cropped header images for the custom header were shown in listview, but not in grid view.

The ajax response containing the image data has an item 'context', wich was set to 'custom-header' for the cropped images and blank for other images.

in wp-includes\js\media-models.js a validator: function( attachment ) is defined and contains the comment line :"//Filter out contextually created attachments (e.g. headers, logos, etc.)."

The following solved the (my) problem:

add_filter('wp_prepare_attachment_for_js', 'pas_context_aan', 10, 3 );
function pas_context_aan($response, $attachment, $meta) {
    if ($response['context'] == 'custom-header') $response['context'] = '';     
    return $response;
}