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
idattribute as their primary identifier. The value of theidattribute is also repeated as aclassattribute 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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (hub home page) | id / class | uf-hub-page |
| Page Type Group | Identifies which group of related page types this page type belongs to (tiles pages) | class | uf-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (stream) | id / class | uf-stream-page |
| Secondary Page Type | Identifies the secondary page type | class | See 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) | class | uf-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) | class | uf-sales-template |
| Stream ID | Identifies the backend stream that generated the page by its unique stream ID code | data | data-stream-id="XXXX" |
Page data for the Stream Page page type also includes one of the following secondary page type identifiers:
| Secondary Page Type | Purpose | Attribute Type | Attribute Value |
|---|---|---|---|
| Blog Stream | Displays only item pages with the Blogpost secondary page type | class | uf-blogs-stream |
| Video Stream | Displays only item pages with the Video secondary page type | class | uf-videos-stream |
| Document Stream | Displays only item pages with the Document secondary page type | class | uf-docs-stream |
| Social Stream | Displays only item pages with the Social secondary page type | class | uf-social-stream |
| Marketing Stream | Displays item pages with any secondary page type | class | uf-marketing-stream |
| Sales Stream | Displays item pages with any secondary page type, but does not allow navigation to any other part of the hub front end (self-contained) | class | uf-sales-stream |
Note
When a copy of an item page is present in a marketing stream or a sales stream, the classes
uf-marketing-streamoruf-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 Type | Purpose | Identifier Attribute | Tertiary Page Types |
|---|---|---|---|
| Blogpost | Displays blog article content | class="uf-page-type-blogpost" | None |
| Document | Displays slide decks or document-type content (PDFs/Flipbooks) | class="uf-docs-item" | Uberflip Slideshare |
| Video | Displays video content | class="uf-videos-item" | Brightcove Vidyard Vimeo Wistia YouTube |
| Social | Displays social media posts | class="uf-social-item" |
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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (item) | id / class | uf-item-page |
| Secondary Page Type | Identifies the secondary page type (blogpost) | class | uf-page-type-blogpost |
| Item ID | Identifies the backend item that generated the page by its unique item ID code | data | data-item-id="XXXX" |
| Stream ID | Identifies the backend stream in which this item has been placed by its unique stream ID code | data | data-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (item) | id / class | uf-item-page |
| Secondary Page Type | Identifies the secondary page type (document) | class | uf-docs-item |
| Tertiary Page Type | Identifies the tertiary page type | class | See below |
| Item ID | Identifies the backend item that generated the page by its unique item ID code | data | data-item-id="XXXX" |
| Stream ID | Identifies the backend stream in which this item has been placed by its unique stream ID code | data | data-stream-id="XXXX" |
Page data for the Item Page > Document page type also includes one of the following tertiary page type identifiers:
| Tertiary Page Type | Content Type/Source | Attribute Type | Attribute Value |
|---|---|---|---|
| Uberflip | Embedded PDF or Flipbook | class | uf-page-type-uberflip |
| LinkedIn SlideShare | Embedded SlideShare deck | class | uf-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (item) | id / class | uf-item-page |
| Secondary Page Type | Identifies the secondary page type (video) | class | uf-videos-item |
| Tertiary Page Type | Identifies the tertiary page type | class | See below |
| Item ID | Identifies the backend item that generated the page by its unique item ID code | data | data-item-id="XXXX" |
| Stream ID | Identifies the backend stream in which this item has been placed by its unique stream ID code | data | data-stream-id="XXXX" |
Page data for the Item Page > Video page type also includes one of the following tertiary page type identifiers:
| Tertiary Page Type | Content Type/Source | Attribute Type | Attribute Value |
|---|---|---|---|
| Brightcove | Embedded Brightcove video | class | uf-page-type-brightcove |
| Vidyard | Embedded Vidyard video | class | uf-page-type-vidyard |
| Vimeo | Embedded Vimeo video | class | uf-page-type-vimeo |
| Wistia | Embedded Wisita video | class | uf-page-type-wistia |
| YouTube | Embedded YouTube video | class | uf-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (item) | id / class | uf-item-page |
| Secondary Page Type | Identifies the secondary page type (social) | class | uf-social-item |
| Tertiary Page Type | Identifies the tertiary page type | class | See below |
| Item ID | Identifies the backend item that generated the page by its unique item ID code | data | data-item-id="XXXX" |
| Stream ID | Identifies the backend stream in which this item has been placed by its unique stream ID code | data | data-stream-id="XXXX" |
Page data for the Item Page > Social page type also includes one of the following tertiary page type identifiers:
| Tertiary Page Type | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Embedded tweet | class | uf-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (hub authentication) | id / class | uf-hub-login |
| Hub ID | Identifies the hub this is the login page for by its unique ID code | data | data-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (stream authentication) | id / class | uf-stream-login |
| Stream ID | Identifies the backend stream this is the login page for by its unique stream ID code | data | data-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (author page) | id / class | uf-author-page |
| Author ID | Identifies the backend author (user) profile that generated the page by its unique author ID code | data | data-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (search page) | id / class | uf-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 Data | Description | Attribute Type | Attribute Value |
|---|---|---|---|
| Page Type | Identifies the page type (privacy page) | id / class | uf-privacy-page |
| Page Type Group | Identifies which group of related page types this page type belongs to (tiles pages) | class | uf-article-page |
Updated over 3 years ago