Skip to content

Instantly share code, notes, and snippets.

@levinmejia
Last active March 22, 2017 16:02
Show Gist options
  • Save levinmejia/5a4de6a7133301292d93 to your computer and use it in GitHub Desktop.
Save levinmejia/5a4de6a7133301292d93 to your computer and use it in GitHub Desktop.
<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