October 25, 2017
Create a custom Instagram slider for your site using jSON and the following instructions…
Template:
<div class="feed">
<?php
$IGAccessToken = "use.a.plugin.to.retrieve.your.token";
$photo_count=32; // must be an even number
$json_link="https://api.instagram.com/v1/users/self/media/recent/?";
$json_link.="access_token={$IGAccessToken}&count={$photo_count}";
$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING); ?>
<div class="feed-slide feed-0">
<?php
$photoCount = 1;
foreach ($obj['data'] as $post) {
$pic_text=$post['caption']['text'];
$pic_link=$post['link'];
$pic_like_count=$post['likes']['count'];
$pic_comment_count=$post['comments']['count'];
$pic_src=str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
$pic_created_time=date("F j, Y", $post['caption']['created_time']);
$pic_created_time=date("F j, Y", strtotime($pic_created_time . " +1 days"));
// if($photoCount & 1) {
// its an odd number, need to start new div
if($photoCount & 1) { ?>
</div>
<div class="feed-slide feed-every">
<?php
}
echo "<a href='{$pic_link}' target='_blank' class='slide_link'>";
echo "<img class='img-responsive photo-thumb' src='{$pic_src}' alt='{$pic_text}'>";
echo "</a>";
$photoCount ++;
} ?>
</div>
jQuery:
jQuery('.feed').slick({
draggable: true,
lazyLoad: 'progressive',
swipe: true,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 4,
dots: false,
arrows: false,
responsive: [{
breakpoint: 1600,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 900,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}]
});
// set instagram slider image container to half height of instagram parent div
jQuery('.slide_link').height( jQuery('#instagram_block').height() / 2 );
CSS:
.slide_link {
position: relative;
display: block;
height: 250px; /* overwritten by jQuery */
overflow: hidden;
}
.feed-slide.feed-every {
position: relative;
}
.photo-thumb {
position: absolute;
top: 0;
right: 0;
left: 0;
right: 0;
margin: auto;
min-height: 100%;
min-width: 100%;
}