Hi josehroberto,
Just replace the code from instafeed.html.twig with the code below
{% extends '@nucleus/partials/particle.html.twig' %}
{% set rand = random() %}
{% set group = random() %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ url('gantry-theme://css/uikit.min.css') }}" type="text/css"/>
<link rel="stylesheet" href="{{ url('gantry-theme://css/components/slidenav.min.css') }}" type="text/css" />
{% endblock %}
{% block javascript_footer %}
{% do gantry.load('jquery') %}
<script src="{{ url('gantry-theme://js/uikit.min.js') }}"></script>
<script src="{{ url('gantry-theme://js/instafeed.min.js') }}"></script>
<script>
//http://instagramwordpress.rafsegat.com/docs/get-access-token/
var temp = '<div class="jl-instafeed-item uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-{{particle.numberitem}}"><a href="\{\{link\}\}"><div class="jl-insta-thumbnail uk-overlay uk-overlay-hover"><img src="\{\{model.images.standard_resolution.thumb\}\}" /><div class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center"><div class="jl-insta-info \{\{model.type\}\} uk-grid uk-grid-width-1-3"><div class="jl-insta-info-love"><i class="fa fa-heart"> <\/i><span class="jl-insta-love">\{\{model.likes.roundcount\}\}<\/span><\/div><div class="jl-insta-info-play"><i class="jl-insta-play \{\{model.type\}\} fa fa-play-circle"><\/i><\/div><div class="jl-insta-info-comment"><i class="fa fa-comment"> <\/i><span class="jl-insta-comment">\{\{model.comments.count\}\}<\/span><\/div><\/div><\/div><\/div><\/a><div id="jl-insta-modal-\{\{model.index\}\}" class="jl-insta-modal uk-modal"><div class="jl-modal-dialog uk-modal-dialog uk-modal-dialog-blank uk-grid uk-slidenav-position"><div class="jl-dialog-image uk-width-large-3-5 uk-width-medium-3-5 uk-width-small-1-1"><div class="jl-dialog-header header-top uk-visible-small"><a href="https://www.instagram.com/\{\{model.user.username\}\}" target="_blank"><img src="\{\{model.user.profile_picture\}\}" /><span class="insta-username">\{\{model.user.username\}\}<\/span><\/a><a href="\{\{link\}\}" target="_blank"><i class="uk-icon-external-link"><\/i><\/a><a href="\{\{link\}\}" target="_blank">Read the post<\/a><\/div>\{\{model.content\}\}<\/div><div class="jl-dialog-content uk-hidden-small uk-width-large-2-5 uk-width-medium-2-5 uk-width-small-1-1"><div class="jl-dialog-container"><div class="jl-dialog-header"><img src="\{\{model.user.profile_picture\}\}" /><span class="insta-username">\{\{model.user.username\}\}<\/span><a href="https://www.instagram.com/\{\{model.user.username\}\}" target="_blank">Follow<\/a><\/div><div class="jl-dialog-info"><span class="jl-info-like">\{\{model.likes.count\}\} likes<\/span><span class="jl-info-time">\{\{model.time\}\}<\/span><\/div><div class="jl-dialog-caption" style="">\{\{model.caption.text\}\}<\/div><\/div><\/div><a href="#"><\/a><a href="#"></a><\/div><\/div><\/div><\/div>';
jQuery(function($){
function roundCount(count){
if (count < 1000){
return count;
}else if (count > 1000 && count < 1000000){
count = count/1000;
count = parseFloat(count).toFixed(1);
return count + " K";
}else if (count > 1000000){
count = count/1000000;
count = parseFloat(count).toFixed(1);
return count + " M";
}
}
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function getTime(date){
// Split timestamp into [ Y, M, D, h, m, s ]
var actiondate = new Date(parseInt(date) * 1000);
var today = new Date();
if(today.getDate() === actiondate.getDate() && today.getMonth() === actiondate.getMonth() && today.getYear() === actiondate.getYear()){
var hourssince = today.getHours() - actiondate.getHours();
var minutessince = today.getMinutes() - actiondate.getMinutes();
var secondssince = today.getSeconds() - actiondate.getSeconds();
if(hourssince > 0){
date = hourssince+'h';
}else if(minutessince > 0){
date = minutessince+'m';
}else{
date = secondssince+'s';
}
}else{
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.round(Math.abs((today.getTime() - actiondate.getTime())/(oneDay)));
if(diffDays >= 7){
date = Math.round(diffDays / 7)+'w';
}else{
if(diffDays == '0'){
diffDays = '1';
}
date = diffDays+'d';
}
}
return date;
};
var loadButton = document.getElementById('jl-instafeed-loadmore-{{rand}}');
{% set token = (particle.accessToken == "" ? '4784198969.ba4c844.62f855e7f91f480eb231516c3bf768f4' : particle.accessToken ) %}
{% set username = particle.username|trim() %}
{% set url = "https://www.instagram.com/" ~ username ~ "/?__a=1" %}
{% set content = gantry.platform.call("file_get_contents",url) %}
var insta = JSON.parse('{{content|raw|e("js")}}');
var feed = new Instafeed({
target: 'jl-instafeed-{{rand}}',
get: '{{particle.get}}',
tagName: '{{particle.tagName}}',
sortBy : '{{particle.sortBy}}',
userId: insta.user.id,
accessToken : '{{token}}',
limit: {{particle.limit == "" ? "12" : particle.limit}},
template: temp,
resolution: 'standard_resolution',
before :function(){
$("#jl-instafeed-loading-{{rand}}").append('<i class="fa fa-spinner spin"></i>');
},
success : function(data){
$("#jl-instafeed-loading-{{rand}}").text("");
console.log(data.data);
var crop = '';
var page = $("#jl-instafeed-loadmore-{{rand}}").attr("data-page")
page = parseInt(page);
var limit = {{particle.limit == "" ? "12" : particle.limit}};
limit = parseInt(limit);
var index = page * limit;
for (var i = 0;i<data.data.length;i++){
//index
data.data[i].index = index + i;
//count
var count = data.data[i].likes.count;
data.data[i].likes.roundcount = roundCount(count);
data.data[i].likes.count = numberWithCommas(count);
//comment
var comment = data.data[i].comments.count;
data.data[i].comments.roundcount = roundCount(comment);
data.data[i].comments.count = numberWithCommas(comment);
//time
var time = getTime(data.data[i].created_time);
data.data[i].time = time;
//video
if (data.data[i].type == "video"){
var poster = data.data[i].images.standard_resolution.url;
//poster = "";
var video = data.data[i].videos.standard_resolution.url;
var content = '<video class="jl-insta-video" poster="'+poster+'" src="'+video+'" type="video/mp4" controls><\/video>';
data.data[i].content = content;
}else{
var image = data.data[i].images.standard_resolution.url;
var content = '<img src="'+image+'" />'
data.data[i].content = content;
}
//caption
var limit = {{particle.caption == "" ? 300 : particle.caption}};
var caption = data.data[i].caption.text;
var tags = data.data[i].tags;
if (caption.length > limit){
caption = caption.substring(0,limit);
}
caption += '... <a href="'+data.data[i].link+'">Read more</a>';
tags.forEach(function(item){
var tag = item;
var search = "#" + tag;
var regEx = new RegExp(search, "ig");
var replace= '<a href="https://www.instagram.com/explore/tags/'+tag+'/">#'+tag+'<\/a>';
caption = caption.replace(regEx, replace);
});
//console.log(caption);
data.data[i].caption.text = caption;
//image
var url = data.data[i].images.standard_resolution.url;
//console.log(url);
var width = data.data[i].images.standard_resolution.width;
var height = data.data[i].images.standard_resolution.height;
var pos = url.lastIndexOf("/");
var start = url.substring(0,pos+1);
var end = url.substring(pos,url.length);
var original = 'https://instagram.fsgn4-1.fna.fbcdn.net/' + end;
var square = data.data[i].images.thumbnail.url;
square = square.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600');
data.data[i].images.standard_resolution.thumb = square;
}
},
after: function() {
{% if particle.loadmore %}
loadButton.innerHTML = "Load more";
var page = $("#jl-instafeed-loadmore-{{rand}}").attr("data-page");
page = parseInt(page) + 1;
$("#jl-instafeed-loadmore-{{rand}}").attr("data-page",page);
{% endif %}
$('.jl-insta-modal').each(function(){
$(this).on({
'hide.uk.modal': function(){
$(".jl-insta-video").each(function () { this.pause() });
}
});
});
{% if particle.loadmore %}
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
}
{% endif %}
$('.jl-insta-next').on('click',function(event){
event.preventDefault();
var id = $(this).parents('.jl-insta-modal').eq(0).attr("id");
id = id.substring('jl-insta-modal-'.length,id.length);
id = parseInt(id) + 1;
var modal = UIkit.modal("#jl-insta-modal-" + id);
modal.options.center = true;
modal.show();
});
$('.jl-insta-prev').on('click',function(event){
event.preventDefault();
var id = $(this).parents('.jl-insta-modal').eq(0).attr("id");
id = id.substring('jl-insta-modal-'.length,id.length);
id = parseInt(id) - 1;
if (id < 0) return ;
console.log(id);
var modal = UIkit.modal("#jl-insta-modal-" + id);
modal.options.center = true;
if ( modal.isActive() ) {
modal.hide();
} else {
modal.show();
}
});
}
});
{% if particle.loadmore %}
loadButton.addEventListener('click', function() {
loadButton.innerHTML = "Loading...";
feed.next();
});
{% endif %}
feed.run();
});
</script>
{% endblock %}
{% block particle %}
{% if particle.enabled %}
<div class="jl-instafeed-loading uk-text-center" id="jl-instafeed-loading-{{rand}}">
</div>
<div id="jl-instafeed-{{rand}}" class="jl-instafeed uk-grid">
</div>
{% if particle.loadmore %}
<a>Load More</a>
{% endif %}
{% endif %}
{% endblock %}
We updated quickstart and particles.zip, you can donwload in custom area.
Thank You
