Shopify: issue with url image in linklists

1
votes

i'm pretty new to Shopify and I'm facing a strange issue in linklists.

Yesterday I changed the featured image for a category I displayed into a linklist, but I cannot see the changes in the page that prints the linklist.

I analyze the .liquid file that prints the linklists and I found the snippet that produces the divs:

{% for link in linklists[linklist].links cols: 4 %}

<div class="products item {{ link.handle }}">

  <a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">

    <img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" />

    <big>{{ link.title }}</big>
  </a>
</div>
{% endfor %}

After some shots I tried to add a data attribute to the image to print again the link.object.title:

{% for link in linklists[linklist].links cols: 4 %}

<div class="products item {{ link.handle }}">

  <a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">

    <img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" data-test="{{ link.object.image.src | collection_img_url: 'large' }}" />

    <big>{{ link.title }}</big>
  </a>
</div>
{% endfor %}

The strange fact is that it prints two different values for the same object!

<img src="https://cdn.shopify.com/s/files/1/0407/7545/files/trousers-woman_c4633f02-59f7-4a4b-809b-91662635ddc0.jpg?22734" alt="Women's Trousers" data-test="//cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629">

The src attribute shows the old image, and the test attribute shows the new one.

Is that because Shopify postprocess the src attributes of the image for caching them into their cdn? How can I fix this?

1
shopifycdnliquid
Are you sure the src of the image is not being changed with JavaScript? Since Shopify does not output the protocol with the collection_img_url filter I suspect this might be the case. – Jason

1 Answers

0
votes

thanks to @Jason input I found a javascript script that changed the attribute "src" of the image:

$('.collection-woman .webshop .trousers a img').attr('src','https://cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629');