Replacing a File in Settings > Files - Doesn't update images using img_url (cache issue)?

HandHugs
Shopify Expert
198 1 60

I use the file_img_url for lots of areas of websites I make and it works rather well for things like color swatches. You can easily store a color name as a value, and then allow the store owner to upload matching images to the name of the color. It works great until the store owner needs to replace an image.

 

For example, lets say in my liquid I have this code:

 

 

{% assign color_name = 'black.jpg' %}
{% assign thumbnail = color_name | file_img_url:'200x' %}

<img src="{{ thumbnail }}" alt="Black color swatch />

 

 

 

this works if the store owner has a file called black.jpg in their Files. If they want to replace the image with a new one, they have to go into files, find the original black.jpg, delete it and then load in a new one. This also works IN THEORY, except that the cached version of the 200px image never gets re-indexed or deleted when they remove / replace the file in Files. 

 

The only way I have been able to work around this problem is to go into the code and change EVERY reference to the img_url to a slightly different size (e.g. file_img_url:'201x' ) - this forces it to create a new cached version of the image, but its a pain in the ass and makes it so the store owner cannot replace their files on their own without my help.

 

Any other ideas out there???

Replies 8 (8)

Tira
Shopify Staff (Retired)
1260 90 223

Hey, @HandHugs

Thank you for your question and these details. This is helpful and I’m here to help. 

I want to let you know that any coding customization would be outside our scope of support. 

However, it sounds like you want to be able to upload a new image file to the Files section of the Shopify admin with the same name, and have the updated file show after it’s been uploaded. Right now, you are not seeing that and have to manually change this in the code of your store. Is that right?

If it is, I would recommend doing a cache clear on your web browser. Here is our help doc with the steps to help: Supported browsers

Has your client tried a cache clear on their browser? Let me know!

To learn more visit the Shopify Help Center or the Community Blog.

HandHugs
Shopify Expert
198 1 60

Hi Tira, 

 

I think I was pretty clear in my description of the problem.

I am not looking for help coding. I am a Shopify Expert.

I am simply pointing out a problem with the Shopify file system, that the thumbnail / alternate size images images generated by file_img_url do not get deleted when the original file is deleted, and they don't get overwritten when a new file with the same name is loaded in.

It is NOT a cache issue on the browser side- I can go to the image URL in incognito clear my cache and the image file remains. 

Tira
Shopify Staff (Retired)
1260 90 223

Thanks for clarifying what you’re looking to do here and for giving a cache clear a try! This is helpful and I appreciate it. 

I did some digging with our technical team on this for you and here is what I found:

Shopify’s content delivery network (CDN) uses version numbers on same-named files. If you look at the URL for the image you will usually see a ?v= and then a number. If an old version is hard coded into the theme, then it will never find the new one because it is directly linked to the old one. Also, the old one will never go away because the system is seeing that it's needed. 

To avoid this, we recommend to give files new names or, if you need to use the same name, to make sure you are either using the most recent version link or not including the version at the end at all so the system can sort out which one it should be pulling. 

Have you seen our help docs for Shopify CDN? If you haven’t, I recommend checking it out as it contains information on short delays for images in your store.

Is this what you were looking to accomplish? Let me know!

To learn more visit the Shopify Help Center or the Community Blog.

HandHugs
Shopify Expert
198 1 60

I'm not hard coding any file names or version numbers into the code. I'm using the exact code in the example - something like 

 

{{ 'black.png' | file_img_url: '50x' }} 

 

should update when black.png is deleted and replaced with a new one in settings- files, but it does NOT 

Mimosa
Tourist
4 0 0

Have you been able to find a way to fix this easily? I'm having the same problem.

HandHugs
Shopify Expert
198 1 60

Unfortunately no. I have to change the code to be 1px different fir it to update the image 

GZRFH
Tourist
4 0 0

I've got the same issue.  Strange shopify hasn't fixed this bug yet.

darrynten
Shopify Partner
44 3 14

Similar issue here, uploading an image with https://shopify.dev/docs/api/admin-graphql/2023-10/input-objects/FileCreateInput with the duplicateResolutionMode option set to `REPLACE` does NOT replace the image if the filename remains the same.

@darrynten