Articles in this section

See more

Building the Image Gallery Feature

Central KB
  • Updated
Follow

Overview

The Image Gallery feature is an easy and awesome way to display images in your app. You can create a custom gallery directly from your dashboard, or you can integrate the Image Gallery feature with Flickr, Picasa, or Instagram to pull in existing galleries. This article provides the steps on how to build the Image Gallery feature for your application.

The Image Gallery feature is perfect for these industries:

  • Bars and clubs

  • Bands and music artists

  • Shops

Some monetization ideas that you can implement are:

  • Selling ad space to local businesses and include ads or coupons in the gallery.

  • Showing off merchandise, artwork, food, etc.

Note: You can switch between your Custom, Flickr, and Instagram galleries without losing the changes you have made for each gallery. If you decide to switch back to your custom gallery after using Instagram, click the custom bubble again and click the Save Changes option to make your previously uploaded galleries reappear. 

Solution

Adding the Image Gallery Feature

  1. Navigate to the Build tab in BiznessApp.

  2. Click the +Add option under the Features section:

    mceclip0.png

  3. Search and choose the Image Gallery feature from the menu. Click the Select button:

    mceclip1.png

  4. Personalize the feature by providing a name. Click the ADD button and your new feature should appear in the left-side menu.

Adding Content to the Image Gallery Feature

Navigate to Build > Features and find the Image Gallery feature. There are four options to choose from:

Customize Your Own Image Gallery

  1. Under Screen Info: 

    • Change the Screen/Feature name (optional), which will appear in the app's feature menu (i.e., "Band Photos").

    • Add a Feature Icon that will appear in the app's feature menu:

      mceclip2.png

  2. To add a Custom Gallery, click the Customize Your Own Image Gallery option:

    1. Click the Add New Gallery button: 

      mceclip4.png

    2. Complete the required fields and click the ADD button. Repeat this process for each gallery:

      mceclip5.png

      Gallery Name Provide the gallery name.
      Thumbnail Image Upload a thumbnail image (140x140 px size is recommended), which will appear next to the gallery in the main feature view.
      Display Mode Choose if the images will be displayed on the whole screen or on a grid.
      Upload Images Upload images to the gallery.

    3. When selecting the Import Gallery option, you can import a gallery from Facebook or a Website:

      mceclip6.png

Facebook

  1. Provide your Facebook page URL.

  2. Ensure that the Facebook URL you are using is for the main page and not a specific feature of the Facebook page.

  3. The Facebook page must be publicly viewable without requiring a login. If you are receiving an error message, you may need to adjust the page's settings on Facebook.

  4. Click the Next button to scrape the Facebook page. You may be prompted to log in to your Facebook account. 

    Note: Ensure that the pop-up blocker is not preventing the Facebook login box from appearing. If you see a notification stating that a pop-up has been blocked, select the always allow option and try to import the gallery again.

  5. You will see a list of available galleries. Check the box corresponding to the galleries you would like to import. Click the Import button after selecting all your desired galleries.

  6. After processing, the Facebook galleries will appear in the main gallery list. Click the Edit option corresponding to a gallery to view and modify its details.

 

Website

  1. Type the website's URL.

  2. Click the Next button to scrape the website for images.

  3. The galleries will be added to the main gallery list automatically after scraping.

 

 

back to top

 

Flickr

To add galleries from Flickr, select the Flickr option:

mceclip7.png

API Key Enter the Flickr API Key. It's a long string of numbers and letters. For instructions on how to generate your API key, visit Flickr's API Keys Information page.
Email Enter the Flickr email. This is often different from the login email. You can locate the primary contact email by navigating to You > More > Profile.
Display Mode

Choose the Grid option to display the photos in rows. Users can click the photos to view them full-screen.

Select the Cover-flow option to present the photos in slideshow form. Users can swipe through the photos one at a time.
Gallery Type It is recommended to select the Photo Sets option for your Flickr gallery.

Important: If you receive the error "Connection to Flickr has failed. Please try again later."
mceclip0.png
Ensure that your app is published at the latest source code. Have a look at this article, Why Must Apps Be Re Published When a New Release Is Out?

Note: All changes will be saved automatically. 

 

back to top 

 

Picasa

Selecting the Picasa option will let you add galleries from Picasa: 

mceclip8.png

Email Enter the Picasa user ID.
Display Mode

Choose the Grid option to display the photos in rows. Users can click the photos to view them full-screen.

Select the Cover-flow option to present the photos in slideshow form. Users can swipe through the photos one at a time.

Note: All changes will be saved automatically.

 

back to top

 

Instagram

To add galleries from Instagram:

  1. Select the Instagram option and click the Connect To Instagram button:

    mceclip9.png

  2. On the pop-up screen, log in to your Instagram account:

    mceclip9.png

    Note: If you are previously logged in to an Instagram account through your browser, you may need to visit Instagram's website to log out.

 back to top

Custom Design

If you would like to create a custom design for the Image Gallery feature instead of using the global design. For example, here you can change the default white background, to another color or image. For more custom options have a look at this article about the Custom Design Area. 

Examples:

mceclip0.png

back to top

Related Articles

Comments

0 comments

Article is closed for comments.