I had a customer feedback that a front-end image was not displaying correctly, not the same as the one displayed inside the Elementor editor.
Xiaodi analyzed and found that the picture displayed on the front-end is not the same as the details of the uploaded picture, and found that the customer deleted a picture, and then re-uploaded a picture with the same name, resulting in the old and new 2 pictures of theSame URLCDNs and browsers retain the old image cache, and URLs that are the same will directly display the old image cache, so the front-end displays the wrong image.
Avoiding the display of old cache maps
If we know how to operate the technology, we will change the name of the new image to be different before uploading to avoid this problem. But the customers don't understand, so many customers can't be each of them Copied.
Some people will add code to the newly uploaded image URL to add a timestamp suffix to distinguish between old images, so you can avoid this problem, you can also bypass the WP image checking, but this URL does not look good, Di is a perfectionist, can not accept.
So Di thought of a way, when deleting the picture, the new upload the same name of the picture will automatically give the new picture URL plus a digital suffix to distinguish the old picture.
For example, https://www.diiamo.cn/a.jpg becomes https://www.diiamo.cn/a-1.jpg and the URL suffix is added “-1”. The name of the image remains unchanged, which is beautiful and convenient for customers to distinguish the uploaded images by their names.
If you delete it again and upload it again, the URL becomes https://www.diiamo.cn/a-2.jpg and so on.
Usually uploading pictures is not affected, still use the default mechanism of WP: upload multiple pictures with the same name at the same time, the URL of the subsequent pictures will be suffixed with -1, -2 and other suffixes automatically, and the name of the pictures will remain unchanged.
Add the following code to the bottom of the (child) theme's functions.php file and save it. You can also use theWPCode Pro, , ,Perfmattersand other plugins to add code.
The code is loaded only in the background, lightweight and fast, good performance, and data older than 30 days is automatically cleaned to avoid volume expansion.
Or do you prefer to change the picture name way manually?
This code is mainly for customer websites to reduce after-sales, their own website, then rename the picture and upload can avoid this problem.
Di is not good at names and gets a big headache every time she thinks of a different name for a picture, so I'll add this code as well to save myself the trouble.
Deleting Images Automatically Cleans CloudFlare CDN Cache
ShortPixel and other image compression plug-ins have a link to CloudFlare CDN function, when the picture is re-compressed and so on will automatically clean up the CDN cache. If you use CDN, it is recommended that you link to it in the plugin.
The vast majority of caching plug-ins also have a link to CloudFlare CDN function, but is limited to automatically clean up the page cache, deleting images will not automatically clean up the CDN cache. super Page Cache this caching plug-in, DiSuggestions were made to officialsI would like to see support for automatically clearing the corresponding CF CDN cache when deleting images. The official customer service replied that this is a good suggestion and they will look into it.
You can also make suggestions to other cache plugin authors to support automatic cleaning of the corresponding CF CDN cache when deleting images. Or use AI to develop this feature for the cache plugin itself, there are many ready-made plugin code can be referred to.
