
Instagram Vista
Table of Contents
- How to use (Start Here)
- Setup
- General
- Posts
- Colors & Fonts
How to use
Ready to start using Instagram Vista?!
Set up takes just a few minutes~
Step 1
Visit https://www.instagram.com and login to your account
Step 2
Visit http://instagram.pixelunion.net/ and click the Generate Token button to receive your custom instagram token.
Step 3
Copy and paste your generated token into the Access Token field in the RapidWeaver Settings panel
Step 4
Thats it! : ) Now all you have to do is customize your styles and you'll be ready to go~
Setup
Access Token
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~
General
Autoplay
If turned on, the Instagram Vista slider will automatically loop through images.
Max Width
Here you can specify a maximum width for your Instagram Vista stack.
Radius
This sets the corner roundness of the entire stack container.
Avatar
Here you can set the size of your instagram avatar that appears in the top left corner.
Username
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.
Control Radius
This sets the corner roundness of the controls.
Control Breakpoint
The controls wrap to become responsive at a specific point. You can determine this point here.
Posts
Post Style
You can display posts in 2 different styles:
- Floated
- Inline
Floated
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
Inline posts do not have box-shadows and the details sections are placed below images. This provides a more simple look for basic sites.
Hover Content
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!
Breakpoints
Here you can determine the breakpoints at which the Tablet, and Mobile columns take effect.
Gutter
This determines the amount of space inbetween posts.
Image Radius
Here you can set the corner roundness of the post images.
Detail Radius
Here you can set the corner roundness of the post details (Date & Likes) section.
Detail Padding
Here you can set the inner padding of the details section containing the date, likes, and view more button
Detail Date
This sets the font size of the post date.
Detail Heart
This sets the icon size of the post heart icon.
View More
This sets the font size of the view more button that appears when a post is hovered.
Caption Text
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
Fonts
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.
Username
Here you can set the color of the instagram username in the top left corner.
Control Border
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.
Date
Set the color of the date (text) in the details section.
Heart
Set the color of the post heart icon.
Sets the color of block icons
Caption
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.
Main background
For the backround, you can choose between 5 different options:
- Color
- 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
Version 1.0.5
- Fixed bug causing breakpoints and responsive columns not to work properly
Version 1.0.4
- Added support custom date locale
- Added support for custom date format
Version 1.0.3
- Added support custom text content for sites that use other languages
Version 1.0.2
- Added video functionality!
- Added option for hiding slide/grid toggle
- Added option for hiding heart and like count
Version 1.0.1
- Fixed bug that occurred when captions have no text
- Added option to start the stack in grid mode if desired