Home › Forums › Particles Support › [solved] Instafeed with problems
-
josehrobertoSubscriberI’m using Instafeed in the domain wanderleyandrade.com.br and the same problem is appearing in the demo of your site:
http://demo.joomlead.com/particles/index.php/particles/instafeed
Images do not appear
I observed within the particle that in the configuration, the address
http://instagramwordpress.rafsegat.com
is suspended- This topic was modified 6 years, 8 months ago by Tony.
MichaelSubscriber
MichaelSubscriberHi josehroberto
it’s isssue of the instafeed.min.js library.
github.com/stevenschobert/instafeed.js/issues/549
We will update the js library later.
If you want to fix, we will help you, but the image ratio will be smaller.
Thank you
josehrobertoSubscriber
josehrobertoSubscriber
MichaelSubscriberHi 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
- This reply was modified 6 years, 8 months ago by Michael.
josehrobertoSubscriber
The topic ‘[solved] Instafeed with problems’ is closed to new replies.