Meta field list of files - wrap code around each item

[LloydSpencer]

Good afternoon,

I am new to using meta fields and could really do with some guidance. I have created a meta field that displays a list of files, however, I need to be able to wrap the file URL in the same code each time to make it display in a specific format.

This is the code and how it currently displays.

{{ product.metafields.custom.data_sheets | file_url }}

This is the code I'd like to wrap around each file URL that has been uploaded 

<a target="_blank" download="guide" href="{{ product.metafields.custom.data_sheets | file_url }}">
    <img src="#">
    <span>Download</span>
<a>

[Nyshawn]

If you're using Liquid, you can use the "capture" tag to store the contents of a variable: {% capture file_url %}{{ product.metafields.files }}{% endcapture %} Then you can output the contents of that variable anywhere in your template, wrapped in the code you need: {{ file_url | wrap: 'code here' }}

[LloydSpencer]

Hi @Nyshawn 

Thank you for your response.

I have tried following the instructions that you have sent above, but I am still having no luck.

You can see below that I have implemented the new code, however, it hasn't seemed to wrap each file URL in a div.

[LloydSpencer]

Hi @Niki_K,

Is there any chance you would be able to help me with this?

[Niki_K]

Hey @LloydSpencer,

If I understand this correctly, you want to render a list of files and each file should be available under "Download" – basically, you want this:

Download (link to first file)

Download (link to second file)

Download (link to third file)

.....

Right? If yes, you will need to loop through all of the files, i.e. using Iteration.

If it is not clear, write me PM. Thanks!

[LloydSpencer]

Hi @Niki_K,

Thanks for getting back to me, I appreciate it.

Yes, exactly that. However, I'd like to wrap each item (file url) in the list in the same code so it would repeat and look like the following.

<a class="download-guide" target="_blank" download="guide" href="{{ product.metafields.custom.data_sheets | file_url }}">
  <img src="#">
  <span>Download Guide</span>
<a>

[Niki_K · Accepted solution]

Hey @LloydSpencer,

I looked at it and would make a few changes. Please, see the piece of code below plus a screenshot of how the Download guide links would render. Let me know if this is what you asked for! 🙂

P.S. You might need to add your classes.

<ul>
  {% for file in product.metafields.custom.file.value %}
    <li>
      <a href="{{ file.url }}" target="_blank">Download Guide</a>
    </li>
  {%- endfor -%}
</ul>

 

[LloydSpencer]

Thank you, the code you sent has worked perfectly 😁

[Niki_K]

Great! Happy to hear that!