Created
May 16, 2018 16:06
-
-
Save james-zedd/564cb2bc1ae235ece5e2efb58197a0e7 to your computer and use it in GitHub Desktop.
Shopify Index Section -- Blog/Instagram Section
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
* Requires instafeed.js to function on your store | |
* Files and documentation at http://instafeedjs.com/ | |
{% endcomment %} | |
<div id="blog-insta-section"> | |
<div class="page-width"> | |
<div class="grid"> | |
<div class="grid__item large-up--three-tenths blog-carousel"> | |
<div id="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false }'> | |
{% assign feed = section.settings.feed %} | |
{% for article in blogs[feed].articles limit: 3 %} | |
<div class="post-wrapper home-blog-post text-center"> | |
<img src="{{ article.image.src | img_url: '512x' }}" alt="{{ article.title }}"> | |
<div class="hbp-content"> | |
<h3>{{ article.title }}</h3> | |
<p class="text-subtitle">{{ feed | replace: '-',' ' }}</p> | |
<div class="blog-para">{{ article.excerpt }}</div> | |
<a href="{{ article.url }}" class="txt-lnk-1">Read More</a> | |
</div> | |
</div> | |
{% endfor %} | |
</div> | |
</div> | |
<div class="grid__item large-up--seven-tenths large-pad-left"> | |
<div id="instafeed" class="insta-feed small--text-center"></div> | |
<div class="text-center"> | |
<h3>{{ section.settings.ig_title}}</h3> | |
<p class="text-subtitle">Instagram</p> | |
<p class="insta-desc">{{ section.settings.ig_para }}</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
{% schema %} | |
{ | |
"name": "Blog and Instagram Feed", | |
"settings": [ | |
{ | |
"type": "header", | |
"content": "Blog Section" | |
}, | |
{ | |
"type": "blog", | |
"id": "feed", | |
"label": "Choose Blog to Display" | |
}, | |
{ | |
"type": "header", | |
"content": "Instagram Section" | |
}, | |
{ | |
"type": "text", | |
"id": "ig_title", | |
"label": "Instagram Title" | |
}, | |
{ | |
"type": "textarea", | |
"id": "ig_para", | |
"label": "Instagram Paragraph" | |
} | |
], | |
"presets": [ | |
{ | |
"name": "Blog and Instagram Feed", | |
"category": "Blog" | |
} | |
] | |
} | |
{% endschema %} | |
{% stylesheet %} | |
.insta-feed { | |
display: flex; | |
justify-content: space-between; | |
margin-bottom: 64px; | |
} | |
.insta-feed a { | |
padding-left: 20px; | |
} | |
.insta-feed img { | |
max-width: 323px; | |
width: 100%; | |
} | |
.insta-feed a:first-of-type { | |
padding-left: 0; | |
} | |
.text-subtitle { | |
font-size: 12px; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
margin-bottom: 48px; | |
} | |
.home-blog-post { | |
width: 100%; | |
} | |
.home-blog-post img { | |
margin-bottom: 50px; | |
} | |
.home-blog-post h3 { | |
margin-bottom: 25px; | |
} | |
.home-blog-post p.text-subtitle { | |
margin-bottom: 36px; | |
} | |
.hbp-content { | |
padding: 0 12px; | |
} | |
.blog-para { | |
font-size: 14px; | |
line-height: 24px; | |
letter-spacing: 0.5px; | |
color: #838383; | |
margin-bottom: 24px; | |
} | |
.large-pad-left { | |
padding-left: 9%; | |
} | |
.txt-lnk-1 { | |
display: block; | |
position: relative; | |
font-size: 14px; | |
font-weight: 700; | |
text-transform: uppercase; | |
} | |
.txt-lnk-1:after { | |
content:''; | |
position: absolute; | |
bottom: 4px; | |
margin-left: 10px; | |
width: 0; | |
height: 0; | |
border-top: 5px solid transparent; | |
border-bottom: 5px solid transparent; | |
border-left: 7px solid #4c4c4c; | |
} | |
.insta-desc { | |
line-height: 1.4; | |
text-transform: uppercase; | |
letter-spacing: 0.5px; | |
max-width: 385px; | |
margin: 0 auto; | |
} | |
.flickity-prev-next-button { | |
top:auto; | |
bottom: -60px; | |
width: 44px; | |
height: 44px; | |
border-radius: 50%; | |
border: 1px solid #dddddd; | |
} | |
.flickity-prev-next-button.previous { left: 50%; transform: translateX(-50px); } | |
.flickity-prev-next-button.next { right: 50%; transform: translateX(50px);} | |
.flickity-rtl .flickity-prev-next-button.previous { | |
left: auto; | |
right: 10px; | |
} | |
.flickity-rtl .flickity-prev-next-button.next { | |
right: auto; | |
left: 10px; | |
} | |
.flickity-prev-next-button .flickity-button-icon { | |
position: absolute; | |
left: 20%; | |
top: 20%; | |
width: 60%; | |
height: 60%; | |
} | |
@media(max-width:1024px){ | |
.large-pad-left { | |
padding-left: 30px; | |
} | |
} | |
@media(max-width:767px){ | |
.blog-carousel { | |
margin-bottom: 80px; | |
} | |
.hbp-content { | |
padding: 0; | |
} | |
.insta-feed { | |
display: block; | |
margin-bottom: 30px; | |
} | |
.insta-feed a { | |
padding-left: 0; | |
} | |
} | |
{% endstylesheet %} | |
{% javascript %} | |
var userFeed = new Instafeed({ | |
get: 'user', | |
userId: '{YOUR_USER ID]', | |
accessToken: '[YOUR_ACCESS_TOKEN]', | |
limit: '3', | |
resolution: 'standard_resolution', | |
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instafeed-img" /></a>' | |
}); | |
userFeed.run(); | |
{% endjavascript %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment