Instafeed Particle

Display Instagram photos from any non-private Instagram accounts or special TAG. Add beautifully clean, customizable, and responsive Instagram feeds to your website. Super simple to set up and tons of customization options to seamlessly match the look and feel of your site. See how Instafeed can be designed beautifully on Demo Page.

# Instafeed Package contents

Files Description
jlinstafeed.yaml Contains the Instafeed particle settings.

jlinstafeed.html.twig The Twig file to pull information, settings.
instafeed.min.js Contains the Instafeed JavaScript.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Instafeed requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Animated Text particle (i.e: Home) -> Layout tab -> Drag and drop the Instafeed Particle from Particles panel (left corner) to the section you want to display Instafeed.

Settings

Setting Description
Instagram Username Enter the Instagram username to fetch images from.
Items Number image items to show. Currently support maximum 12 items due to Instagram limitation.
Layout Settings Content layout for Instafeed
Layout Type Select the Grid or Slider mode for layout.
Common Settings Common layout settings for Instafeed.
Enable Masonry The masonry effect creates a layout free of gaps even if grid cells have different heights.
Parallax The parallax effect moves single grid columns at different speeds while scrolling.
Gutter Set the grid gutter width and display dividers between grid cells.
Display Gallery Display Instagram Gallery.
Transition Select an image transition.
Show Profile Display Instagram profile image.
Show Biography Display biography profile text.
Show Like Count Enable this feature to shows Number of Likes.
Comments Count Enable this feature to shows Number of Comments
Use Lightbox Using lightbox mode when clicking on images.
Column Settings Common settings for Columns
Phone Portrait Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
Phone Landscape
Tablet Landscape
Desktop
Large Screens

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Tutorial

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>