Media Presenter

The MediaPresenter is templated presenter with a token replace functionality. Currently Presenters are; Accordion, Callout, Card, Carousel, Collapse, Pagination, TabStrip.

Tokens:

  • @BackgroundColor
  • @BorderColor
  • @ButtonColor
  • @CalloutColor
  • @TextColor
  • @Shadow
  • @LinkColor
  • @Title
  • @Description
  • @Label
  • @CreatedBy
  • @CreatedOn
  • @ModifiedBy
  • @ModifiedOn
  • @LinkURL
  • @LinkTitle
  • @LinkCaption
  • @Index [This is a dynamic value set at runtime as Items can be hidden]
  • @ViewOrder [Not the same as @Index]
  • [Image]
  • [Button]
  • [Link]

Settings

Accordion

The Accordion presenter is a component that organizes content within collapsable items. Accordion allows the display of only one collapsed item at a time. Accordions can toggle through a number of text blocks with a single click,

Example

Callout

A Callout Presenter is an often bordered inset in a printed article or illustration that usually includes a key excerpt or detail.

Example

Card

A Card Presenter component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.

Example

Carousel

The Carousel Presenter is a slideshow for cycling through a series of content, built with CSS 3D transforms. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Example

Collapse

The Collapse Presenter is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 .

Example

Pagination

The Pagination Presenter is a component used to indicate the existence of a series of related content across multiple pages and enables navigation across them.

Example

TabStrip

A TabStrip Presenter is a component that contains a collection of one or more tabs. Each Tab of a TabStrip is a separate object that users can select. Visually, a TabStrip also includes a client area that all the tabs in the TabStrip share.

Example

Knowledge Base

KnowledgeBase
The Media Presenter module allows you to build up a item list of Images with text and links and render the list in one of the presenters. Currently Presenters are; Accordion, Callout, Card, Carousel, Collapse, Pagination, TabStrip.

Last updated on 01-Nov-2021

Tokens are replaced with values set in the selected Media Presenters settings.
Using the tokens allows the substitution of dynamic content to replace special text tokens. By example using the @BackgroundColor will be replaced with the value that is set in the Settings for the selected Media Presenter, so in this case it will be replaced with the selected Background Color.

Last updated on 04-Nov-2021

The block tokens are a replaced with information that is set in the Media Item.
With the block tokens you are able to pass css class data and style information, for example: [Image Class="card-img-top" style="margin: 0px"]

Last updated on 14-Nov-2021

An animation lets an element gradually change from one style to another. Just add animation class to an element.
You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

Last updated on

The Media Item allows 5 custom tokens which will be replaced at the time of render.
The ultimate goal of token replacement is to make the value of a string dynamic. You begin with a static string containing tokens, and then update those tokens with replacement values to produce your dynamic string.

Last updated on