Instafeed.js: Templating {{image}} not working

[pedrsntana]

I was messing around with the template and I noticed the {{image}} isn't getting the link.

I copied the templating code in the documentation and it still doesn't work.

    var feed = new Instafeed({
        get: 'user',
        userId: 'xxx',
        accessToken: 'xxx',
        template: '<a class="animation" href="{{link}}"><img src="{{image}}" /></a>'
    })

Here's what I get in the HTML:

I'm using Jekyll and Gulp, although I don't think that should interfere since all scripts are in the same file.

[benjamin-hull]

Hey @pedrsntana, this is definitely working in a few other installations I've checked, so it looks like something up with your implementation. I can't be sure, but that HTML display looks like what the browser displays if there's something invalid in the HTML (though it doesn't look like that should be tha case based on your code).

Just to rule a couple of things out:

• Which version of instafeed.js are you using? Update to the latest if possible (Currently 1.4.1.
• Do you get images if you don't provide the template option and have instafeed.js put images into the #instafeed element in the page (you may need to add that in order to test)? This will just make sure you're getting valid images back from instagram.

If both of those work, try adding the following to your Instafeed options:

success: function(response){
  console.log("Instafeed.js response", response);
}

This will output the instagram response to the console - copy it back into the issue here if you need more help and we'll see what else we can do.

Thanks!

[curtis]

@pedrsntana if you're using Jekyll, be sure to escape the curly braces in your template.

var feed = new Instafeed({
  get: 'user',
  userId: 'xxx',
  accessToken: 'xxx',
  template: '<a class="animation" href="\{\{link\}\}"><img src="\{\{image\}\}" /></a>'
})

Jekyll also uses that notation and will try to process it first. By the time the template is passed to Instafeed, it's already been munged.

Let me know if that helps!

[stale[bot]]

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know.
Thank you all for your contributions.

[philiphoyos]

If you are using this with Flask you should be escaping { with like @curtis points out
template: '<a class="animation" href="\{\{link\}\}"><img src="\{\{image\}\}" /></a>'