show tags, likes? #70

Closed
vincentddd opened this Issue Mar 25, 2014 · 13 comments

Projects

None yet

4 participants

@vincentddd

Thank you for putting this code out here! First of all I'm a noob at all this so I apologize if my question is stupid... So, I've been trying to show the tags and likes with the images (I don't need the comments) but I don't know how to do it? Is it even possible?
Thanks!

@neilcampbell
Contributor

Hi @vincentddd,
Yes, this can definitely be done.

All you need to do is supply a template when creating the Instafeed object. https://github.com/stevenschobert/instafeed.js#templating

For a full list of the data available in the template, see #21

@willenewmedia

I think you're looking for something like this:

template: '<label><b>Tags</b>: {{model.tags}}</label><br/><label>Liked by <b>{{model.likes.count}}</b> people</label>'

This will output for example:

Tags: fun,beach,party,sun,friends,goodtimes
Liked by 34 people

@vincentddd

Exactly, thanks! But it doesn't show the images anymore?

@willenewmedia

Well sure,this was just an addition / proposal what you might do.

User your own template as you like, for example

template: '<a href="{{link}}"><img src="{{image}}"/></a><br/><label><b>Tags</b>: {{model.tags}}</label><br/><label>Liked by <b>{{model.likes.count}}</b> people</label>'

@neilcampbell already posted the link to the templating stuff - check that page for what is possible ;)

Good luck!

@stevenschobert
Owner

@willenewmedia @neilcampbell Thank you guys both for hopping in here! You have no idea how helpful that was for me! 😄

@willenewmedia

You're welcome, @stevenschobert 😃

@vincentddd

Can I ask you a last question...? The tags are like: "selfie,love,sky,beautiful,sun" without any space. It's like one word and I can't make any line break. Do you know how I can add spaces between the tags? Thanks and sorry if I'm annoying!

@willenewmedia

It should be possible with a workaround in the after: option, but that's a bit of a job, are you familiar with JavaScript?

Otherwise, maybe {{caption}} is what you are looking for. It contains the text and the hastags used.

@neilcampbell
Contributor

Another option is to use filter and generate a formatted string, then attach it to the image.
It is a bit of a hack (as it isn't what filter is built for) but it works.

Something like:

template: '<a href="{{link}}"><img src="{{image}}"/></a><br/><label><b>Tags</b>: {{model.tagsFormatted}}</label><br/><label>Liked by <b>{{model.likes.count}}</b> people</label>',
filter: function(image) {
  image.tagsFormatted = '';
  for(var i = 0; i < image.tags.length; i++) {
    image.tagsFormatted += image.tags[i];
    if(i < (image.tags.length - 1)) {
      image.tagsFormatted += ', ';
    }
  }
  return true;
}

Note: the template now uses tagsFormatted

@stevenschobert
Owner

@neilcampbell Clever! I like it 👍

@vincentddd

@willenewmedia @neilcampbell It works well 👍 thanks everyone :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment