Page type identifiers

A reference guide to the page types in the hub front end and their unique identifiers

This reference guide details all of the available hub front end page types, and lists the identifying page data available for each one.

Usage

This guide will show you how you can target or scope your CSS and JavaScript customizations to particular page types, collections of page types, or specific pages.

The tables in this guide list the page data that is available for each of the page types in the hub front end. This page data can be found in the <body> tag on all hub front end pages, and provides information about the page's page type along with other identifying details.

About page type identifiers

All pages in the hub front end have a page type, which indicates the preset templated layout that the page uses. A page's page type is indicated using the id attribute in the <body> tag.

Some page types have page type levels, which are hierarchical sub-types of the main page type. Their purpose is to allow for more granularity when scoping customizations for a particular page type. For example, by using different page type levels available on item pages, you could choose to scope a customization to any of:

  • All item pages, regardless of type
  • Just item pages containing social media posts
  • Just item pages containing social media posts from Twitter

Similarly, some page types belong to larger page type groups, which serve to group together distinct but related page types. This allows for scoping of customizations across multiple page types. For example, the "tile page" page type group encompasses all page types that display a tile grid, i.e. the hub page and all stream pages.

Both page type levels and page type groups are denoted with particular class attributes in the <body> tag.

πŸ“˜

Note

All page types use the id attribute as their primary identifier. The value of the id attribute is also repeated as a class attribute value in the same document.

Page type: Hub page

This page type is used for the home page of a hub front end. It is structurally very similar to the stream page page type.

  • Exists by default in all hub front ends
  • Visible by default
  • A hub front end contains only one page with this page type
  • Displays a unique Latest Content stream by default, which may be optionally replaced with content from a specified marketing stream

Page type levels

There are no additional levels for this page type.

Page type group

Part of the uf-tiles-page group.

Page data

The following page data is included in the <body> tag of a page with the Hub Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (hub home page)id / classuf-hub-page
Page Type GroupIdentifies which group of related page types this page type belongs to (tiles pages)classuf-tiles-page

Page type: Stream page

This page type acts as a listing page for content item pages. Variations exist for specific categories of content, for mixed content, and for personalized, self-contained content collections.

  • Generated automatically for each stream created in the Uberflip backend
  • Hidden from hub navigation by default, must be published to be visible in the front end

Page type levels

There is one additional level for this page type.

  • Page type: All stream pages share the same page type identifier
  • Secondary page type: Stream pages also have a secondary page type identifier to scope by content type

Page type group

Part of the uf-tiles-page group.

Page data

The following page data is included in the <body> tag of all pages with the Stream Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (stream)id / classuf-stream-page
Secondary Page TypeIdentifies the secondary page typeclassSee below
Marketing Template (streams with the Marketing Stream secondary page type only)Identifies the use of the optional Banner+Logo template on a Marketing Stream (if enabled)classuf-marketing-template
Sales Template (streams with the Sales Stream secondary page type only) Identifies the use of the optional Banner+Logo template on a Sales Stream (if enabled)classuf-sales-template
Stream IDIdentifies the backend stream that generated the page by its unique stream ID codedatadata-stream-id="XXXX"

Page data for the Stream Page page type also includes one of the following secondary page type identifiers:

Secondary Page TypePurposeAttribute TypeAttribute Value
Blog StreamDisplays only item pages with the Blogpost secondary page typeclassuf-blogs-stream
Video StreamDisplays only item pages with the Video secondary page typeclassuf-videos-stream
Document StreamDisplays only item pages with the Document secondary page typeclassuf-docs-stream
Social StreamDisplays only item pages with the Social secondary page typeclassuf-social-stream
Marketing StreamDisplays item pages with any secondary page typeclassuf-marketing-stream
Sales StreamDisplays item pages with any secondary page type, but does not allow navigation to any other part of the hub front end (self-contained)classuf-sales-stream

πŸ“˜

Note

When a copy of an item page is present in a marketing stream or a sales stream, the classes uf-marketing-stream or uf-sales-stream, respectively, are also present in the page data of that copy.

🚧

Note: Using a Marketing Stream on the hub home page

It is possible to display a particular marketing stream on the hub page in place of the Latest Content stream (see here for details). In this case, the page data that would usually be present on that marketing stream page is not present on the hub page.


Page type: Item Page

This page type is used to display content. Variations exist to account for different types of content.

  • Generated automatically for each piece of content created or imported in the Uberflip backend
  • Hidden from hub navigation and stream pages by default, must be published to be visible in the front end

Page type Levels

There are two additional levels for this page type:

  • Page type: All item pages share the same page type identifier
  • Secondary page type: Item pages also have a secondary page type identifier to scope by general content type
  • Tertiary page type: Item pages also have a tertiary page type identifier to scope by specific content type/source

Available secondary page types and their corresponding tertiary page types are (click to view corresponding page data):

Secondary Page TypePurposeIdentifier AttributeTertiary Page Types
BlogpostDisplays blog article contentclass="uf-page-type-blogpost"None
DocumentDisplays slide decks or document-type content (PDFs/Flipbooks)class="uf-docs-item"Uberflip
Slideshare
VideoDisplays video contentclass="uf-videos-item"Brightcove
Vidyard
Vimeo
Wistia
YouTube
SocialDisplays social media postsclass="uf-social-item"Twitter

Page type Group

Part of the uf-article-page group.

Page Data

Blogpost

The following page data is included in the <body> tag of all pages with the Item Page > Blogpost page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (item)id / classuf-item-page
Secondary Page TypeIdentifies the secondary page type (blogpost)classuf-page-type-blogpost
Item IDIdentifies the backend item that generated the page by its unique item ID codedatadata-item-id="XXXX"
Stream IDIdentifies the backend stream in which this item has been placed by its unique stream ID codedatadata-stream-id="XXXX"

πŸ“˜

Note

Items can be placed into multiple streams in the Uberflip backend. When this happens, Uberflip generates multiple copies of the same item page and organizes them under the appropriate stream pages.

The Stream ID page data for all variants of item page refers to the stream in which the specific copy of the item page is located. For example, viewing a front end item page in the context of a particular marketing stream page would display that marketing stream's Stream ID.

Regardless of the stream context, all instances/copies of an item page will display the same Item ID in their page data.

Document

The following page data is included in the <body> tag of all pages with the Item Page > Document page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (item)id / classuf-item-page
Secondary Page TypeIdentifies the secondary page type (document)classuf-docs-item
Tertiary Page TypeIdentifies the tertiary page typeclassSee below
Item IDIdentifies the backend item that generated the page by its unique item ID codedatadata-item-id="XXXX"
Stream IDIdentifies the backend stream in which this item has been placed by its unique stream ID codedatadata-stream-id="XXXX"

Page data for the Item Page > Document page type also includes one of the following tertiary page type identifiers:

Tertiary Page TypeContent Type/SourceAttribute TypeAttribute Value
UberflipEmbedded PDF or Flipbookclassuf-page-type-uberflip
LinkedIn SlideShareEmbedded SlideShare deckclassuf-page-type-slideshare

Video

The following page data is included in the <body> tag of all pages with the Item Page > Video page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (item)id / classuf-item-page
Secondary Page TypeIdentifies the secondary page type (video)classuf-videos-item
Tertiary Page TypeIdentifies the tertiary page typeclassSee below
Item IDIdentifies the backend item that generated the page by its unique item ID codedatadata-item-id="XXXX"
Stream IDIdentifies the backend stream in which this item has been placed by its unique stream ID codedatadata-stream-id="XXXX"

Page data for the Item Page > Video page type also includes one of the following tertiary page type identifiers:

Tertiary Page TypeContent Type/SourceAttribute TypeAttribute Value
BrightcoveEmbedded Brightcove videoclassuf-page-type-brightcove
VidyardEmbedded Vidyard videoclassuf-page-type-vidyard
VimeoEmbedded Vimeo videoclassuf-page-type-vimeo
WistiaEmbedded Wisita videoclassuf-page-type-wistia
YouTubeEmbedded YouTube videoclassuf-page-type-youtube

Social

The following page data is included in the <body> tag of all pages with the Item Page > Social page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (item)id / classuf-item-page
Secondary Page TypeIdentifies the secondary page type (social)classuf-social-item
Tertiary Page TypeIdentifies the tertiary page typeclassSee below
Item IDIdentifies the backend item that generated the page by its unique item ID codedatadata-item-id="XXXX"
Stream IDIdentifies the backend stream in which this item has been placed by its unique stream ID codedatadata-stream-id="XXXX"

Page data for the Item Page > Social page type also includes one of the following tertiary page type identifiers:

Tertiary Page TypeDescriptionAttribute TypeAttribute Value
TwitterEmbedded tweetclassuf-page-type-twitter

Page Type: Hub authentication page

This page type is used as the login page for a hub where the hub-level authentication feature is enabled. It is displayed when navigating to any page type in a hub where Hub Authentication is active.

  • Generated automatically when Hub Authentication is enabled
  • Visible by default (if Hub Authentication is enabled)
  • A hub front end contains only one page with this page type

Page type levels

There is only one level for this page type.

Page type group

Not part of any page type group.

Page data

The following page data is included in the <body> tag of a page with the Hub Authentication Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (hub authentication)id / classuf-hub-login
Hub IDIdentifies the hub this is the login page for by its unique ID codedatadata-hub-id=β€œXXXX”

Page Type: Stream authentication page

This page type is used as the login page for any stream where the stream-level authentication feature is enabled. It is displayed when navigating to the stream page, or any item page, in a stream where Stream Authentication is active.

  • Generated automatically for any stream where Stream Authentication is enabled
  • Each stream where Stream Authentication is enabled has its own stream authentication page
  • Individual stream authentication pages can be styled independently of other stream authentication pages in the hub front end
  • Visible by default (if Stream Authentication is enabled)

Page type levels

There is only one level for this page type.

Page type group

Not part of any page type group.

Page data

The following page data is included in the <body> tag of a page with the Stream Authentication Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (stream authentication)id / classuf-stream-login
Stream IDIdentifies the backend stream this is the login page for by its unique stream ID codedatadata-stream-id="XXXX"

Page Type: Author page

This page type is used as a biography/more info page for the authors to whom hub content is attributed.

  • Generated automatically when an author has filled in an author biography on their Uberflip backend account
  • Visible by default
  • Accessible from pages with the item page page type

Page type levels

There is only one level for this page type.

Page type group

Not part of any page type group.

Page data

The following page data is included in the <body> tag of a page with the Author Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (author page)id / classuf-author-page
Author IDIdentifies the backend author (user) profile that generated the page by its unique author ID codedatadata-author-id="XXXX"

Page Type: Search Page

This page type is used as a search results page when the search function in the hub navigation is used.

  • Exists by default in all hub front ends
  • Visible by default
  • A hub front end contains only one page with this page type
  • Accessible from all page types that display the hub navigation element

Page type levels

There is only one level for this page type.

Page type group

Not part of any page type group.

Page data

The following page data is included in the <body> tag of a page with the Search Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (search page)id / classuf-search-results-page

Page Type: Privacy Page

This page type is used to display the privacy policy for a hub where the Privacy Policy feature is enabled. It also displays the Privacy Groups settings if that feature is (separately) enabled.

  • Generated automatically for any hub where the privacy policy feature is enabled
  • Visible by default (if privacy policy feature is enabled)
  • A hub front end contains only one page with this page type
  • Accessible from the privacy banner component that is displayed on all pages when the privacy policy feature is enabled

Page type levels

There is only one level for this page type.

Page type group

Part of the uf-article-page group.

Page data

The following page data is included in the <body> tag of a page with the Privacy Page page type:

Page DataDescriptionAttribute TypeAttribute Value
Page TypeIdentifies the page type (privacy page)id / classuf-privacy-page
Page Type GroupIdentifies which group of related page types this page type belongs to (tiles pages)classuf-article-page