[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]<\/p>\n
These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n
Explore all of Stack’s modular elements Stack uses the Spectragram<\/a> plugin in conjunction with the Instagram Developer API to create galleries that pull media from your Instagram account.<\/p>\n 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 .instafeed<\/strong> element.<\/p>\n The most basic usage requires the data-user-name<\/strong> attribtue which specifies the Instagram account to pull images from.[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=”7\/12″][stack_instagram username=”tommusrhodus”][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5\/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]<\/p>\n 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-amount<\/strong> attribute. This attribute should be a numerical value from 1 – 20.<\/p>\n [\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=”7\/12″][stack_instagram amount=”9″ username=”tommusrhodus”][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5\/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]<\/p>\n By default, the images will stack vertically on top of one another. To arrange the images in a grid, use the data-grid<\/strong> attribute. The value will specify how many images will be placed in each row.<\/p>\n In the example below, data-grid<\/strong> is set to 5, hence each row containes 5 images.[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=”7\/12″][stack_instagram amount=”10″ grid=”5″ username=”tommusrhodus”][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5\/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]<\/p>\n Add the class .instafeed–gapless<\/strong> to the .instafeed<\/strong> element to remove the gaps between each of the grid times.[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=”7\/12″][stack_instagram layout=”instafeed–gapless” amount=”9″ username=”tommusrhodus”][\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text]<\/p>\n
\nat the\u00a0Element Index Page \u2192<\/a>[\/vc_column_text][\/stack_hero][\/vc_column][\/vc_row][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5\/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]<\/p>\nBasic Feed<\/h4>\n
Specifying Count<\/h4>\n
Specifying Grid<\/h4>\n
Gapless Grid<\/h4>\n
Looking for styled Instagram sections?<\/h2>\n