javascript - instafeed.js - Limit with filters

I'm using instafeed.js to load some photos from Instagram and I have a little function that load the feed setting a specific tag as filter. Like this:

function generateFeed(category){
   var feed = new Instafeed({
          target: category+'Feed',
          get: 'user',
          userId: 'USERID',
          accessToken: 'TOKEN',
          sortBy: 'most-recent',
          template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
          limit: '12',
          resolution: 'standard_resolution',
          filter: function(image) {
              return image.tags && image.tags.indexOf(category) >= 0;
          },
          after: function(){
            if (!this.hasNext()) {
                $('.load-button').hide();
            }else{
                $('.load-button').show();
            }
          }
        });
feed.run();

$('.load-button').on('click',function(){
        feed.next();
});
}

Everything works well, but it seems like the limit (in this case 12) isn't the limit of loaded photos, but the limit of photos to fetch searching the tag.

And if in this limit there are no photos with that tag, the feed would be empty also if this photos exists and have that tag!

Is there a way to handle this? To set limit to max (60) when searching by filter?

It would be easy if limit can be passed from the feed.next() function, but I haven't found nothing that works.

Can anyone help me?

Thanks.

You should set the limit setting to a higher value, and manually limit the maximum amount of results inside the filter function.

In order to preserve this behavior across calls to .next(), you should reset the counter each time the feed loads:

function generateFeed(category){
  var currentCount = 0;
  var feed = new Instafeed({
    target: category+'Feed',
    get: 'user',
    userId: 'USERID',
    accessToken: 'TOKEN',
    sortBy: 'most-recent',
    template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
    limit: '60',
    resolution: 'standard_resolution',
    before: function() {
      currentCount = 0;
    },
    filter: function(image) {
      // put your real limit here
      var shouldDisplay = (currentCount < 12);

      if (shouldDisplay) {
        if (image.tags && image.tags.indexOf(category) >= 0) {
          currentCount += 1;
        } else {
          shouldDisplay = false;
        }
      }

      return shouldDisplay;
    },
    after: function(){
      if (!this.hasNext()) {
        $('.load-button').hide();
      } else{
        $('.load-button').show();
      }
    }
  });
  feed.run();

  $('.load-button').on('click', function(){
    feed.next();
  });
}

Keep in mind that if your API client is in Sandbox Mode, your calls are limited to 20 items regardless of what you set limit to, so this might have little effect for you.