Snippets

Team Headjam Creative BC Liquid Snippets

Updated by James Nowland
View revision

File Responsive Images Resizing Added

  • Ignore whitespace
  • Hide word diff 
+{% if globals.visitor.deviceClass == 'phone' -%}
+  {% assign imageResizer = '?Action=thumbnail&Width=800&algorithm=fill_proportional' -%}
+{% endif -%}
+
+<img src="{{ item.['Feature Image'] | append: imageResizer }}">
Updated by James Nowland
View revision

File Meta Best Practice - twitter, open graph, og: facebook.html Added

  • Ignore whitespace
  • Hide word diff 
+{% assign metaTitle = -%}
+{% assign metaDescription = -%}
+{% assign metaTags = -%}
+{% assign metaCategory = -%}
+{% assign metaTwitterHandle = -%}
+{% assign metaURL = -%}
+{% assign metaImage = "" -%}
+{% assign metaSiteName = "" -%}
+{% assign metaCanonicalURL = "" -%}
+{% assign metaFacebookAdminID = "" -%}
+{% assign metaTwitterCardType = "" -%}
+
+{% case metaTwitterCardType -%}
+  {% when 'summary' -%}
+    {% assign metaTwitterSize = 'Width=120&amp;Height=120' -%}
+  {% when 'summary_large_image' -%}
+    {% assign metaTwitterSize = 'Width=500&amp;Height=270' -%}
+  {% when 'photo' -%}
+    {% assign metaTwitterSize = 'Width=640&amp;Height=478' -%}
+  {% when 'product' -%}
+    {% assign metaTwitterSize = 'Width=160&amp;Height=160' -%}
+{% endcase -%}
+
+
+
+{% comment -%} Place this data between the <head> tags of your website {% endcomment -%}
+<title>{{ metaTitle }}</title>
+
+<meta name="keywords" content="{{ metaTags }}" >
+<meta name="description" content="{{ metaDescription }}" />
+
+{% comment -%} Twitter Card data - Cards can be - summary, summary_large_image, photo  {% endcomment -%}
+<meta name="twitter:card" content="photo">
+<meta name="twitter:site" content="{{ metaTwitterHandle }}">
+<meta name="twitter:title" content="{{ metaTitle }}">
+<meta name="twitter:description" content="{{ metaDescription }}">
+<meta name="twitter:creator" content="{{ metaTwitterHandle }}">
+
+{% comment -%} Twitter Summary card images must be at least 120x120px {% endcomment -%}
+<meta name="twitter:image" content="{{ metaImage }}?Action=thumbnail&amp;algorithm=fill_proportional&amp;{{ metaTwitterSize }}">
+
+{% comment -%} Open Graph data {% endcomment -%}
+<meta property="og:title" content="{{ metaTitle }}" />
+<meta property="og:type" content="article" />
+<meta property="og:url" content="{{ metaURL }}" />
+<meta property="og:image" content="{{ metaImage }}}?Action=thumbnail&amp;algorithm=fill_proportional&amp;Width=1200&amp;Height=630" />
+<meta property="og:description" content="{{ metaDescription}}" /> 
+<meta property="og:site_name" content="{{ metaSiteName }}" />
+<meta property="fb:admins" content="{{ metaFacebookAdminID }}" />
+
+{% comment -%} Open Graph Article (Facebook and Pinterest) {% endcomment -%}
+<meta property="article:author" content="{{ metaTwitterHandle }}">
+<meta property="article:section" content="{{ metaCategory }}">
+<meta property="article:tag" content="{{ metaTags }}">
+
+{% Publish Times %}
+<meta property="article:published_time" content="{{ this.['releaseDate'] }}">
+<meta property="article:modified_time" content="{{ this.['lastupdatedate'] }}">
+<meta property="article:expiration_time" content="{{ this.['expiryDate'] }}">
+
+
+
Updated by James Nowland
View revision

File Anti Spam - Email Encoding Added

  • Ignore whitespace
  • Hide word diff 
+<a href="mailto:{{ this.['Email'] | url_param_escape }}">{{ this.['Email'] | replace: '@', '&#64;' }}</a>
Updated by James Nowland
View revision

File content holders - Remove HTML Added

  • Ignore whitespace
  • Hide word diff 
+{% capture homeAboutText -%}{module_contentholder name="Home - About Summary"}{% endcapture -%}
+<p class="Breakout">{{ homeAboutText | strip_html }}</p>
Updated by Headjam Creative
View revision

File Feature Paragraph - First Paragraph Split Added

  • Ignore whitespace
  • Hide word diff 
+{% comment %}Break the content apart for the body{% endcomment %}
+{% assign content = postItem.['body'] %}
+
+{% assign pargraphArray = content | split: '</p>' %}
+{% comment %}Get the first paragraph and replaced the part we split on{% endcomment %}
+{% assign featurePargraph = pargraphArray[0] | append: '</p>' %}
+
+{% comment %}Safeguarding against bad markup{% endcomment %}
+<div style="font-size:30px; font-weight:bold;">
+    {% comment %}We strip the html just as a safeguard{% endcomment %}
+    {{ featurePargraph | strip_html | prepend: '<p>' | append: '</p>' }}
+</div>
+<hr>
+{% comment %}Post the body with the first paragraph removed{% endcomment %}
+{{ content | replace_first: featurePargraph, '' }}
+<hr>
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.