These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Basic Feed
Stack uses the Spectragramplugin in conjunction with the Instagram Developer API to create galleries that pull media from your Instagram account.
Once you've set up your developer account and obtained your Client ID and Access token, the feed is controlled by data attributes on the .instafeedelement.
The most basic usage requires the data-user-nameattribtue which specifies the Instagram account to pull images from.
<div class="instafeed" data-user-name="user-name-here" data-grid="3"></div>
Specifying Count
By default, the feed will pull in the 12 most recent images on your account. You can specify the exact amount (20 being the maximum) to pull in using the data-amountattribute. This attribute should be a numerical value from 1 - 20.
<div class="instafeed" data-user-name="user-name-here" data-amount="9" data-grid="3"></div>
Specifying Grid
By default, the images will stack vertically on top of one another. To arrange the images in a grid, use the data-gridattribute. The value will specify how many images will be placed in each row.
In the example below, data-gridis set to 5, hence each row containes 5 images.
<div class="instafeed" data-user-name="user-name-here" data-amount="10" data-grid="5"></div>
Gapless Grid
Add the class .instafeed--gaplessto the .instafeedelement to remove the gaps between each of the grid times.
<div class="instafeed instafeed--gapless" data-user-name="user-name-here" data-amount="9" data-grid="3"></div>