Access Shopify Collection metafields via linklist - html

Question

I am looking to show a custom field (using the app Shopify Custom Fields) to show another image other than the collection image (we cannot use the collection image for reasons that are too long to write about). Right now using the custom field which is a text field (which we have as an absolute URL to the image we want to use) here:
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
To get the Collection image like normal, which does work I used:
<img src="{{ link.object.image.src | collection_img_url: 'master' }}" alt="{{ link.title }}"/>
For some reason the image is not showing up and after inspection it says img src is unknown. It does work if we use the normal collection image though. Is there something I need to add to get this custom field to show up dynamically for each collection in the menu nav (link list)?
I have the following code written:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endfor %}
</div>

Answer 1

You need to reference link.object (and maybe account for the fact that it might not be a Collection). Nesting single quotes within the double quotes when you reference the metafield key is also better syntax:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
{% if link.object == 'collection' %}
{% assign cf = link.object.metafields.custom_fields %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ cf['collection_list_image_url'] }}" alt="{{ link.title }}">
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>