Versions Compared

Old Version 10

changes.mady.by.user Jill POUCHAIN

Saved on

compared with

New Version Current

changes.mady.by.user Jill POUCHAIN

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Design

...

Image Added

Image Added

Image Added

Line layout

Image Modified

Column layout

Image Modified

List layout

Image Modified

Square layout

Image Modified

Small Square

Image Modified

Table

Image Modified

Block

Default Configuration

...

Default Behaviour(s) :

...

Image Added

How it works

General

Display modes component is used in

...

three different pages of the DAM :

...

  • On the search results page for each cursors

...

  • On the

...

  • board page

...

with each cursor

...

Boards page

  • on the main page

  • when looking at assets in a board

...

  • On the board’s detail page, when displaying assets of a board

The last display mode viewed by the user will be used for his next connection.

On the search page

...

4 of the

...

7 display modes are displayed on the main page as well as within each cursor:

  • Line layout

  • Column layout

...

  • Block layout

  • Square layout

...

The default layout is the Square Layout.

On the boards page

...

2 of the

...

7 display modes are displayed

...

:

  • Line layout

  • Square layout

The default layout

...

is the Square Layout.

On the board’s detail page, when displaying assets of a board

4 of the

...

7 display modes are displayed :

  • Line layout

  • Column layout

...

  • Block layout

  • Square layout

...

The default layout

...

is

...

the

...

Column Layout.

List layout metadata

...

For the List layout the metadata displayed on each tile are : 

On the search results main page and the cursors:

  • Name

  • Caption

  • Keywords

When looking at assets in a board:

  • Name

  • Photograph

  • Caption

...

Block layout

The block layout has specific behaviour, mostly with metadata like keywords. If used in a badge format, 2 properties are mandatory so the visual effect is clean.

For the Block layout the metadata displayed on each tile are the same for the search results page and on the board’s detail page (when displaying assets of a board) : 

  • Name (on 1 line)

  • Description (on 2 lines)

  • Asset type (on 1 line)

  • Photograph (on 1 line)

  • Expiration date (on 1 line)

Info

Since Starter-Kit 2023.3, it is now possible to configure the metadata shown in the Block layout via the DAM Configuration page. For more information, see this page, section “Metadata displayed on the block display mode”.

Additional modes

2 additional modes can be configured (not activated by default) :

  • Small square : No metadata overlay can be displayed on the tiles in that mode. The only action available is selection. Can be setup at the JSON configuration level.

  • Table : The metadata displayed as columns can be setup at the JSON configuration level.

Advanced Configuration

Activating/deactivating

...

every display mode for a cursor

To hide the display

...

modes for a cursor, you just have to change it’s configuration in the config path $.dam.explore.layouts.

...

<cursorName>.defaultResourceConfig.hideLayout.json to true.

...

Code Block
src/wedia-plugin-template/res/v0/dam/explore/layouts/all-videos/default-resource-config/hide-layout.json
true

or

Code Block
src/wedia-plugin-template/res/v0/dam/explore/layouts/default-cursor-config/default-resource-config/hide-layout.json
true

and

...

<cursorName> can be replaced with defaultCursorConfig for the default cursor display or all-videos for the "All videos" cursor.

Activating/deactivating every display mode for the main Board page

To hide the display modes for the main board page, you just have to change it’s configuration in the config path $.board.boardsView.layout.hideLayout.json to true.

Activating/deactivating every display mode when looking at assets in a board

To hide the display modes for the main board page, you just have to change it’s configuration in the config path $.board.explore.layout.hideLayout.json to true.

Configuring default display mode for a cursor

<cursorName> can be replaced with defaultCursorConfig for the default cursor display or all-videos for the "All videos" cursor.

Config path

Default value

Description

Translation i18n key:
layout.line

Line layout

tooltip

Translation i18n key:
layout.column

Column layout

tooltip

Translation i18n key:
layout.

...

square

...

Square layout

tooltip

Translation i18n key:
layout.

...

block

...

Block layout

tooltip

$.dam.explore.layouts.

...

<cursorName>.defaultResourceConfig.available.json

Code Block
[

...


  {
    "key": "row",

...


    "i18n": "layout.line",

...


    "icon": "cw-svg-h-bricks",

...


    "aliases": ["line", "rows"]

...


  },

...


  {
    "key": "col",

...


    "i18n": "layout.column",

...


    "icon": "cw-svg-v-bricks",

...


    "aliases": ["cols", "columns", "column"]

...


  },

...


  {
    "key": "

...

block",

...


    "i18n": "layout.

...

block",

...


    "class": "fas fa-

...

border-

...

all"

...


  },

...


  {
    "key": "square",

...


    "i18n": "layout.square",

...


    "class": "fas fa-grip-horizontal"

...


  }

...


]

Configures “All assets” cursor

In this configuration file, each object represents a layout that will be displayed in the

...

display mode.

$.dam.explore.layouts.

...

<cursorName>.defaultResourceConfig.default.json

"square"

...

Defines the default layout that will be

...

selected

$.dam.explore.layouts.

...

<cursorName>.defaultResourceConfig.hideLayoutSelectorLabel.json

true

Configures “All assets” cursor

By default, hides the label:

...

Image Added

To show the label, put this value to false:

...

Image Added

$.dam.explore.layouts.

...

<cursorName>.defaultResourceConfig.hideLayout.json

false

Configures “All assets” cursor

By default, will show the display mode:

...

Image Added

If this value is set to true, the display will entirely be hidden:

Image Added

Configuring metadata displayed in the list layout of the dam explorer

This is an example of the default display of an asset in the dam explore page, when the layout is selected as list:

Image Added

This is it’s configuration:

Config path

Default value

Description

$.common.namedDisplays.assetList.content.json

Code Block
[
  {
    "field": "description",
    "withoutLabel": true
  },
  {
    "field": "keywords",
    "clickable": true,
    "showIfEmpty": true,
    "badge": true,
    "withoutLabel": false
  }
]

The withoutLabel property will hide the label if set to true.

clickable will allow us to click on a keyword and will add the keyword as a research filter if it’s set to true.

If we still want to display a field even if it’s empty, set showIfEmpty to true.

The badge is a visual option.

Image Added

When set to true, the keywords will display as a button-like way.

Image Added

If set to false, the keywords will display as a simple text.

$.common.namedDisplays.assetList.infos.json

Code Block
[
  {
    "field": "duration",
    "withoutLabel": true
  }
]

$.common.namedDisplays.assetList.preview.json

Code Block
{
  "namedVariation": "small"
}

$.common.namedDisplays.assetList.title.json

Code Block
[
  "defaultListItemTitleName"
]

For example : modifying the file src/wedia-plugin-template/res/_portal/common/named-displays/asset-tile.json

With :

Code Block
{
  "preview": {
    "namedVariation": "big"
  },
  "title": [
    {
      "field": "name",
      "withoutLabel": true
    }
  ],
  "infos": [
    {
      "field": "duration",
      "withoutLabel": true,
      "component": "CwDuration",
      "config": [
        {
          "requirements": ["shouldBePositive"]
        }
      ]
    },
+    { // afficher le type de media (JPG...)
+      "withoutLabel": true,
+      "field": "assetnature",
+      "badge": true,
+      "class": "badge bg-secondary mr-2"
+    },
+    { // afficher la date de fin de droits
+      "withoutLabel": true,
+      "field": "dteendrights",
+    },
  ]
}

Will display :

...

Image Added

Configuration for boards

The following configuration is for the main page of the boards.

Config path

Default value

Description

Translation i18n key:
layout.list

List layout

Translation i18n key:
layout.square

Square layout

$.board.boardsView.layout.available.json

Code Block
[{
  "key": "list",
  "i18n": "layout.list",
  "class": "fas fa-list-ul"
}, {
  "key": "square",
  "i18n": "layout.square",
  "class": "fas fa-grip-horizontal"
}]

Here is determined which layout display will be shown.

$.board.boardsView.layout.default.json

"square"

Default layout that will be selected unless the user has already selected a layout at least once.

$.board.boardsView.layout.hideLayout.json

false

$.board.boardsView.layout.prefix.json

"board"

Configuring metadata displayed in the list layout of the boards page

Config path

Default value

Description

asset.photo.by

Photo by

$.board.explore.items.display.defaultConfig.json

Code Block
{
  "block":"assetBlock",
  "col": "assetTile",
  "list": "assetBoardList",
  "mobile": "assetMobile",
  "row": "assetTile",
  "square": "assetTile",
  "table": "assetTableRow"
}

$.common.namedDisplays.assetBoardList.content.json

Code Block
[
  {
    "field": "description",
    "withoutLabel": true
  }
]

$.common.namedDisplays.assetBoardList.infos.json

Code Block
[
  {
    "field": "duration",
    "withoutLabel": true
  }
]

$.common.namedDisplays.assetBoardList.preview.json

Code Block
{
  "namedVariation": "small"
}

$.common.namedDisplays.assetBoardList.subtitle.json

Code Block
[
  {
    "clickable": true,
    "field": "photograph",
    "i18n": "asset.photo.by",
    "inline": true
  }
]

$.common.namedDisplays.assetBoardList.title.json

Code Block
[
  {
    "field": "name",
    "withoutLabel": true
  }
]

Configuring metadata displayed in the block layout of the dam explorer

Info

Since Starter-Kit 2023.3, it is now possible to configure the metadata shown in the Block layout via the DAM Configuration page. For more information, see this page, section “Metadata displayed on the block display mode”.

This is an example of the default display of an asset in the dam explore page, when the layout is selected as block:

Image Added

This is it’s configuration:

Config path

Default value

Description

$.common.namedDisplays.assetBlock.content.json

Code Block
[
  {
    "field": "name",
    "withoutLabel": true,
    "showIfEmpty": true,
    "maxLines": 1
  },
  {
    "field": "description",
    "withoutLabel": false,
    "showIfEmpty": true,
    "maxLines": 2
  },
  {
    "field": "assetnature",
    "withoutLabel": false,
    "showIfEmpty": true,
    "maxLines": 1
  },
  {
    "field": "photograph",
    "withoutLabel": false,
    "showIfEmpty": true,
    "maxLines": 1
  },
  {
    "field": "dteendrights",
    "withoutLabel": false,
    "showIfEmpty": true,
    "maxLines": 1
  }
]

  • maxlines allow us to define the number of lines to display. This property is mandatory when using the block layout, as it will trigger different visual behaviours.

Image AddedImage Added

If the text is not long enough, blank lines will be shown. Otherwise the text will be cut with an ellipsis:

Image Added

In the block layout, the maxLines can have a value between 1 and 5. Never write maxLines='none' or you will have non-desired behaviour visually.

  • The withoutLabel property will hide the label if set to true.

Image AddedImage Added

  • clickable will allow us to click on a keyword and will add the keyword as a research filter if it’s set to true.

Image AddedImage Added

  • If we still want to display a field even if it’s empty, set showIfEmpty to true.

Image AddedImage Added

  • The badge property is a visual effet. When using this property (set as true), it is mandatory to add 2 other properties with the following values: maxLines set at 3 and nbDisplayedItems property with a limit of 2.

Image Added

If you increase or decrease the maxLines/nbDisplayedItems, it will have visual repercusions.
When badge is set to true, the ellipsis button (which normally displays more keywords) will not be clickable either.

Image Added

Configuration for other non-default layouts

Config path

Default value

Description

$.dam.explore.layouts.

...

defaultCursorConfig.defaultResourceConfig.available.json

{ "key": "squareSmall", "i18n": "layout.squareSmall", "class": "fal fa-grip-horizontal" }

Add this code in the config path to display the Small square in the searsh result page

$.board.explore.layout.available.json

{ "key": "table", "i18n": "layout.table", "class": "fal fa-table" }

Add this code in the config path to display the Table layout when looking at assets in a board

$.common.

...

namedDisplays.assetTableRow.preview.json

{
"colWeight": 8,
"headerClass": "cw-table-cell-media",
"i18n": "asset.media.preview",
"namedVariation": "tiny"
}

...

$.common.

...

namedDisplays.assetTableRow.json

[
{
"colWeight": 15,
"field": "name",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"colWeight": 10,
"field": "dteendrights",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"colWeight": 5,
"field": "clipped",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"badge": true,
"colWeight": 15,
"field": "keywords",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"colWeight": 20,
"field": "description",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"colWeight": 7,
"field": "width",
"hideLongTextTooltip": true,
"withoutLabel": true
},
{
"colWeight": 7,
"field": "height",
"hideLongTextTooltip": true,
"withoutLabel": true
}
]

...

This configuration allows to set the metadata in the columns and the size of them in the table layout.