Instafeed.js: Unable to modify the template option

[benmartineau]

Hi guys, thank you for making instafeed still available to use.

I have successfully setup version 2 but I'm not able to customise the template.
Including the default template returns no results and no errors.

template: '<a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a>'

Sorry if I am missing something — any help would be much appreciated.

[stevenschobert]

Hey @benmartineau, thanks for the report! Do you have any more details you can share about the problem you're hitting? Do you see any errors in the web console?

You might also try temporarily setting the debug option to true, which will log some additional information to the console.

[benmartineau]

Hey @stevenschobert, I'll do my best to summarise the info. There are no errors but is there anything I should look for?

Console shows empty template tags in the [run] options:
template: "<a href=""><img title="" src="" /></a>"

The [onResponseReceived] processed data is pulling posts perfectly.

Also [renderData] hasTemplate true hasRender false — could be something in hasRender false?

[benjamin-hull]

Hey @benmartineau - just to confirm, does everything work when you don't try to provide a custom template option?

I've put a simple demo of customizing the template here: https://codepen.io/companionstudio/pen/pojVGGV - it's not doing anything fancy, but it does work as expected!

If you're still having trouble, feel free to fork and adjust that codepen demo to show the issue you're having.

[benmartineau]

@benjamin-hull correct — everything works until I include a custom template

I've just forked your codepen and is also working perfectly for me. So I'll just head back over here and do some investigating haha.

[stevenschobert]

@benmartineau

Console shows empty template tags in the [run] options: template: "<a href=""><img title="" src="" /></a>"

Ah! Sounds like something is conflicting with the template syntax {{ }} that Instafeed.js uses by default. Are you using Shopify, Mustache, or anything that uses those curly braces {{ }} for its template system?

If so, Instafeed.js v2 has a way you can change the template syntax, using the templateBoundaries option. Here is an example:

var feed = new Instafeed({
  templateBoundaries: ['<%','%>'],
  template: '<a href="<% link %>"><img title="<% caption %>" src="<% image %>" /></a>',
  // rest of your options...
});

feed.run();

The templateBoundaries option allows you to set what special sequence of characters Instafeed.js looks for when parsing your template. In my example above, I've used <% as the "opening" sequence and %> as the "closing" sequence, but you can use whatever you want.

Then, in your template option, just change the curly braces {{ }} to whatever you set in your templateBoundaries.

Hope this helps!

[benmartineau]

Thanks @stevenschobert — works perfectly!