Instafeed JS template - instafeedjs

Question

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">
<img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%">
<img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%">
<img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%">
</div>
</div>
Here's the code using instafeedjs
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<img src="{{image}}" />'
});
feed.run();

Answer 1

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.