Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<ul class="block-grid mobile four-up product-collection">
{% for link in linklist.links %} //Here we are saying use the links in the linklist we created and assign them to the below code
<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 %} //Creates a new variable for link_item using link.object which in-turn can access any of the attributes that are available (product, collection, page or blog)
{% assign link_image = '' %}//creates a new variable for link_image which assigns
{% capture link_title %}{{ link.title | escape }}{% endcapture %}//grab the link title and assign it as the link.title
{% if link.type == 'collection_link' %}//if the link type is a collection then use this set of rules
{% if link_item.image %}//if there is a link_item image then proceed to the next step
{% assign link_image = link_item.image.src | collection_img_url: 'medium' %}//if there is a featured collection image use that and size it as a medium image
{% 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 }}">//Here is where it all comes together make the link_item.url click-able and link to the content and add the title using link_title
<span class="thumbnail">
{% if link_image != '' %} //if link_image does not equal '' then continue to the next step
<img {% if settings.align_height %}style="max-height:{{ settings.collection_height }}px"{% endif %} src="{{ link_image }}" alt="{{ link_title }}" />//check if there are settings for align_height if so add it to the style otherwise just get the link_image and make the alt tag the link title
{% endif %}
</span>
<span class="product-title">
{{ link_title }} //add the link title (it's click-able)
</span>
</a>
</div>
</li>
{% endfor %}
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.