[solved] Instafeed with problems

[josehroberto]

I’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, 2 months ago by Tony.

[Michael]

We are checking this case and will get back to you soon.

Thank you

[Michael]

Hi 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

• This reply was modified 6 years, 3 months ago by Michael.
• This reply was modified 6 years, 3 months ago by Michael.

[josehroberto]

Ok, when the solution is ready, let me know right here.

[josehroberto]

Any solution ready?
How do I re-download the JLParticles-Joomla3x-Quickstart-1.0.0.zip package to get the new patched version of Instafeed?

[Michael]

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

• This reply was modified 6 years, 3 months ago by Michael.

[josehroberto]

Problem solved, congratulations.