CODEWITHSUNDEEP
instafeedjs
Holly Do
Holly Do

Reputation: 31

Instafeed JS template

I am using instafeed js to get instagram images to display on my website. I want to pull 5 images and display it together like this example that I have created on codepen. However, the template feature for the instafeed js posed a constraint on how I can organize the images the way that I had on the codepen example since there isn't a way to specifically target each image to a div.

The code on codepen showing how I would want to place each of my images.

<div class="row1">
    <div class="column1">
        <a href="#"><img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%"></a>
        <a href="#"><img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%"></a>
    </div>
  <div class="column1">
      <a href="#"><img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%"></a>
      <a href="#"><img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%"></a>
  </div>
  <div class="column1">
      <a href="#"><img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%"></a>
    </div>
</div>

Here's the code using instafeedjs 

var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
  });
feed.run();

Upvotes: 2

Views: 1526

Answers (1)

Seamus
Seamus

Reputation: 4819

You can use the mock option to fetch only the image data without updating the DOM. Then use the success option to do something with that data:

var feed = new Instafeed({
  get: 'user',
  userId: '3xxxxx01',
  accessToken: '3xxxxx3446',
  limit: 5,
  clientId: 'xxxxxxxxxxxxxx',
  resolution: 'standard_resolution',
  mock: true,
  success: function(images) {
      //iterate over images and add them to the DOM as you wish
  }
});

This allows you to display the images in any manner you wish.

Upvotes: 0

Related Questions