d
Topic
Posts:
3
Last edited 10 days ago
g
1
upvotes

Pulling URL from uploaded files

Hey

I've been searching around for some time now without any luck. 
Is there any simple way to pull the link to a file that is uploaded to files in the admin section? 

Something like {{ filename.jpg | file_url }}
Result: https://cdn.shopify.com/s/files/1/123456789/files/filename.jpg?15896234794137521981

i
Replies
Posts:
237
Last edited 9 days ago

Hey Malaco,

https://help.shopify.com/en/themes/liquid/filters/url-filters#file_url should do it. Is your example from above just an example or the exact code you are using. If that's what you do then you have to change it to:

{{ 'filename.jpg' | file_url }}

 

CTO, Co-founder of nemo.ai
Posts:
3
Last edited 9 days ago

Thanks Sergiu! You're completely right. 

A little sidequestion now would be if its possible to make it dynamic with javascripts?

What im trying to acompish with this code is to change image when it selects a new value from the dropdown. 
I'ts important that it can read the value + .png since the value is used for other things that can't have .png in it. 

<img id="style-top" src="https://cdn.shopify.com/s/files/1/1234/1234/files/image1.png" />

<div id="style-dropdowns-left">
  <div class="optionselect">
    <form>
      <select id="topSelect" onchange="ChangePic()">
        <option value="image1">image1</option>
        <option value="image2">image2</option>
      </select>
    </form>
  </div>
</div>
function ChangePic() {
  var x = document.getElementById("topSelect").value;
  document.getElementById("style-top").src = {{ "x".png | file_url }};
}
Posts:
3
Last edited 8 days ago
double post. please delete
Posts:
2392
8 days ago

Hey Malaco, 

no, you can't use liquid in javscript this way -- all liquid processing is done server-side and javascript runs in client. But you can do it like this:

function ChangePic() {
  const template = "{{'image1.png' | file_url}}";
  var x = document.getElementById("topSelect").value;
  document.getElementById("style-top").src = template.replace( 'image1', x );
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)