Design

How it works

Composition of the homepage

• Header

• Search bar area

• Widget Area

• Homepage footer

Header

More information : Header

Search bar area

The search bar area is composed of :

• A drop-down menu with the following options :

  • All Assets

  • All videos

• Search bar for entering key words.

  • The list of the metadata used for fulltext research is indicated in the asset structure file within “Fulltext” column (Assets Structure)

• A “Search” Button

  • When user clicks on this button, he’s redirected to the search page.

• Slider with default images as background of the search bar

An option can be activated to search into SKUs directly from this search bar (not configured by default)

Widget Area

Out of the box 4 widgets are available but none of them are activated on the homepage by default.

• The Waffle

• 2 up

• 3 up

• 4 up

Each widget must be linked to a board containing assets. These assets will be displayed within the widget area.

Administrators can create as many widgets as they want to.

Homepage footer

• A slider with the most viewed, most downloaded assets of the last week (automatic) is displayed at the bottom of the homepage.

• 3 Footer links are displayed by default :

  • Legal Notice, redirect to the Legal Notice page

  • Terms of use, redirects to the Terms of use page

  • Feedback, redirects to the Feedback’s popin

Note

• Footer links can be internal or external to the DAM

• Footer links can be internal or external to the DAM

Basic configuration

Background sliding images as a dedicated contribution

Contributing sliding images is a 2 steps process from the backend interface:

1. Upload and describe images Administration > Manage Portal > Manage Home carousel images.

2. Create a home widget Administration > Manage Portal > Home Widgets of type carousel and assign it the images you want

Widgets area

Widgets are contributed from the back-end interface. Administration > Manage Portal > Home Widgets. You can sort the widgets from the backend interface.

Based on the widget type you select, the form will adapt itself to let you choose one, two, three or four public carts.

From a portal perspective, widgets are loaded by retrieving the list of contributed home widgets.

Advanced Configuration

Search bar area

Search bar can be configured as a simple “google like” search or with a “fill-in the gaps sentence”. Default configuration uses the “google like” search.

The background sliding images can be configured as a dedicated contribution of images or as the result of a predefined query on any dam content inside the DAM. Default configuration uses a dedicated contribution.

“google like” search

[
  {
    "translationKey": "home.searchBar.allmedia"
  },
  {
    "translationKey": "home.searchBar.video",
    "targetCursorName": "allVideos"
  }
]

fill-in the gaps sentence

Search bar can be configured as a simple “fill in the gap sentence”

Common config to both searches

background sliding images as a dedicated contribution

Contributing sliding images is a 2 steps process from the backend interface:

1. Upload and describe images Administration > Manage Portal > Manage Home carousel images.

2. Create a home widget Administration > Manage Portal > Home Widgets of type carousel and assign it the images you want

background sliding images as a predefined query

Defining the images displayed in the slider can be done by defining a cursor and referencing it in the config entry point $.home.homeHeaderCarousel.

The default value for this config entry point is homeHeaderCarousel, however, no cursor has been defined.

By defining such a cursor, the system will load matching data and use the result to display images.

Analytics widget

Analytics widget cannot be configured ; it is activated through 2 conditions:

1. There is a carousel widget configured in backend

2. The config entry point $.home.displayTopMedias is not set to false

Footer area

A footer of links can be displayed on the home page.

To activate it, set config entry point $.home.displayFooter to true

Links displayed are configured through $.home.footer (Array)

Each item in the array is an object containing following properties:

• i18n: String i18n key of the link label.

• action?: Object store action to dispatch.

  • type: name of the action to dispatch

  • payload?: payload to pass to the action

• routing?: An object for routing (same props than what a b-link would accept)