Skip to content

Instantly share code, notes, and snippets.

@amlichner amlichner/instagram.liquid
Last active Jan 13, 2018

Embed
What would you like to do?
Icon - Instagram API update
<script id="instagram-template" type="text/template">
{% raw %}
<div class="desktop-2 tablet-1 mobile-1 contained">
<a class="instagram-image-container" target="_blank" href="{{link}}" rel="ig" title="{{caption}}">
<img class="instagram-image" src="{{image}}" />
</a>
</div>
{% endraw %}
</script>
<section class="index-section homepage-instagram no-fouc" data-section-id="{{ section.id }}" data-section-type="instagram">
{% assign igimage = '{{image}}'%}
{% assign url = '{{link}}' %}
{% assign caption = '{{caption}}' %}
<article>
{% if section.settings.title != blank %}
<div class="section-title row">
<h2><a href="//instagram.com/{{ settings.instagram-id }}">{{ section.settings.title | escape }}</a></h2>
</div>
{% endif %}
<div class="gridlock-fluid">
<div class="row">
<div class="row">
{% assign token = section.settings.instagram-access-token %}
{% capture userid %}
{{- token | truncate: 9, "" -}}
{% endcapture %}
<div class="clear"></div>
<div id="instagram-feed">
{% if section.settings.instagram-access-token != blank %}
<div id="instafeed-{{ section.id }}" data-access-token="{{ token }}"></div>
{% else %}
{% include 'onboard-instagram' %}
{% endif %}
</div>
</div>
</div>
</div>
</article>
</section>
<style>
/* INSTAGRAM */
section.homepage-instagram {
background: {{ section.settings.instagram-background-color }};
}
section.homepage-instagram h2 {
color: {{ section.settings.instagram-title-color }}!important;
}
.instagram-image-container {
display: block;
height: 0;
padding-bottom: 100%;
overflow: hidden;
margin-bottom: 0px;
}
</style>
{% schema %}
{
"name": "Instagram feed",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Follow us on Instagram"
},
{
"type": "textarea",
"id": "instagram-access-token",
"label": "Instagram access token",
"info": "Required for permission to show your Instagram content [instructions here](http://support.undergroundmedia.co.uk/customer/en/portal/articles/2386318-home-page---instagram-feed) for setup."
},
{
"type": "color",
"id": "instagram-title-color",
"label": "Title",
"default": "#fff"
},
{
"type": "color",
"id": "instagram-background-color",
"label": "Background",
"default": "#fff"
}
],
"presets": [
{
"name": "Instagram feed",
"category": "Social media"
}
]
}
{% endschema %}
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.