[4.x]: Asset Thumbnails not Reliably Appearing in Control Panel Asset, Entry and Entries Listing Pages

[richhayler]

Description

Asset thumbnails are not reliably appearing for all entries within the control panel (e.g. entry page, entries listing and assets section) despite the transforms existing for these in the relevant folder.

Using the web inspector I have checked the data-srcset links to the asset thumbnails in the control panel and have verified these exist (I can open the image in a seperate browser tab). It seems it may have something to do with asset file names that contain a space.

Steps to reproduce

If images have originally been uploaded via FTP (instead of via the control panel) and contain spaces in the filename it seems these thumbnails are not being displayed in the control panel. Despite the thumbnails existing (following asset indexing being run via CP utilities to pick up these files).

I can see that when an asset is uploaded via the control panel Craft by default converts the file to lower case and replaces spaces with a hyphen (kebab case). It would be nice to have a console cmd to convert all uploaded files to lower case kebab. Some thing like: https://craftcms.com/docs/4.x/config/config-settings.html#convertfilenamestoascii

For example the following thumbnail is not being displayed:
/_34x34_crop_center-center_none/Barefoot Sunset.jpg 34w

But this one is being displayed:
/_34x34_crop_center-center_none/Bayside.jpg

Craft CMS version

4.0.3

PHP version

8.1

[richhayler]

If I edit the asset via the control panel and replace the space with a hyphen the thumbnail is correctly shown.

It's also worth noting that if I try to edit the file name of an asset via the control panel to add a space between characters, I will get an error stating "the asset could not be saved"

It would be nice if Craft automatically removed spaces from asset filenames and replaced them with hyphens when running "asset indexing".

[brandonkelly]

Are you getting any JavaScript errors, or are there any requests listed in your browser’s Resources tab that aren’t completing?

[richhayler]

No javascript errors. Could it simply be that Craft is not URL encoding the http path to the thumbnail image and replacing spaces with %20 and this is why they are not displaying within the CP?

For example this is what Craft is referencing for one of the thumbnails that is not displayed:

https://hayler.com/uploads/transforms/art/_68x68_crop_center-center_none/Elwood Breeze.jpg

and should be

https://hayler.com/uploads/transforms/art/_68x68_crop_center-center_none/Elwood%20Breeze.jpg

If I add the %20 using the inspector in the browser then the thumbnail appears.

[brandonkelly]

Sorry, yeah, able to reproduce locally. Just got this fixed for the next release!

[brandonkelly]

Craft 4.0.4 is out now with that fix.