Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

Design

Line layout

Column layout

List layout

Square layout

Small Square

Table

Default Configuration

Default Behaviour(s) :

#00 : Display modes component is used in two different pages :

  • Search results page

    • on the main page

    • with each cursor

  • Boards page

    • on the main page

    • when looking at assets in a board

#02 : On the search page, 4 of the 6 display modes are displayed on the main page as well as within each cursor:

  • Line layout

  • Column layout

  • List layout

  • Square layout

#03 : On the boards page, 2 of the 6 display modes are displayed on the main page:

  • Line layout

  • Square layout

Whereas looking at assets in a board, 4 of the 6 display modes are displayed:

  • Line layout

  • Column layout

  • List layout

  • Square layout

#04 : The default layout selected is mostly the Square Layout except when looking at assets in a board where the default layout will be the Column Layout.

#05 : 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

#06 : 2 additionnal modes are available, but not displayed 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 a display mode for a cursor

To hide the display mode for a cursor, you just have to change it’s configuration $.dam.explore.layouts.<cursorname>.default-resource-config.hide-layout.json to true. Here are some example with the default cursor (“all assets”) and the “all videos” cursor:

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

or

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

and

src/wedia-plugin-template/res/v0/board/boards-view/layout/hide-layout.json
true

Configuring default display mode for a cursor

<cursor-name> can be replaced with default-cursor-config 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.list

List layout

tooltip

Translation i18n key:
layout.square

Square layout

tooltip

$.dam.explore.layouts.<cursor-name>.default-resource-config.available.json

[
{
"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": "list",
"i18n": "layout.list",
"class": "fas fa-list-ul"
},
{
"key": "square",
"i18n": "layout.square",
"class": "fas fa-grip-horizontal"
}
]

Configures “All assets” cursor

Each object represents an icon that will be displayed in the selection of layouts.

$.dam.explore.layouts.<cursor-name>.default-resource-config.default.json

"square"

Configures “All assets” cursor

Defines the default layout that will be used.

$.dam.explore.layouts.<cursor-name>.default-resource-config.hide-layout-selector-label.json

true

Configures “All assets” cursor

By default, hides the label:

To show the label, put this value to false:

$.dam.explore.layouts.<cursor-name>.default-resource-config.hide-layout.json

false

Configures “All assets” cursor

By default, will show the display mode:

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

Configuration for other non-default layouts

Config path

Default value

Description

$.dam.explore.layouts.default-cursor-config.default-resource-config.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.named-displays.asset-table-row.preview.json

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

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

$.common.named-displays.asset-table-row.row.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
}
]

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

  • No labels