Page Banner

Recent Updates

• New: Author profile photo in News, Event, and Spotlight banners. A round avatar renders inside the “Posted By” block, between the label and the author-name link, sourced from /_layouts/15/userphoto.aspx?size=M&accountname={email}. Configurable via the new showAuthorImage toggle and authorImageSize slider (16–48 px). Photos that 404 or accounts without an email gracefully collapse to today's text-only attribution — no broken-image artefacts.
• Fixed: Add to Calendar success toast now stays visible for 1.5s after clicking Add to Outlook. Previously the dropdown unmounted in the same React frame as the toast, making the click look like a no-op even though the Graph call succeeded.
• Fixed: Add to Calendar dropdown is no longer clipped by the banner section's bottom edge. The hero overlay's overflow: hidden was removed (image clipping is still handled via object-fit on the hero image), so the dropdown can extend past the banner box and its bottom rows render in full.

How it Works

• Detects page type: Inspects the page’s ContentTypeId prefix, content type name, case-insensitive alternate names (e.g. “News”, “News Page”), and falls back to PromotedState to catch standard SharePoint news posts that share the Site Page base content type.
• Reads metadata from the page item: Uses dynamic field discovery to find common columns across different site setups — date, category, author/byline, banner image, and Show Likes / Show Comments. Discovery is case-insensitive and covers both friendly and encoded (_x0020_) internal names, plusOwl* legacy columns.
• High-resolution images: Banner image fields that carry a JSON payload are parsed to the original serverRelativeUrl file; getpreview.ashx URLs are bumped to the highest resolution bucket so you don’t get blurry thumbnails.
• News / Spotlight banner actions: Like/unlike and comment count use SharePoint list item APIs. “Comment” scrolls to the comments section on the page (including nested scroll containers). “Share” copies the page URL to the clipboard.
• Event banner actions: “Add to Calendar” opens a dropdown that supports Outlook / Office 365 (Microsoft Graph), Google Calendar (link), and an .ics download. A structured Date & Location panel renders below the hero, with Full / Smart / Custom date formatting.
• All-day event detection: If the page has no explicit fAllDayEvent column, the web part auto-detects all-day events by checking whether both dates share the same UTC hour with zero minutes (SharePoint stores site-timezone midnight as a non-zero UTC hour).
• Respects page-level toggles: Like and Comment buttons automatically hide when the page hasShow Likes / Show Comments set to No, when SharePoint commenting is disabled (checked via Site Pages REST, list DisableCommenting, and item CommentsDisabled), or when a page-level OwlShowPageLikes / OwlShowPageComments column is set to No.
• Stays in sync: Like state and comment count are polled every 5 seconds while the page is open so the banner stays aligned with the native SharePoint comment feed and Like button.
• Built-in image picker: The property pane includes a FilePicker that lets you pick from SharePoint site files, OneDrive, Organisational assets, stock images, web search, or upload directly — uploads are saved into SiteAssets with a timestamped, sanitised filename.

Common Configurations

Copy these ready-to-use configurations:

Reference

Property Pane Configuration

Page Banner shows different property groups depending on what page type it detects (News/Spotlight vs Event).

Layout

Visibility (News / Spotlight)

Visibility (Event)

Colours

The Colours group always shows the useWhiteText, useWhiteOverlay, and dateColor fields. The remaining fields are contextual: activeButtonColor shows on News/Spotlight pages, while buttonColor and accentBorderColor show on Event pages.