looping an array of valid image filenames fails to render images

[tony5280]

I am trying to use a section to output a string that I can use later as an array. 

The section output looks like this

~~{%- for block in section.blocks -%}{{block.settings.imagep}}*{%- endfor -%}~~

The page template captures the section, then splits on ~~ to skip past the injected div element, and return a list of filenames further delimited by *.

{% capture temp %}{% section 'imagepicker' %}{% endcapture %}
{%- assign gallery = temp | split: '~~' -%}
{%- assign images = gallery[1] | trim | split: '*' -%}

...

{%- for img in images -%}
	{%- if img.size > 1 -%}
		<div style="background-image:url({{ images[forloop.index0] | img_url: '840x'}})">
			{{ images[forloop.index0] }}<-- string matches filename
		</div>
	{%- endif -%}
{%- endfor -%}

I cannot for the life of me understand why the above spits out the right (similar?) filename, but it renders the div as 

<div style="background-image:url(//cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_840x.gif)">

Hopefully we can focus on why I'm getting the result I am, and table the discussion as to why I am taking this approach

[tony5280]

bumping because this was buried in spam for 12h, and I'm desperate to understand this issue–any ideas?

[tony5280 · Accepted solution]

I found a hacktastic workaround, but I am still really stumped. This shouldn't behave like this, should it???

{%- for img in images -%}
	{%- if img.size > 1 -%}
		<div style="background-image:url({{ images[forloop.index0] | img_url: '840x'}})">
			{{ images[forloop.index0] }}<-- string matches filename
			{{ images[forloop.index0] | strip | asset_url }} 
			{{ images[forloop.index0] | strip | asset_img_url }}
			{{ images[forloop.index0] | strip | file_url }} 
			{{ images[forloop.index0] | strip | file_img_url }}
			{{ images[forloop.index0] | strip | global_asset_url }}
			{{ images[forloop.index0] | strip | img_url }}
			{{ images[forloop.index0] | strip | shopify_asset_url }}
		</div>
	{%- endif -%}
{%- endfor -%}

The only two of those that had any positive output were asset_url and file_url. Asset assumes the path is in assets, yet my target is in files, so that's a no-go. File url "worked" but prepended an additional files/ path, so I stripped out the files/ path from my string, and it "worked"

{%- comment -%} file_url injects an additional files/ dir to the path, so let's split {%- endcomment -%} 
	{%- assign imgat = images[forloop.index0] | split: '/' -%}

<!-- finally I have images -->
<div class="grid__subgrid-el" style="background-image:url({{ imgat[1] | strip | file_url }})">

THIS SEEMS ASININE! WHY??? Can anyone tell me what I've bumped into here? Has anyone else experienced this?