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, as well as browsers, etc. retain the old image cache, and URLs that are the same will directly provide 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 customers don't know this, so many customers can't be taught each one.
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 picture remains unchanged, which is beautiful and convenient for customers to distinguish their uploaded pictures by their names.
If you delete it again and then upload it again, the URL becomes https://www.diiamo.cn/a-2.jpg and so on.
Usually, uploading pictures is not affected, still using the default mechanism of WP: uploading multiple pictures with the same name, the URL of the subsequent pictures will be automatically suffixed with -1, -2 and so on, 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.
