Working (Failing) with Jekyll

[ChrisSki]

I've done a lot of searching and can't seem to find a solution. I am currently using Jekyll for my blog and I can not seem to get Instafeed to render my images. I have tested the same code I have in a plain html page and it renders my images fine, so I have to assume it's failing because of Jekyll. I don't have any other plugins or anything strange working with Jekyll. I'm using a template with Instafeed and in my source code is show's my image tag rendered like this: . If anyone can direct me to a solution, I'd love to find one.

[stevenschobert]

Hey @ChrisSki, sorry you're having issues.

There isn't any reason why Jekyll would conflict with something like Instafeed.js. Can you give me a little more detail as to what the issue is? Do you have a link to a demo or can you paste some of your configurations here so I can take a look at them?

[ChrisSki]

Hey @stevenschobert, thanks for the fast response! I launched it to http://chrissciolla.com for the time being so you can see it in action. Thanks for the help. I'm sure it's something I'm overlooking, but I've spent a bunch of time on it and I'm just not seeing it.

[stevenschobert]

Looks like you have your template option set with empty src attributes.

You need to use the template tags {{image}} and {{caption}} template tags so Instafeed.js knows where to put the actual image urls.

var userFeed = new Instafeed({
  // other settings
  template: '<li><img src="{{image}}" alt="{{caption}}"/></li>'
});
userFeed.run();

[ChrisSki]

@stevenschobert I'm currently using the jekyll-assets gem to use the sockets asset pipeline, so I'm not sure if this is preventing any type of proper compiling of code. And I see what you're saying about the src and alt not showing the {{image}} and {{caption}} tags in my source code, however, I do have them in my actual code. It seems like they're not being rendered at all.

[stevenschobert]

Most likely, Jekyll is attempting to parse {{image}} and {{caption}} in your source code as liquid markup.

If you need to output the literal curly braces, you should do something like this:

{% assign special = '{{ image }}' %}
{{ special }}

For more info, take a look at this thread on Stack Overflow.

[ChrisSki]

Worked perfectly. Thanks for helping out with this. I definitely overlooked that liquid would have tried to render them.

[stevenschobert]

Awesome! Glad I could help. Let me know if you have any other issues.

[ChrisSki]

Follow this tutorial. Should work the same as it did for me.

http://chrissciolla.com/tech/jekyll-instafeedjs-tutorial.html

On Saturday, November 16, 2013, HandHugs wrote:

I am having this problem in shopify with liquid. If I don't use
templating, my images show up, but if I try to use the {{image}} or other
template codes, I get nothing echoed back. I tried it the way you have
outlined here, but then i just end up with the html <img src="{{image}}" on
my page instead of the actual url.

Any advice?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/41#issuecomment-28633662
.

Best,

Chris Sciolla

// Towni Localistics: www.towni.us
// Shadowfax Digital: www.shadowfaxdigital.com http://shadowfaxdigital.com
// my playground: www.chrissciolla.com http://chrissciolla.com/
// 856.236.9102

[maxfelker]

Hey guys,

Had the same problem but was using Twig. With twig, you just need to wrap the template string in a verbatim block:

http://twig.sensiolabs.org/doc/tags/verbatim.html

var feed = new Instafeed({
    get: 'tagged',
    tagName:"awesome",
    {% verbatim %}
    template: '<a href="{{link}}"><img src="{{image}}" /></a>',
    {% endverbatim %}
});

This used to be called the raw tag prior to Twig 1.12 . Hope this helps someone!

[ghost]

Hi @maxatbrs ,

I´ve used your suggestion about verbatim and Twig and got it working.

Thank You very much.

[maxfelker]

@armaduarte 💯