Instafeed.js: Feed works great until I add a template

[PhilRedm]

This works:

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '180XXXXXX2',
        target: 'instafeed',
                clientId: '9930blahblahbalhetc9ff',
        limit: 10
    });
    feed.run();
</script>

but this is not:

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '180XXXXXX2',
        target: 'instafeed',
                clientId: '9930blahblahbalhetc9ff',
        limit: 10,
        template: '<a href="{{link}}"><img src="{{image}}" /></a>',
    });
    feed.run();
</script>

The template is rendering but the data is absent:

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

Any advice for troubleshooting this?

Thanks.

[stevenschobert]

Are you hosting your site on shopify, Jekyll or some other system that uses curly braces for templating?

[PhilRedm]

Yep. I'm using Craft CMS with Twig templates. Do I need to escape the curly braces somehow?

[stevenschobert]

Yes, you'll want to assign your template to a twig variable using set:

{%set instafeed_template = '<a href="{{link}}"><img src="{{image}}" /></a>' %}

// further down your page
var feed = new Instafeed({
  template: "{{instafeed_template}}"
  // other settings
});

Twig docs: http://twig.sensiolabs.org/doc/tags/set.html#set

See #41 for related issues.

[PhilRedm]

That worked with the modification of adding js output escaping tags in Twig like so:

{%set instafeed_template = '<a href="{{link}}"><img src="{{image}}" /></a>' %}

{% autoescape 'js' %}
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '180XXXXXX2',
                target: 'instafeed',
                clientId: '9930blahblahbalhetc9ff',
        limit: 10,
        template: '{{instafeed_template}}'
    });
    feed.run();
</script>
{% endautoescape %}

Without the autoescaping the code block renders as a quoted string.
Thanks for your excellent support!

[stevenschobert]

Ah, sorry about that, I wasn't aware that extra directive was needed!

Thanks for taking the time to go back and update this issue so other people can benefit from it!

[alexpriceco]

If you're working with Jekyll, as I was, you'll use:

{% raw %}
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '180XXXXXX2',
                target: 'instafeed',
                clientId: '9930blahblahbalhetc9ff',
        limit: 10,
        template: '<img src="{{image}}" />'
    });
    feed.run();
</script>
{% endraw %}

[simran2017]

How can we show video with play button, i am using default version of instafeed and it shows both image & videos but user gets confused as all items look like videos so i want to put play icon on top of those images whcih actually are images https://codepen.io/anon/pen/eyMpMQ for example in this example 6th items is video