Instafeed.js: Template not working.

Created on 13 Dec 2013 · 5Comments · Source: stevenschobert/instafeed.js

I've setup instafeed and it seems to be working correctly, but every time I add the "template" string, it immediately stops displaying my photos.

I'm using this as my script:

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: USER_ID,
        limit: 5,
        accessToken: 'ACCESS_TOKEN',
        clientId: 'CLIENT_ID',
        resolution: 'standard_resolution',
        template: '<li><a href="{{link}}"><img src="{{image}}" /></a></li>'
    });
    userFeed.run();
</script>

When I look at my source on loading the page, it shows that div as:

<div id="instafeed">
     <a href><img src></a>
     <a href><img src></a>
     <a href><img src></a>
     <a href><img src></a>
     <a href><img src></a>
</div>

Any insight? Seems like it's not properly reading the variables, but I can't figure out why.

Source

josiahwiebe

Most helpful comment

Ah good news! Check out this work around and let me know if that fixes it for you.
https://github.com/stevenschobert/instafeed.js/issues/41#issuecomment-25726439

stevenschobert on 14 Dec 2013

👍4

All 5 comments

Are you by and chance using Jekyll or Shopify? Or anything using the Liquid templating engine?

stevenschobert on 13 Dec 2013

👍1

Ahh yes, I'm using Siteleaf!

josiahwiebe on 13 Dec 2013

Ah good news! Check out this work around and let me know if that fixes it for you.
https://github.com/stevenschobert/instafeed.js/issues/41#issuecomment-25726439

stevenschobert on 14 Dec 2013

👍4

Perfect, thanks! I also managed to get it to work by creating a separate JS file with the function and including it in my template.

josiahwiebe on 16 Dec 2013

👍1

All works fine but not grouping the photos older version no problem, this is Fancybox3

var button = document.getElementById("button");
var feed = new Instafeed({
get: 'user',
userId: removed,
accessToken: 'removed',
limit: 12,
resolution: 'standard_resolution',
after: function () {
var images = $("#instafeed a").fancybox();
$.fancybox.reposition()
$.fancybox.update()
$.fancybox.resize()
$.each(images, function(index, image) {
var delay = (index * 75) + 'ms';
$(image).css('-webkit-animation-delay', delay);
$(image).css('-moz-animation-delay', delay);
$(image).css('-ms-animation-delay', delay);
$(image).css('-o-animation-delay', delay);
$(image).css('animation-delay', delay);
$(image).addClass('animated flipInX');
})
},
template: '

'
});
feed.run();
button.addEventListener("click", function() {
feed.next();
});

stu2younow on 7 Apr 2017

Was this page helpful?

0 / 5 - 0 ratings

Instafeed.js: Template not working.

Most helpful comment

All 5 comments

Related issues