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:

1. Floated
2. 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:

1. The instagram caption
2. 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. : )