Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Working (Failing) with Jekyll #41

Closed
ChrisSki opened this Issue Oct 4, 2013 · 11 comments

Comments

Projects
None yet
4 participants
@ChrisSki
Copy link

ChrisSki commented Oct 4, 2013

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

This comment has been minimized.

Copy link
Owner

stevenschobert commented Oct 4, 2013

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

This comment has been minimized.

Copy link
Author

ChrisSki commented Oct 4, 2013

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

This comment has been minimized.

Copy link
Owner

stevenschobert commented Oct 4, 2013

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

screenshot 2013-10-04 15 05 14

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

This comment has been minimized.

Copy link
Author

ChrisSki commented Oct 6, 2013

@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

This comment has been minimized.

Copy link
Owner

stevenschobert commented Oct 7, 2013

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

This comment has been minimized.

Copy link
Author

ChrisSki commented Oct 7, 2013

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

@stevenschobert

This comment has been minimized.

Copy link
Owner

stevenschobert commented Oct 7, 2013

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

@ChrisSki

This comment has been minimized.

Copy link
Author

ChrisSki commented Nov 16, 2013

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

@maxatbrs

This comment has been minimized.

Copy link

maxatbrs commented May 29, 2014

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!

@armaduarte

This comment has been minimized.

Copy link

armaduarte commented Feb 22, 2016

Hi @maxatbrs ,

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

Thank You very much.

@maxatbrs

This comment has been minimized.

Copy link

maxatbrs commented Feb 22, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.