Home Forums Particles Support [solved] Instafeed with problems

Viewing 7 posts - 1 through 7 (of 7 total)

  • josehroberto
    Subscriber

    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, 8 months ago by Tony.

    Michael
    Subscriber

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

    Thank you


    Michael
    Subscriber

    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, 9 months ago by Michael.
    • This reply was modified 6 years, 9 months ago by Michael.

    josehroberto
    Subscriber

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


    josehroberto
    Subscriber

    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
    Subscriber

    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, 8 months ago by Michael.

    josehroberto
    Subscriber

    Problem solved, congratulations.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘[solved] Instafeed with problems’ is closed to new replies.

80+ templates updated for Joomla 5.1.4 and JoomLead particles 2.3.0 Download
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now