Step-by-Step: Creating and Publishing a Portal Experience

Product(s)
Gallery
Role(s)
Studio User
Task(s)
Create a Portal Experience
Get Started using Gallery

The purpose of this topic is to show you how you can create an engaging portal experience using Brightcove Gallery.

 

After completing this topic, you should be able to:

  • Configure Gallery settings
  • Use Gallery to create a new portal experience
  • Add videos to a portal experience
  • Customize a portal experience
  • Preview and publish a portal experience

Note: For a step-by-step guide to creating an In-Page experience, see Step-by-Step: Creating and Publishing an In-Page Experience.

Audience

Any Video Cloud publisher who needs to create engaging portal experiences without the need for any type of custom development.

Prerequisites

Before you get started

To use the sample videos provided, perform the following steps.

  1. Download the sample files.
  2. Upload the videos to your Video Cloud account.
  3. Add a tag of 'bird in flight' to the Chickadee video.
  4. Create three playlists and add the videos to the playlists as follows.
    Video Playlist
    Clown Fish
    Crab
    Dolphins
    Leafy Seadragon
    Lionfish
    Sea Turtle
    Seahorse
    Sea Creatures
    Chickadee
    Peacock
    Woodpecker
    Birds
    Elephant
    Tiger
    Zebra
    Animals
  5. Add some related link URLs to a few of the videos. In a later section, we will configure the portal to display related links for videos.
  6. Using the Players module, create a new player called Gallery Player.

Configuring Gallery with a default player

Brightcove Gallery can be configured with a default video player that will be used on your Gallery sites. If no default player is specified, the Brightcove Default Player will be the default. To configure Gallery with a default player, follow these steps.

  1. Login to Video Cloud Studio.
  2. The current Video Cloud account name will appear in the upper right corner of the page. If you have multiple accounts, click the account selector drop down and select the account you would like to create the experience in. Note that this should also be the account that has the videos you want to use as well.
  3. Click Gallery in the navigation menu.
  4. Click the Settings link at the top of the page.
  5. A list of players should appear. If not, click Players in the left navigation.
  6. Select the player that will be used on your Gallery sites. If you are following the steps, select the Gallery Player you created earlier.

    Note: As a best practice, we recommend you create and style dedicated players for your Gallery experiences.

  7. Click Save.

Creating a custom domain name

When you create a new portal experience, Gallery will assign random URL to it (i.e. site-12345.bcvp0rtal.com). Portal experiences can be assigned a Brightcove provided domain (what we will do) or you can use your own custom domain. To create a new Brightcove provided domain, follow these steps.

  1. From the Settings page, click Custom Domains & SSL in the left navigation.
  2. Click Create Custom Domain.
  3. Select either a brightcovegallery.com or gallery.video domain.
  4. Enter a custom domain. Use your own name or company name. If the domain is not available, a message will display. Enter another name.
  5. When you have entered a valid domain, click Save.

Note: The custom domain will be assigned to the portal in a later section.

Creating a new portal experience

To create a new Gallery portal experience, follow these steps.

  1. Click the Experiences link at the top of the page.
  2. Click New Experience.
  3. Click the Portal tab at the top of the page. A list of portal templates will be displayed. Locate the Marquee template and click Choose.

    Note: Once you select a template it can't be changed. For more information Gallery templates, see the Overview of Gallery Portal Templates topic.

  4. Enter Animal World for the Experience Title. For the Pre-Populate experience? setting, select No thanks.
  5. Click Create Experience.

The Gallery Site Editor will open. The Gallery Site Editor is used to customize the experience and provides the ability to manage page layouts, add videos, choose styles and configure other settings for the portal. All of the customization settings are accessed using the left navigation menu.

Editing the site details

The experience title, description and language settings can be edited using the Gallery Site Editor.

  1. Click OVERVIEW in the left navigation.
  2. For the Experience Description, add Animal World Video Portal.
  3. Click Save.

Adding objects to a page template

Each portal template provides a set of page templates that can be customized. The page templates that are provided depend upon the template that was selected when the experience was first created. The Marquee template provides Home, Playback and Category page templates. These pages can be seen in the left margin as part of the PAGES menu.

For more information on adding objects to page templates, see Customizing the Content of Portal Experience Pages.

To add objects to a page template, follow these steps.

  1. Click PAGES in the left navigation.
  2. Click the Home page in the left margin. Pencil icons () indicate areas on the page that can be edited.
  3. At the top of the page, click on the +ADD CONTENT area.
  4. Select the Upload option and then click Save. An +Add Photo placeholder will be added to the page.
  5. Click on the +Add Photo placeholder.
  6. Click Choose File and then browse and select Animal World Logo.png. This file is provided as part of the sample assets. Click Save.
  7. Verify that the image appears in the page header.
  8. Scroll to the bottom of the page. Click on [YOUR BRAND]. Enter Animal World for the title and then click Save.
  9. Click on the Playback and Category pages in the left margin. Notice that the header image and title text appear on those pages as well. Go back to the Home page.

Previewing the experience

Previewing an experience lets you see how the portal is going to display on mobile, tablet and desktop devices. You will want to preview the portal as you go through the steps to customize it. The portal can be previewed in a new browser tab or a shareable link can be generated so others can preview the portal. For more information on previewing and publishing a portal experience, see Previewing and Publishing a Portal Experience.

To preview the portal, follow these steps.

  1. While editing the site using the Gallery Site Editor, click Preview and then click Responsive Preview.
  2. The preview will open in a new browser tab.
  3. Close the site preview tab.

Creating collections and adding videos to the collections

Using the Gallery Site Editor, you can select which videos to display on the portal. When creating a portal experience, videos are organized into collections. Collections are created based upon Video Cloud video metadata and can include:

  • Video Cloud playlists
  • Keywords
  • Custom metadata
  • Tags

Videos from a YouTube account can also be added to collections. For more information on creating collections and adding video to your site, see Adding Videos to a Portal Experience.

To add videos to a portal site, follow these steps.

  1. Click VIDEOS in the left navigation.
  2. Name the first collection Birds and then press enter.
  3. Click the collection name.

    The collection editor will open.

  4. Select Video Cloud for the Collection Source and select Playlist for the criteria.
  5. Click the Birds playlist. All of the videos in the Birds playlist will appear in the videos list. Click Save.

    Note: When using a playlist video assignment, the order of the videos is based upon the playlist settings that were set in the Media module.

  6. Create another collection named Animals using the Animals playlist as the criteria.
  7. Create another collection named Sea Creatures using the Sea Creatures playlist as the criteria.
  8. Create another collection named Birds in Flight. Select Custom as the criteria.
  9. For the videos to include, select Tags and add a tag of 'bird in flight'. Press enter.
  10. Order videos by Most Recent.
  11. Confirm the Chickadee video appears in the Video Collection list. Click Save.
  12. Confirm that 4 collections have been created.

    Note: You can change the order of the collections by clicking and dragging the collection to a new position.

Changing the site style

The Style settings can be used to customize the site colors and fonts that are used on the experience. For more information on changing the site style, see Customizing the Style of a Portal Experience.

To change the site style, follow these steps.

  1. Click STYLE in the left navigation.
  2. A Theme is a set of colors and fonts that can be applied to a template. Select a Theme. This portal will use the Triton theme.
  3. Select a Primary and Secondary font to use. This portal will use the Open Sans font.
  4. Click the < Back to Experience link at the top of the style menu.

Additional styling related settings are also available as part of the APPEARANCE AND BEHAVIOR settings.

  1. Click APPEARANCE AND BEHAVIOR in the left navigation.
  2. Click Template Settings.
  3. Select Change the featured video to the first video of the selected category.

    Note: The Template Settings that are available are based upon the template that was selected when the experience was created. Not all templates have template settings.

  4. Click Save.

For more information on the appearance and behavior settings, see Customizing the Appearance and Behavior of a Portal Experience.

The Site Search settings can be used to enable and customize site search capabilities. By enabling site search, search capabilities will be added to the site pages giving viewers a way to search your content. For more information on customizing site search, see Customizing the Site Features of a Portal Experience.

To enable site search, follow these steps.

  1. Click SITE FEATURES > Site Search in the left navigation.
  2. Check the Enable site search option.
  3. Click Save to save the settings.

Customizing the social settings

The Social settings provide viewers a way to easily share your content to popular social media sites. You can also provide a way for viewers to quickly access your social media sites. For more information on customizing the social settings, see Customizing the Social Settings for a Portal Experience.

To configure the Social settings, follow these steps.

  1. Click SITE FEATURES > Social in the left navigation.
  2. Select all of the Sharing Options. This will add social sharing icons next to the player.
  3. Select the Dark icon on light option.
  4. Click Save.
  5. Click the Stay Connected tab at the top of the page. By supplying your social media account information, the Gallery site will display icons in the footer of pages giving viewers direct access to your social media sites.
  6. Enter your social media information or just enter brightcove for the Facebook Name, Twitter handle and LinkedIn Username.
  7. Select the Light icon on dark option.
  8. Click Save to save the settings.

Customizing video and playback settings

The Video and Playback settings can be used to select a custom player for the experience, add a lead form and customize other video related settings. For more information on customizing the social settings, see Customizing the Video and Playback Settings of a Portal Experience.

To customize the Video and Playback settings, follow these steps:

  1. From the Gallery Site Editor, click VIDEO AND PLAYBACK > Player and Lead Form.
  2. Ensure that both Player Behavior settings are checked. Click Save if needed.
  3. Click VIDEO AND PLAYBACK >Video in the left navigation.
  4. Select the Show related link for each video option.
  5. Click Save.

Assigning a custom domain

When portal experiences are created, they are assigned a random, static URL. In most cases, you will want to access the site at a more friendly URL. For more information on assigning a custom domain to a portal experience, see Assigning a Custom Domain to a Portal Experience.

To view the URL assigned to a portal and assign a custom URL, follow these steps:

  1. From the Gallery Site Editor, click SITE CONFIGURATION > URL. The URL assigned to the site will be displayed.
  2. Click Add Custom Domain.

    Note: If there is no Add Custom Domain button, no custom domains have been created.

  3. Select the domain you created earlier.
  4. Click Save.

Publishing the experience

Publishing a portal experience makes the experience available at a public URL. For more information on previewing and publishing a portal experience, see Previewing and Publishing a Portal Experience.

To publish the experience, follow these steps.

  1. From the Gallery Site Editor, click Publish.

    Note: The custom domain you assigned to the site should be listed in the dialog.

  2. On the Publish Site dialog, click Publish Now to confirm the site publication.