Jekyll, Instafeed.js and Unslider Tutorial

Oct 03, 2013 tech Comments

As I started building my new blog, I knew I wanted a few specific features - photos, slideshows and a blog platform that I had full control over. After plenty of searching I came up with Jekyll, Instafeed.js, and Unslider as my starter platform. Each are awesome in their own specific ways, but I will save those thoughts for another post. What I'm attempting here is to save other coding souls that may be stumbling with getting these three things to play nicely together. The problems and solutions should be more obvious to a seasoned programmer, but since I'm new to Ruby, Jekyll and Liquid, I admittedly overlooked a few things.

Problems I ran into

  1. The src in my lists of <img /> elements was not being rendered at all in my source code, which meant no images were being pulled in
  2. Once I got the images to display, my unordered list of images was being given an inline width: 0; and height: 0;, which kept the images from being displayed
  3. Putting my assignment variables in a different partial than my Instafeed.js code was in, didn't work

Solutions

The src issue:

This one was probably the most frustrating. And since I am new to Ruby, as well as the Liquid, I overlooked the fact that Instafeedjs uses the same syntax to render some of its options. Fortunately Steven Schobert, the creator of Instafeed.js, was kind enough to promptly show me the way to enlightenment.

Here is my snippet of code that would typically get Instafeed.js fired up.

var userFeed = new Instafeed({
    get: 'user',
    userId: XXXX,
    accessToken: 'XXXX',
    sortBy: 'random',
    resolution: 'standard_resolution',
    template: '<li><img src="{{image}}" alt=""/></li>'
  });
  userFeed.run();

The issue here is that Liquid takes the template option <li><img src="{{image}}" alt=""/></li>, and renders {{image}} as a Liquid tag, instead of javascript. This resulted in an empty src attribute in my <img /> element, instead of rendering what would have been the URL of my Instagram image. So here's the fix.

You need to assign a special value to a variable.

{% assign url = '{{image}}' %}

Note: You have to put this snippet of code before the Instafeed.js call, so that it is assigned beforehand, therefore being able to use it. I just put it directly above my script tag that included my Instafeed object.

Essentially what you're doing here is assigning the original {{image}} template tag, provided by Instafeed, as a string to the ruby variable url. And then include it in your Instafeed template option like so:

template: '<li><img src="{{url}}" alt=""/></li>'

Now, after your site is rendered you will have the correct code necessary to have Instafeed's JavaScript access your image urls.

The inline width and height issue:

I don't have a real technical answer for this one, so I'm hoping someone that reads this and understands the issue can shed some light on it. I'd be happy to credit the source.

What I did find, was that I needed to call the unlsider function on $(window).load(); instead of $(document).ready(); My assumption is that Instafeed is instantiated when the window object is loaded. Since Unslider uses the width and height of the <ul> element, it's actually still 0 at the time of $(document).ready(); because Instafeed hasn't loaded the images yet.

The final product

{% assign url = '{{image}}' %}
<script type="text/javascript">
  var userFeed = new Instafeed({
    get: 'user',
    userId: XXXX,
    accessToken: 'XXXX',
    sortBy: 'random',
    resolution: 'standard_resolution',
    template: '<li><img src="{{url}}" alt=""/></li>'
  });
  userFeed.run();

  $(window).load(function(){

    $('.banner').unslider({
      fluid: true,
      delay: 4000
    });
  });
</script>

I put this in the footer above the body tag and after the unslider.js and instafeed.js files are loaded

The partial and variable issue:

I have no explanation as to why this didn't work, and maybe as I expand my knowledge of Jekyll I'll find the answer and come back and edit this post. But when I tried to put my Instafeed code in its own file, and then call that in my footer, with the assignment in my layout file, it didn't work. So, put the Instafeed javascript in what ever file you are rendering the Instagram slideshow in, and assign that special value to a variable, above the script tag.

Conclusion

As a newb to these new languages and frameworks, every day is a learning experience. Which is one of the reasons I am, and forever will be, hooked on programming. So I hope that this little post will help some others that may have been stuck in the same rut I was. If anyone see's any wrong doing in my examples here, please feel free to leave a comment so I can make edits!

comments powered by Disqus