loading table of contents...

7.2. Website Features

This section describes general features of the Brand Blueprint website.

Long-scrolling pages

Brand Blueprint adds support for long-scrolling pages. Such pages usually have visual dividers to highlight different content sections - also called "Gaps" - that can have a parallax scrolling effect, that is, the picture inside the gap scrolls slower than the remainder of the page around it.

To configure gaps in the content, you have to add local settings.

Defining gaps for pages

For pages, you define placements for which the first item is rendered as a gap. Add the placement name to a Struct String List placementsWithFirstItemAsHeader in Local Settings or a Linked Settings content.

For example, on the Brand Homepage, "placement2" containing the "For Professionals" section is configured and consequently, the first item "Professionals Page" is not rendered as a regular teaser, but as a gap.

Define gaps for pages

Figure 7.4.  Define gaps for pages


Defining gaps for collections

For collections, you can define if the first item of the collection should be rendered as a gap. In Local Settings or a Linked Settings content, set a Boolean property firstItemAsHeader to true.

For example, in Placement 3 of the homepage, the first item is "For Consumers Collection" (Square). This collection has a settings document linked that sets the "firstItemAsHeader" to true.

Setting content for collection with gap

Figure 7.5.  Setting content for collection with gap


Teaser rendering behavior for Placements and Collections

Brand Blueprint allows to set a viewType on a placement of a page grid. This can be used to ease editorial tasks - any item added to a pre-configured placement automatically gets the desired rendering viewType applied.

Examples on the Homepage:

  • The "Hero" placement is set to "Superhero", which automatically renders any added content item as a full-size Superhero teaser.

  • The "Placement 1" is set to "Claim", which automatically renders any added content item as Claim teasers.

  • The "Placement 3" is set to "Default", so that contained Collections can set their own viewTypes specifically.

[Note]Note

These are default settings. You are free to customize the page grid to your needs.

Any setting on the placement in a page takes precedence over a setting on a collection that is inside the placement.

Example:
  • A placement with viewType="Square" contains a Collection with viewType="Claim"

    "Square" wins, collection items are rendered as "Square".

  • A placement with viewType="Default" contains a Collection with viewType="Claim"

    "Claim" wins, collection items are rendered as "Claim".

Additionally, through the Container facade, the same rendering templates also apply to Collections that are often used to define layout-specific rendering of teasers.

In the current Brand Blueprint release, it is not possible to set viewTypes directly on Teasers or other single content items. This can be achieved by creating additional viewType templates. Technically, the "Container" Facade only applies to lists of items, not to single items.

Collection view type lookup

In order to avoid duplication of layout templates for both Page Placements and Collections, a joint View Type Lookup is implemented via interface com.coremedia.blueprint.common.layout.Container. Just create a CMViewtype in Options/Viewtypes/CMChannel/ for your Layout Variant, and it will be available for both Placements and Collections.

Configurable HTML Title Suffix

A site-specific HTML Title Suffix can be set by a technical editor via a Struct Setting.

For example, all page titles get appended " | Chef Corp.", and pages inside the Press Release page structure get appended " | News | Chef Corp."

/Settings/Options/Bundles/Corporate_en

  • customTitleSuffixText (String)

Editable HTML description meta tag

Each content item can now have a specific text editorially configured for the HTML Description Meta Tag via Studio.

[Note]Note

For articles that are embedded directly on a page in Detail view, the HTML Description of the CMChannel is used, not the one of the CMArticle. For articles that are rendered in Detail view as "leaf" content in the context of another page, the HTML Description of the CMArticle is used.

Configurable auto-shortening of teaser texts

As unedited teaser text is inherited directly from the detail body text, automatic shortening of too long teaser texts can be set for each teaser type with a site-specific Struct setting. The algorithm tries to shorten the text at word breaks.

Options/Settings/CAEConfig

  • teaser.max.length (Integer) - as in CM8

  • text.max.length (Integer)

  • claim.max.length (Integer)

  • hero.max.length (Integer)

  • superhero.max.length (Integer)

  • square.max.length (Integer)

If the settings are not present, default values defined in templates will be used.

Configurable breadcrumb navigation

The breadcrumb display can be configured to omit first and last elements. For example, for a site you may want to suppress "Home" as a first breadcrumb element, or you might want to exclude "leaf content" (such as articles or other content items rendered in detail view) from the breadcrumb due to length and/or design constraints.

/Settings/Options/Bundles/Corporate_en

  • breadcrumbHideRootElement (boolean)

  • breadcrumbHideLastElement (boolean)

[Note]Note

If the last navigation element is a page itself, it will be rendered in the breadcrumb, even if breadcrumbHideLastElement is set to "true".

Configurable Call-To-Action text for teasers

For each teasable content item, an editor can set a specific "Call-To-Action" (CTA) text that is displayed as a clickable button. The default text for the CTA is pre-configured per document type in the language Bundle document (for example, Learn More for Articles). Users can override the default text or suppress the CTA button completely for each teaser.

The Studio forms for CMTeasable are extended for the Brand Blueprint to handle the CTA text. The CTA configuration is stored in the "localSettings" struct property with the following settings:

  • callToActionCustomText (String)

  • callToActionDisabled (Boolean)