What is the Explorer Custom Promo custom component?

The Explorer Custom Promo custom component displays COVE and Public Media Platform (PMP) content in 28 different possible ways. (question) What is PMP?

Some features include:

  • Content channels (series name) displayed
  • Play button on video objects
  • Representative series thumbnail image
  • Call to action links

The Explorer Custom Promo also introduces validation to the admin interface making it easier to avoid errors. This component is designed to be implemented in the Page Content section of your Bento pages. 

This section demonstrates how to add COVE objects, however, external objects can be added by manually typing the full URL path to the object and image. Find the prefix for your site by opening your Master page then clicking Show next to Advanced Settings. Find your prefix in the Overwrite URL textbox as shown here.

 See example of correct vs. incorrect links

Click image to expand

 

 

If you replace a COVE image with your own image in this custom component, be sure your image has a 16:9 ratio.  Use this handy tool (When finished, click the back button on your browser to return to this page) to configure your image to the correct 16:9 ratio. Type a width into the width textbox and the height is automatically generated for you!  

 View the tutorial

Presentation

 Click here to view 1 Item
 
 Click here to view 2 Items Side by Side
 
 Click here to view 2 Items Vertical
 
 Click here to view 3 Items Side by Side
 
 Click here to view 3 Items Vertical
 
 Click here to view 4 Items
 
 Click here to view 5 Items
 

Variables

VariableDefinition
display_content_channelIndicates the content channel to which the promo content belongs.
display_details_textsClickable text that leads the user to click through to additional information about the promo (i.e.: Read more)
display_imagesDisplays a representative thumbnail for the promo.
display_play_iconsA play button that appear on the thumbnail image.  When the user clicks the play button, the video opens to full size and plays.  Appears on videos only.
layoutThe order of the promo modules.  There are seven layouts from which to choose.  If you choose a layout with 5 items, save your component and then switch to 3 items, the last two items will be omitted automatically.

How to implement the Explorer Custom Promo

  • From the main Bento administration dashboard, click Pages (Figure 1).

Figure 1

 

  • Click the page to which you want to add the Explorer Custom Promo custom component (Figure 2).

Figure 2

 

  • In the Page Content section, click the Available Components dropdown menu and click Custom Component (Figure 3.1).
  • Click Add Component (Figure 3.2).

Figure 3

  • Click the component dropdown menu and click Explorer Custom Promo (Figure 4.1).
  • Click Save (Figure 4.2).

Figure 4

  • Click the display_content_channel dropdown menu and click yes to display the content channel on your promo or no to hide the content channel (Figure 6.1). 
  • Click the display_details_texts dropdown menu and click yes to display this text or no to hide it (Figure 6.2).  (warning) If yes is selected it is mandatory that you type text into the details_text textbox for each COVE object.  Max. character limit: 13. 
  • Click the display_images dropdown menu and click yes to display the COVE object images in your promo or no to hide all images (Figure 6.3).
  • Click the display_play_icons dropdown menu and click yes to display a play button in the corner of your COVE object or no to hide the play button (Figure 6.4). (warning) The play button appears only when user hovers over the image.
  • Click the layout dropdown menu to select a layout for your promo component (Figure 6.5). The number of COVE objects displaying on the page adjusts to the option that is selected.
  • Click the blue hat icon to browse for a COVE object or the red PMP icon to browse for content from other public media platforms (Figure 6.6). 
 Click here to view where each of these fields appear on your promo

Click image to enlarge

Figure 6

 

  • Click the radio button next to the COVE object you want to include in your custom promo (Figure 7.1).
  • Click Add selected (Figure 7.2)
  • Repeat these steps for each COVE object you want to add to your custom promo.

Figure 7

 

  • Click Save within the component (Figure 8).

There are two Save buttons on the page: one for the custom component and one for the entire page. Click the Save button in the custom component.

Figure 8

 

  • Click Preview site in the upper right side of the screen to view this page in a browser (Figure 9).

Figure 9

  • Your Explorer Custom Promo displays (Figure 10).

Figure 10

 

How to change a promo item

After you have added your custom promo items you may decide that you want to change one or all of them.  No problem!

  • Click the blue hat icon at the bottom of the Item section that holds the COVE object you want to change (Figure 1).

Figure 1

  • All available COVE objects appear. Click the radio button next to the one you wish to use (Figure 2.1).
  • Click Add selected (Figure 2.2).  

Figure 2

  • A message asking for confirmation to overwrite the original object appears. Click OK to overwrite the original object or Cancel to keep the original object (Figure 2).

Figure 3

  • The item is populated with the metadata for the new promo item (Figure 4).
  • When finished, click Save at the bottom of the promo custom component.

Figure 4

How to rearrange items

Once you've added your COVE objects, they can be reordered at any time.

  • On the left side of each COVE object, click the grey patterned box and drag the object to the place you want it to appear in the list. When it is in place, release your mouse (Figure 1).

Figure 1

click image to enlarge

  • When an item is placed in its new location, the label changes automatically to reflect its new position (i.e.: Item 1 becomes Item 3).

How to delete an item

In the Custom Promo custom component, you cannot actually delete an item. You can replace an item, but when it comes to removing items, you must use the layout dropdown menu to display fewer items in your Custom Promo. For instance, if you have five items but you only want to display three, you cannot delete the two extra items. You must instead click the layout dropdown menu and click 3 items side by side or 3 items vertical. 

How to add Public Media Platform (PMP) content

In addition to adding COVE content to your Explorer Custom Promo, you can add content from across public media platforms such as NPR. Before using this feature, you must first contact your SPI representative to request PMP API keys.

  • After filling out the variables fields (Figure 1.1), click the grey arrow on the right to expand the first topic (Figure 1.2).
  • Click the red PMP icon next to the blue hat icon to browse PMP content (Figure 1.3).

Don't see the red PMP icon? You probably have not yet been set up with access to PMP content. Contact your SPI representative to have an account set up for you.

Figure 1

 

  • In the search textbox at the top, type keywords (Figure 2.1).
  • Click the right facing arrow to go to the next page or type a page number in the textbox provided and click Go to go to that page (Figure 2.2).
  • Click the radio button next to the piece of content you want to add (Figure 2.3).
  • Click Add selected (Figure 2.4).

Don't see the content you're looking for? You may not have rights to access certain content. Contact Marc Pultuskier at marc@publicmediaplatform.org to ask about content rights.

Figure 2

 

  • The content fields are populated (Figure 3.1).
  • Click the next grey arrow to expand the second section and add another piece of content (Figure 3.2).

Figure 3

 

  • When you're finished, click Save (Figure 4).

Figure 4

 

  • Click View on site to view your page in a browser (Figure 5).

Figure 5

 

  • Your PMP content and any COVE content you have added appears on the page (Figure 6). Each piece of content displays the content channel and any other features you have decided to include on your promo. It should be noted that PMP content is automatically removed from your site after one year from the day it was added.
 What is a content channel?

A Content Channel is defined as a group of objects bound by an organizing editorial concept. It can be the name of your show (Check Please!) or a category in which your show belongs (Documentaries). In most cases, a content channel is likely the name of a show, but it may be another sub-brand belonging to your station that you want content to surface under. For example, a web-only blog, or an aggregated news brand, like Decision 2012.

Only PBS can create a content channel in COVE.

Figure 6