Using instafeedjs and moment.js to render instagram feed and format the dates to a relative format ( X days/months/hours/minutes ago ).
As you see below, the success function callback is looping thru the array to separate the images into unique DOM containers. This portion works perfect, although, now that I need to obtain the 'caption.created_date', it gets a little tricky to also include. I can output the unix timestamp pretty easily but I can't seem to translate it to the desired output, described above.
thank you so much for help.
var imgs = [];
var feed = new Instafeed({
limit: '12',
get: 'user',
userId: XXXXX,
clientId: 'XXXXXXXXXXXXXXXXXXXX',
accessToken: 'XXXXX.XXXXX.XXXXX',
limit: 20,
resolution: 'standard_resolution',
template: '{{model.created_time_ago}}<img src="{{image}}"/>',
filter: function (image) {
var imageDate = new Date(parseInt(image.created_time * 1000, 10));
var timeAgo = moment(imageDate).fromNow();
image.create_time_ago = timeAgo;
return true;
},
success: function (data) {
// read the feed data and create owr own data struture.
var images = data.data;
var result;
for (i = 0; i < images.length; i++) {
var image = images[i];
result = this._makeTemplate(this.options.template, {
model: image,
id: image.id,
link: image.link,
caption: image.caption.text,
created_time:image.caption.created_time,
image: image.images[this.options.resolution].url
});
imgs.push(result);
}
//split the feed into divs
$("#gram1").html(imgs.slice(0, 1));
$("#gram2").html(imgs.slice(1, 2));
$("#gram3").html(imgs.slice(2, 3));
}
});
feed.run();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://instafeedjs.com/js/instafeed.min.js"></script>
<div id="gram1"></div>
<div id="gram2"></div>
<div id="gram3"></div>