page.list-collections doesn't capture image from subpage

Solved
sisustajankoti
Tourist
3 1 0

I'm usin this code to create subcategories on a page:

https://shopify.dev/tutorials/feature-a-subset-of-collections-on-a-page

 

The problem is that if there is a subpage it doesn't capture an image for the page with sub-collections.

These two codes do have images for them but they have bad designs in Venture theme:

https://www.ecommerce-gold.com/how-to-create-a-page-of-collections-on-shopify/

https://gist.github.com/jonathanmoore/f56808c020020dbefa008687fa798d56

 

I managed to include pages with this minor modification in the official code but image for them is missing:

 

Click to expand...

{% comment %}
Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">

{% include 'breadcrumb' %}
<br>
{% comment %}
<h1 class="small--text-center">{{ page.title }}</h1>
{% endcomment %}

{%- assign collection_count = 0 -%}

{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' or link.type == 'page_link' -%}
{%- assign collection_count = collection_count | plus: 1 -%}
{%- endif -%}
{%- endfor -%}

{% assign number_rows = 1 %}

{% case collection_count %}
{% when 1 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 2 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 3 %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% when 4 %}
{% assign grid_item_width = 'medium-up--one-quarter' %}
{% assign height = 235 %}
{% else %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
{% endcase %}

<div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign featured_collection = collections[link.object.handle] -%}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{%- endif -%}
{%- endfor -%}
{% comment %}
Include pages
{% endcomment %}
{% assign row_number = 1 %}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'page_link' -%}
{%- assign featured_collection = pages[link.object.handle] -%}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{%- endif -%}
{%- endfor -%}
</div>
</div>

 

0 Likes
sisustajankoti
Tourist
3 1 0

My code modification also has the problem that the pages are added to the end and therefore are not in correct order. Please see example here:

https://sisustajankoti.fi/pages/huonekalut

0 Likes
sisustajankoti
Tourist
3 1 0

This is an accepted solution.

Solved by using the alternative linked code and adding this to theme css:

 

.grid-image {
margin-bottom: 0.5em;
margin-left: 1.5em;
margin-right: 2.5em;
}

.grid__image {
margin-bottom: 0.5em;
margin-left: 1.5em;
margin-right: 2.5em;
}

.collection-item__title {
padding-bottom: 6em;
margin-right: 0.7em;
color: black;
font-size: 1em;
font-weight: bold;
}

.collection-grid__item-title {
padding-bottom: 6em;
margin-right: 0.7em;
color: black;
font-size: 1em;
font-weight: bold;
}

@media only screen and (max-width: 767px) {
.grid-image {
margin-bottom: 0.5em;
margin-left: 0em;
margin-right: 1.5em;
}

.grid__image {
margin-bottom: 0.5em;
margin-left: 0em;
margin-right: 1.5em;
}

.collection-item__title {
padding-bottom: 3em;
margin-right: 0.7em;
color: black;
font-size: 1em;
font-weight: bold;
}

.collection-grid__item-title {
padding-bottom: 3em;
margin-right: 0.7em;
color: black;
font-size: 1em;
font-weight: bold;
}
}

0 Likes