Shopify - Does Liquid Process Before JavaScript?

Question

I'm trying to call shopify asset urls using javascript, dynamically concatenating a string into the liquid code, but it throws an error. I think that the Liquid must be processing before the JS.

function loadProductThumbnails(size) {
  $(".hammock-thumbnail1 img").attr("src", "{{ \'"+size+"-side-main-image.png' | asset_img_url: '150x150' }}");
}

Is this possible? I'm working with over a thousand images and had to type each liquid image url to generate separately. If I could do this dynamically, I cut the code down quite a bit. Thanks!

Answer 1

Liquid is rendered server side so you cannot integrate a JS var into your Liquid string.

You might make something like capturing part of your Liquid var with {% capture %} then use it in your function as var.

Answer 2

 function loadProductThumbnails(size) {
   $(".hammock-thumbnail1 img").attr("src", ""+size+"-side-main-image.png");
 }



 the `src` attribute maybe is not correct?