Grab image from first collection for page within page?

[HG4]

Hello,

I have the Warehouse theme and I'm trying to create a theme template (page.list-collections) that allows a page to show another page with more collections. As of today my pages can only show collections and it's very limiting. I think I'm almost there, except the pages are missing images.

The page looks like this: 

The pages with "no image" contain collections with images, but I can't figure out the lines of code to grab the image of the first collections. 

The code looks like this:

<section data-section-id="{{ section.id }}" data-section-type="list-collections">
  <div class="container">
    <div class="page__sub-header">
      <nav aria-label="{{ 'general.breadcrumb.title' | t }}" class="breadcrumb">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item">
            <a class="breadcrumb__link link" href="{{ routes.root_url }}">{{ 'general.breadcrumb.home' | t }}</a> {%- render 'icon', icon: 'arrow-right' -%}
          </li>

          <li class="breadcrumb__item">
            <span class="breadcrumb__link">{{ page.title }}</span>
          </li>
        </ol>
      </nav>
    </div>

    {%- assign menu_handle = page.content | default: page.title | strip_html | handle -%}
    {%- assign menu = linklists[menu_handle] -%}
    {%- assign has_brand_collections = false -%}
    {%- assign has_normal_collections = false -%}

    {%- for link in menu.links -%}
      {%- unless link.type == 'collection_link' -%}
    {% elsif link.type == 'page_link' %}

        {% comment %}
        If we have a page link.
        {% endcomment %}
        {%- continue -%}
      {%- endunless -%}

      {%- if link.object.template_suffix contains 'brand' -%}
        {%- assign has_brand_collections = true -%}
      {%- else -%}
        {%- assign has_normal_collections = true -%}
      {%- endif -%}
    {%- endfor -%}

    {%- if has_normal_collections -%}
      <div class="collection-list__section">
        <header class="page__header page__header--stack page__header--centered">
          <h1 class="page__title heading h1">{{ page.title }}</h1>
        </header>

        <div class="grid">
          {%- for link in menu.links -%}
            {%- unless link.type == 'collection_link' -%}
          {% elsif link.type == 'page_link' %}

        {% comment %}
        If we have a page link.
        {% endcomment %}
              {%- continue -%}
            {%- endunless -%}

            {%- unless link.object.template_suffix contains 'brand' -%}
              <div class="grid__cell 1/3--handheld 1/4--tablet 1/6--lap-and-up">
                <a href="{{ link.object.url }}" class="collection-block-item collection-block-item--overlay">
                  <div class="aspect-ratio" style="padding-bottom: 55%">
                    <div class="collection-block-item__image lazyload image--fade-in" data-bg="{{ link.object.image | img_url: '850x' }}"></div>
                  </div>
                  <p class="collection-block-item__title heading h4">{{ link.object.title }}</p>
                </a>
              </div>
            {%- endunless -%}        
          {%- endfor -%}
        </div>
      </div>
    {%- endif -%}

    {%- if has_brand_collections -%}
      <div class="collection-list__section">
        <header class="page__header page__header--stack page__header--centered">
          <h1 class="page__title heading h1">{{ 'collection.general.brands' | t }}</h1>
        </header>

        <div class="quick-links">
          {%- for link in menu.links -%}
            {%- unless link.type == 'collection_link' -%}
          {% elsif link.type == 'page_link' %}
         
        {% comment %}
        If we have a page link.
        {% endcomment %}
              {%- continue -%}
            {%- endunless -%}
            {%- if link.object.template_suffix contains 'brand' -%}
              {%- assign max_height_mobile = 50 -%}
              {%- assign max_height_desktop = 90 -%}
              {%- assign max_width_mobile = 100 | divided_by: link.object.image.aspect_ratio | at_most: 100 -%}
              {%- assign max_width_desktop = 140 | divided_by: link.object.image.aspect_ratio | at_most: 140 -%}

              {%- if link.object.image.aspect_ratio < 1.5 -%}
                {%- if link.object.image.height < max_height_desktop -%}
                  {%- assign max_width_desktop = link.object.image.width | times: link.object.image.aspect_ratio | round -%}
                {%- else -%}
                  {%- assign max_width_desktop = max_height_desktop | times: link.object.image.aspect_ratio | round -%}
                {%- endif -%}

                {%- if link.object.image.height < max_height_mobile -%}
                  {%- assign max_width_mobile = link.object.image.width | times: link.object.image.aspect_ratio | round -%}
                {%- else -%}
                  {%- assign max_width_mobile = max_height_mobile | times: link.object.image.aspect_ratio | round -%}
                {%- endif -%}
              {%- elsif link.object.image.aspect_ratio > 2.5 -%}
                {%- assign max_width_mobile = 100 -%}
                {%- assign max_width_desktop = 140 -%}
              {%- endif -%}

              <a id="block-{{ forloop.index0 }}" href="{{ link.object.url }}" class="quick-links__link">
                <div  class="quick-links__image-container">
                  <div class="quick-links__image-ie-fix">
                    <div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: link.object.image.aspect_ratio }}%">
                      <img class="lazyload image--fade-in" data-src="{{ link.object.image | img_url: '280x' }}" alt="{{ link.object.image.alt | escape }}">
                      <noscript>
                         <img src="{{ link.object.image | img_url: '280x' }}" alt="{{ link.object.image.alt | escape }}">
                      </noscript>
                    </div>
                  </div>
                </div>
              </a>

              <style>
                #block-{{ forloop.index0 }} .quick-links__image-ie-fix {
                  max-width: {{ max_width_mobile }}px;
                }

                @media screen and (min-width: 641px)  {
                  #block-{{ forloop.index0 }} .quick-links__image-ie-fix {
                    max-width: {{ max_width_desktop }}px;
                  }
                }
              </style>
            {%- endif -%}
          {%- endfor -%}
        </div>
      </div>
    {%- endif -%}
  </div>
</section>

Solving this would allow me to build a more intuitive website, so any suggestions are much appreciated!

[KetanKumar]

@HG4 

can you please send store url

[HG4]

Thank you for the reply, url is bikuben.com

Page in question is currently at the bottom of the nav meny

[KetanKumar]

@HG4 

thanks can you please send that page url

[HG4]

https://bikuben.com/pages/shop-etter-tema

[HG4]

@KetanKumar Hi, just checking - did you have any suggestions om how to modify the code to give the pages images?

[KetanKumar]

@HG4 

can you please confirm 

[HG4]

@KetanKumar That's the page, yes 

[HG4]

@KetanKumar Hello 😊 I'm reaching out in case you've had a chance to look at the code. I still haven't been able to figure this out, so any suggestions are highly appreciated. Thanks again!