Brands page - Grid Display.

Solved
Highlighted
Tourist
8 1 1

Hey all,

 

We have created a brands page with the hope of displaying all of our brands within a grid format (3x3 preferably).

We managed to create the page and get our brands in tile form that link through to a collection page. Basically, everything has worked but the page is displaying as one long column rather than a grid.

Store URL: https://cosmicsunshine.com.au/pages/brands-1

Password: 12345

Any help would be appreciated. 

Code for reference below:

<ul class="block-grid mobile four-up product-collection"> 
{% for link in linklist.links %} 
<li>
  <div class="product">
  {% comment %}
 You can connect collections, products, pages, & even blogs. By default it will use the first product that appears on a collection or you can pick a featured image.
  {% endcomment %}

  {% assign link_item = link.object %} 
  {% assign link_image = '' %}
  {% capture link_title %}{{ link.title | escape }}{% endcapture %}

  {% if link.type == 'collection_link' %}
    {% if link_item.image %}
      {% assign link_image = link_item.image.src | collection_img_url: 'medium' %}
    {% else %}//Otherwise
      {% assign link_image = link_item.products.first.featured_image | product_img_url: 'medium' %}//Grab the first product image and use that as the image
    {% endif %}
  {% elsif link.type == 'product_link' %}//If it's a product link instead of a collection link
    {% assign link_image = link_item.featured_image | product_img_url: 'medium' %}//Assign the featured image for said product
  {% elsif link.type == 'page_link' %}//However, if it's a page link then follow the rules below
    {% if link_item.content contains "<img" %}//If the content of the page has an <img tag in it then proceed to the next step
      {% assign src=link_item.content | split: 'src="' %}//Create a new variable for link_item.content and use src='"' substring as a parameter
      {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}//Create a new variable for src[1] use '"' substring as a parameter and replace '//cdn' with 'http://cdn' then replace 'http:http://' then finally remove 'https:'
      {% if src %}//if there is a src 
        {% assign link_image = src %}//then create a new variable for link_image using src
      {% endif %}
    {% endif %}
  {% elsif link.type == 'blog_link' %}//Otherwise if link.type is a blog link
    {% if link_item.articles.first.content contains "<img" %}//And if the blog content contains an image tag
      {% assign src=link_item.articles.first.content | split: 'src="' %}//Then create a new variable to src 
      {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}//Create a new variable for src[1] use '"' substring as a parameter and replace '//cdn' with 'http://cdn' then replace 'http:http://' then finally remove 'https:'
      {% if src %}//if src is present 
        {% assign link_image = src %}//then create a new variable for link_image using src
      {% endif %}
    {% endif %}
  {% endif %}

<a href="{{ link_item.url }}" title="{{ link_title }}">
    <span class="thumbnail">
      {% if link_image != '' %}
        <img {% if settings.align_height %}style="max-height:{{ settings.collection_height }}px"{% endif %} src="{{ link_image }}" alt="{{ link_title }}" />
      {% endif %}
    </span>

    <span class="product-title">
      {{ link_title }}
    </span>
  </a>

  </div>
</li>
{% endfor %}
</ul>

 

0 Likes
Highlighted
Excursionist
80 19 19

This is an accepted solution.

Hi @ShaneMiller 

I'd try swapping out the <ul> for a container <div> - and swapping out each <li> for a <div> with classes to control the size of the individual items within the grid?

<div class="block-grid mobile four-up product-collection"> 
{% for link in linklist.links %} 
<div class="grid__item one-whole medium--one-third large--one-third text-center">
  {% comment %}
 You can connect collections, products, pages, & even blogs. By default it will use the first product that appears on a collection or you can pick a featured image.
  {% endcomment %}

  {% assign link_item = link.object %} 
  {% assign link_image = '' %}
  {% capture link_title %}{{ link.title | escape }}{% endcapture %}

  {% if link.type == 'collection_link' %}
    {% if link_item.image %}
      {% assign link_image = link_item.image.src | collection_img_url: 'medium' %}
    {% else %}//Otherwise
      {% assign link_image = link_item.products.first.featured_image | product_img_url: 'medium' %}//Grab the first product image and use that as the image
    {% endif %}
  {% elsif link.type == 'product_link' %}//If it's a product link instead of a collection link
    {% assign link_image = link_item.featured_image | product_img_url: 'medium' %}//Assign the featured image for said product
  {% elsif link.type == 'page_link' %}//However, if it's a page link then follow the rules below
    {% if link_item.content contains "<img" %}//If the content of the page has an <img tag in it then proceed to the next step
      {% assign src=link_item.content | split: 'src="' %}//Create a new variable for link_item.content and use src='"' substring as a parameter
      {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}
      {% if src %}//if there is a src 
        {% assign link_image = src %}//then create a new variable for link_image using src
      {% endif %}
    {% endif %}
  {% elsif link.type == 'blog_link' %}//Otherwise if link.type is a blog link
    {% if link_item.articles.first.content contains "<img" %}//And if the blog content contains an image tag
      {% assign src=link_item.articles.first.content | split: 'src="' %}//Then create a new variable to src 
      {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}
      {% if src %}//if src is present 
        {% assign link_image = src %}//then create a new variable for link_image using src
      {% endif %}
    {% endif %}
  {% endif %}

<a href="{{ link_item.url }}" title="{{ link_title }}">
    <span class="thumbnail">
      {% if link_image != '' %}
        <img {% if settings.align_height %}style="max-height:{{ settings.collection_height }}px"{% endif %} src="{{ link_image }}" alt="{{ link_title }}" />
      {% endif %}
    </span>

    <span class="product-title">
      {{ link_title }}
    </span>
  </a>

</div>
{% endfor %}
</div>

It won't be perfect but it's likely a step in the right direction?

1 Like