Table of Contents
- How to use (Start Here)
- Colors & Fonts
How to use
Ready to start using Instagram Vista?!
Set up takes just a few minutes~
Visit https://www.instagram.com and login to your account
Visit http://instagram.pixelunion.net/ and click the Generate Token button to receive your custom instagram token.
Copy and paste your generated token into the Access Token field in the RapidWeaver Settings panel
Thats it! : ) Now all you have to do is customize your styles and you'll be ready to go~
Your custom access token for displaying your instagram feed. You can generate your token by following the steps above.
# of Images
The number of images to pull from instagram.
Note: Instagram only allows 33 photos per request, so if you choose to load more images than this, keep in mind that you will have to make multiple requests to there api until your reach the number specified.
Also be aware that instagram has API limits of about 200 requests per hour, though it is unlikely that you will reach this limit.
Use dummy content for editing
In order to assure that you don't make tons of requests while editing your Instagram Vista feed, you can turn this option on in order to generate random photos from unsplash, instead of requesting images from your instagram.
We recommend turning this option on while editing, and then turning it off right before publish~
If turned on, the Instagram Vista slider will automatically loop through images.
Here you can specify a maximum width for your Instagram Vista stack.
This sets the corner roundness of the entire stack container.
Here you can set the size of your instagram avatar that appears in the top left corner.
This sets the font size of the username that appears in the top left corner.
Controls (Button & Icon)
There are controls for navigating the slider, as well as switching between Slide/Grid mode in the top right corner. You can specify the button and icon size of these controls here.
This sets the corner roundness of the controls.
The controls wrap to become responsive at a specific point. You can determine this point here.
You can display posts in 2 different styles:
Floated posts have a more modern look with box-shadows, where the details section is overlapping the images slightly. It's great for fancier looking sites.
Inline posts do not have box-shadows and the details sections are placed below images. This provides a more simple look for basic sites.
You can choose to display different types of content when an image is hovered:
- The instagram caption
- The tags for the particular instagram post
Columns (Desktop, Tablet, Mobile)
Here you can specify the amount columns for the slider/grid. You can set different column amounts for different device sizes!
Here you can determine the breakpoints at which the Tablet, and Mobile columns take effect.
This determines the amount of space inbetween posts.
Here you can set the corner roundness of the post images.
Here you can set the corner roundness of the post details (Date & Likes) section.
Here you can set the inner padding of the details section containing the date, likes, and view more button
This sets the font size of the post date.
This sets the icon size of the post heart icon.
This sets the font size of the view more button that appears when a post is hovered.
This sets the font size of caption text that appears on hover.
Tag (Text, Radius, Padding)
If you choose to display tags on hover, you can edit the tags here.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
Here you can set the font for the Instagram Vista Stack.
There are 3 options for selecting fonts:
- Preset (choose from a list)
- Custom Google Font (Quick Google Font by name)
- Custom Font (Your own custom font name)
If you choose Custom Google Font all you need to do is type in the name of the google font that you want to add, it will work like magic!
You can find Google Web fonts here: www.fonts.google.com
If you select "custom" you will need set a custom font name of your own. Note, that you must provide your own font library somehow.
Here you can set the color of the instagram username in the top left corner.
Simply sets the border color of the arrow, and toggle controls at the top right corner of the stack.
Control Initial (Background & Color)
Here you can set the button background and color of the controls when they first appear.
Control Hover (Background & Color)
Here you can set the button background and color of the controls when they are hovered.
Control Active (Background & Color)
Here you can set the button background and color of the active Slide/Grid toggle control.
Set the color of the date (text) in the details section.
Set the color of the post heart icon.
Sets the color of block icons
Sets the color of caption text.
Tag (Color & Background)
Here you can set the text and background color of tags. Note this will only be seen if you choose to display tags on hover.
Overlay BG (Color or Gradient)
When images are hovered an overlay covers the image. You can set the background color of this overlay here.
Details BG (Color or Gradient)
Here you can set the background of the details section containing the date, likes, and view more button.
For the backround, you can choose between 5 different options:
- 2 Color Gradient
- 3 Color Gradient
- Image with a single color overlay
- Image with a gradient overlay
Simply select the background type that you want and the appropriate options will appear. : )
Instagram Vista Changelog
- Fixed bug causing breakpoints and responsive columns not to work properly
- Added support custom date locale
- Added support for custom date format
- Added support custom text content for sites that use other languages
- Added video functionality!
- Added option for hiding slide/grid toggle
- Added option for hiding heart and like count
- Fixed bug that occurred when captions have no text
- Added option to start the stack in grid mode if desired