Page Attributes

There are several attributes in Phosis that should be used in page templates containers, and we’re adding more with each release.

Attributes For Page `head`¶

The following attributes are only available in your page template’s <head>. Use them by tagging your item of interest with data-phosis-object="" with a value from one of the below options. There can be multiple copies of these, e.g. both Open Graph tags and Twitter Cards markup.

PageTitle¶

This populates the current page’s title + the site name.

This attribute should be added to the <title> element in your page template’s <head>, or a <meta> tag.

It will replace the element’s text contents with Page Name > Your Site Name.

<title data-phosis-object="PageTitle">Your Site Title</title>

Or, use it in a <meta> tag for Open Graph:

<meta property="og:title" data-phosis-object="PageTitle">

PageDescription¶

This populates the value of the current page’s Description field.

You should add this attribute to any and all tags in your <head> that should receive the hydrated description in a content attribute. This can include:

<!-- Standard meta description -->
<meta name="description" data-phosis-object="PageDescription">

<!-- Facebook/Slack/etc. Open Graph tag, also used by Twitter Cards -->
<meta property="og:description" data-phosis-object="PageDescription">

PageCanonical¶

This will provide you with the canonical page URL based on the site’s canonical domain, HTTP vs. HTTPS-only, and the assembled page slug.

<meta property="og:url" data-phosis-object="PageCanonical" />

PageImage¶

This will retrieve the Phosis CDN URL to the page’s hero image or, if none is specified, any site-level default image configured in Site Settings. If neither are configured, this is ignored and passed through.

Use JPGs for this

You should always use JPG images for this feature to enable automatic resizing, cropping, and compression options.

<meta property="og:image" data-phosis-object="PageImage" data-phosis-object-img-configuration="s/w/1200/h/630/q/70/"/>

Keep things fast

While you can use this feature with fullsize, uncropped images, it’s best for SEO and social media to apply an image configuration string to resize & crop your image like in the example above. You can read more about image configuration strings in the Images documentation.

Attributes For Page `body`¶

`data-phosis-page-container`¶

Use this once only!

As of v0.82 and the current version of Phosis, this attribute should be used only once in a page template. Using it more than once may result in unexpected behavior.

The use of data-phosis-page-container in a page template tells Phosis magic where to put the content it generates. As of v0.82, you should add this to one, singular container (<div>, <main>, etc.) that should enclose all of the generated content that changes from page to page in your site. It could even go on the <body> itself. But use it only once!

Wasn’t this different before v0.82?

Alpha & beta testers of Phosis may have noticed this breaking change. During the development of Phosis, this attribute was just the same as any other container in Phosis, and we recommended it be named “Main Content.”

However, to introduce the ability to have the page template itself contain databindable content objects for maximum flexibility (introduced in v0.82), we realized we had to rename this attribute in what was a breaking change.

All existing Phosis sites will be automatically updated to adjust the name of this attribute the first time someone visits the site. You don’t need to do anything unless your template HTML code hasn’t updated, in which case you should just hit any public-facing page on your site.

`data-phosis-blocks-container`¶

Use this once only!

As of v0.82 and the current version of Phosis, this attribute should be used only once in a page template. Using it more than once may result in unexpected behavior.

Placing data-phosis-blocks-container in a page template allows you to add data-driven content blocks to your page template, automatically including them in any pages in your site that use this page template.

You should add this to one, singular container (<div>, <main>, etc.) inside your page template that will contain all the results from the page template’s content blocks when hydrated. But use it only once!

Any page templates that have this option enabled will appear at the bottom of your site tree in PhosisUI.

The Auto-Added `data-slug` Attribute¶

The slug of the current page is exposed to your site’s tag in an attribute named data-slug.

This is useful if you wish to have custom CSS or Javascript that’s scoped to a specific page on your site.

If the page is your homepage, the data-slug is “/”; otherwise, it’s your page’s slug, minus the leading slash.

Dynamic site menus¶

You can also make your site menus dynamically-generated with the use of additional data-* attributes.