Overview

The Image Gallery feature is an easy and awesome way to display images inside your app. You can create a custom gallery right through the dashboard, or integrate with Flickr, Picasa, or Instagram to pull in existing galleries.

This article provides instructions on setting up this feature in your app.

Information

This feature is available on the following platforms:

• iOS
• Android
• HTML5

This feature is recommended for the following industries:

• Bars and Clubs
• Bands and Music Artists
• Shops

Monetization ideas:

• Sell ad space to local businesses and include ads or coupons in the gallery.
• Show off merchandise, artwork, food, etc.

Process

To set up the Image Gallery feature, follow the steps below:

1. Navigate to the Build section in your dashboard.
2. Click Add Feature.
3. Choose the Image Gallery feature from the menu, then click Select.
4. Name your feature, then click Add. Your new feature will now appear in the left-side menu.
5. Click on the feature to expand its menu. From the left-side menu you can do the following:
   • Use the checkbox to delete the feature.
   • Click and drag the arrow icon to rearrange.
   • Edit the feature icon by clicking it, then selecting a new image from the fly-up menu.
   • Toggle the feature on/off.
   • Jump to a specific section (e.g. Content or Custom Design) to adjust the feature settings.

Content

Here you can rename the feature and add photos.

1. Under Screen Info, change your Screen / Feature Name or leave as-is. This is the name that will appear in the app’s feature menu (e.g. Band Photos instead of Image Gallery).
2. To add a Custom Gallery, click Customize Your Own Image Gallery, then Add Gallery.
3. Complete the fields, then click Add. Repeat this process for each Gallery.
   • Name: Give your gallery a name.
   • Thumbnail: Upload a Thumbnail image (we recommend 140x140px). This will appear next to your gallery in the main feature view.
   • Display Mode: Choose if your images will be displayed as a whole screen or on a grid.
   • Upload: Upload images to the gallery.
4. You can import galleries from several sources. To import a gallery, select Import Gallery.
   • Facebook:
     1. Plug in a Facebook Page URL.
        • Make sure the Facebook URL is for the main page, not a specific feature of the Facebook Page.
        • The Facebook Page must be publicly viewable without requiring login. You may need to adjust the Page settings in Facebook in order to scrape it if you are receiving an error message.
     2. Click Import to scrape the Facebook Page. You may be prompted to log in to your Facebook account to do so.Note: Make sure your pop-up blocker is not preventing the Facebook login box from appearing. If you see a pop-up blocked notification, try selecting the “always allow” option and then try the import once more.
     3. When scraping is complete, you will see a list of available galleries. Check the box next to any galleries you would like to import. When you are ready, click the Import button.
     4. When your Facebook galleries are done processing, they will appear in the main gallery list. Click Edit next to any of them to view and modify the details.
   • Website:
     1. Plug in a Website URL.
     2. Click Import to scrape the website for images.
     3. When the scraping is complete, you are all done! The galleries will be added to your main Gallery list automatically.
   • Flickr:
     1. Select the Flickr option.
     2. Enter your Flickr API Key. It is a long string of numbers and letters. For instructions on generating your key, check out Flicker’s The App Garden article for reference.
     3. Enter your Flickr Email. This is often different than your login email. You can locate the Primary Contact Email by navigating to You > More > Profile.
     4. Select a Display Style.
        • With Gallery, your photos will appear in rows. Users can click photos to view them full-screen.
        • With Cover-flow, your photos will be presented in slideshow form. Users can swipe through the photos one at a time.
     5. Select a Gallery Type. We recommend the Photo Sets option for Flickr.
     6. Click Save Changes at the bottom.
   • Picasa:
     1. Select the Picasa option.
     2. Just enter your Picasa user ID (usually your Gmail address).
     3. Select a Display Style.
        • With Gallery, your photos will appear in rows. Users can click photos to view them full-screen.
        • With Cover-flow, your photos will be presented in slideshow form. Users can swipe through the photos one at a time.
        • Picasa images will always be grouped into individual galleries.
     4. Click Save Changes at the bottom.
   • Instagram:
     1. Select the Instagram option.
     2. Click Connect to Instagram.
     3. Log in to your Instagram account.
        • Note: If you have logged into an Instagram account through your browser before, you may need to visit Instagram.com and log out before connecting the app to a new feed.
     4. Click Save Changes at the bottom.

Custom Design

If you would like to create a custom design for this feature instead of using the Global Design, please refer to the article Feature: Custom Design Area.

Examples