Iterate over images in assets folder?

New Member
4 0 0

I'm trying to reference a group of images I've placed in the /assets folder for our 360° product spinner. Unfortunately I'm having trouble with the code.

The images in assets are 24 sequential images named like so:

 

 

 

boomerang360-1.jpg
boomerang360-2.jpg
....
boomerang360-24.jpg

 

 

<div
class="cloudimage-360"
data-folder="{{ 'boomerang360-' | asset_img_url: }}"
data-filename="{index}.jpg"
data-amount="24"
data-magnifier="3"
data-spin-reverse
></div>

As you can see the URL that it generates isn't correct

Incorrect URL generatedIncorrect URL generated

 

The following block of code will allow of code will reference each image and turn them into 360° spinner. Index is dynamically replaced with a number. How can I just reference the image folder, and not the image? It's broken into two parts: The image folder, then then dynamically changing the filename. I've tried the code below, but Shopify doesn't seem to let me get the path to the image without telling it the specific image. Please help

 

Temporary Fix. Luckily the script allows me to manually specific a list of images like so. It's less than ideal so if there's anyway to do it dynamically that would be great

<div
		style="width: 50%, height: auto;"
		class="cloudimage-360"
		data-folder="https://"
		data-image-list='[
			"{{ 'boomerang360-1.jpg' | asset_url: }}",
			"{{ 'boomerang360-2.jpg' | asset_url: }}",
			"{{ 'boomerang360-3.jpg' | asset_url: }}",
			"{{ 'boomerang360-4.jpg' | asset_url: }}",
			"{{ 'boomerang360-5.jpg' | asset_url: }}",
			"{{ 'boomerang360-6.jpg' | asset_url: }}",
			"{{ 'boomerang360-7.jpg' | asset_url: }}",
			"{{ 'boomerang360-8.jpg' | asset_url: }}",
			"{{ 'boomerang360-9.jpg' | asset_url: }}",
			"{{ 'boomerang360-10.jpg' | asset_url: }}",
			"{{ 'boomerang360-11.jpg' | asset_url: }}",
			"{{ 'boomerang360-12.jpg' | asset_url: }}",
			"{{ 'boomerang360-13.jpg' | asset_url: }}",
			"{{ 'boomerang360-14.jpg' | asset_url: }}",
			"{{ 'boomerang360-15.jpg' | asset_url: }}",
			"{{ 'boomerang360-16.jpg' | asset_url: }}",
			"{{ 'boomerang360-17.jpg' | asset_url: }}",
			"{{ 'boomerang360-18.jpg' | asset_url: }}",
			"{{ 'boomerang360-19.jpg' | asset_url: }}",
			"{{ 'boomerang360-20.jpg' | asset_url: }}",
			"{{ 'boomerang360-21.jpg' | asset_url: }}",
			"{{ 'boomerang360-22.jpg' | asset_url: }}",
			"{{ 'boomerang360-23.jpg' | asset_url: }}",
			"{{ 'boomerang360-24.jpg' | asset_url: }}"
		   ]'
		data-amount="24"
		data-magnifier="0"
		data-spin-reverse
		></div>

 

 

 

 

 

 

0 Likes