Edit a page

Editors change a page's content on the live page itself. There is no separate admin screen for content.

For editors

  1. Sign in at /sunbird/login, then open any page of the site. A small SunBird toolbar appears in the bottom-right corner.
  2. Choose Edit this page. The editable parts of the page are outlined. If the page has an unpublished draft, you see the draft.
  3. Click an outlined text and type. Rich text (paragraphs, headings, lists with one level of nesting, quotes, dividing lines, bold, italic, strikethrough, superscript, subscript and links, which can open in a new tab or go to a phone number or a place on the page) has its own toolbar above it, with the usual shortcuts (Ctrl+B, Ctrl+I, Ctrl+K for a link). Click an outlined image to change it (see Images). Changed slots are outlined in amber.
  4. Choose:
    • Save as draft to keep the changes unpublished. Visitors still see the published page, and you can come back and carry on later.
    • Save and publish to make the changes live. The page reloads as visitors see it.
  5. Exit edit mode returns to the normal view. If you have unsaved changes, the browser asks before you leave.

If someone else saved the page after you opened it, SunBird refuses your save rather than overwrite their changes: copy any text you want to keep, reload the page, and make your changes again.

Images

In edit mode, click an image (or tab to it and press Enter) to open the media rail on the right:

  • Pick an image from the library, or choose Upload an image to add a JPEG, PNG, WebP or GIF from your computer. It is added to the library and picked. The page shows it straight away.
  • Write the Alt text: a short description for people who cannot see the image. Leave it empty if the image is only decoration.
  • Delete removes an image from the library. SunBird will not delete an image that a page shows now or has in a draft. If older versions used it, it asks first: those versions will show the page's built-in image instead.

The new image is kept when you choose Save as draft or Save and publish. See Media library.

Repeated entries

Parts of a page that are a list, such as a gallery, have a dashed frame round them in edit mode. Add entry, on the frame's bottom edge, adds one at the end, and a small bar just above each entry's top-right corner has buttons to move it Up or Down, or Remove it. Each change is saved as a draft straight away, with any other unsaved changes, and the page reloads. See Repeat parts of a page.

Shared fragments

Some content is shared by several pages, such as testimonials. In edit mode it has a solid frame with a bar along its bottom edge, and it cannot be changed from the page. Choose Edit fragment on the bar to edit it: only the fragment is editable, and its bar has Save as draft, Save and publish and Exit edit mode, which save it for every page that shows it. The toolbar along the bottom is for the page. Fragment history lists its versions, to preview or publish again. Restoring an earlier version of a page does not change its fragments. See Share content between pages.

In edit mode, links that editors can change, such as buttons, are outlined. Type to change a link's words. Click it to open the link rail, and under Goes to choose a page of the site, or Another address... to type a web address, an email (mailto:...) or a phone number (tel:...). A link to a page follows the page if its address changes. The change is kept when you choose Save as draft or Save and publish.

Tables

In edit mode, tables that editors can change, such as a price list, are outlined. Click a cell, a column heading or a section heading and type. An empty heading says Column heading or Section heading in grey until you type in it.

Under the table, + Row adds a row at the end of the section you are in, + Column adds a column on the right, and + Section adds a section, with a heading, at the end.

While a cell has focus, tabs beside the table open menus for what the cell belongs to. Pointing at a tab, or opening its menu, tints the cells it changes:

  • Row, on the row's left: add a row above or below, move it up or down (from one section into the next), or remove it.
  • Column, above the column: add a column to the left or right, move it, or remove it.
  • Section, on the right of the section's first row: add or remove its heading, add a section below, move it, or remove it with its rows.

From the keyboard, Alt+F10 moves from a cell to its tabs, the arrow keys move through a menu, and Escape goes back. The last row of a section, the last column and the last section cannot be removed; their menu items are greyed out, and pointing at one says why. A table has at most 12 columns and 200 rows. A section heading left blank is dropped when the table is saved. The changes are kept when you choose Save as draft or Save and publish.

Page settings

In edit mode, choose Page settings to change the page's title, description and share image, as shown in search results and when the page is shared. Each text field shows the page's default as a grey placeholder; leave a field empty to keep the default. Choose image picks the share image in the media rail, and Remove takes it away. The settings are saved with the page: choose Save as draft or Save and publish. See SEO page settings.

Page history

Choose History on the toolbar to open the history rail. It is on the toolbar while you view a page, not in edit mode, because previewing and restoring a version both leave the page. It lists the page's draft, if it has one, then every published version, newest first, with who published it and when. The version visitors see now is marked Live.

  • Preview shows that version of the page, as it was. Visitors still see the live version.
  • Publish this version makes an earlier version live again. Nothing is deleted or overwritten: SunBird publishes a copy of it as a new version (marked "Restored from version N"), and any draft you have is kept.

For developers

Edit mode needs nothing beyond making a page editable and signing in:

  • The toolbar is added to the page's <body> by SunBird, for signed-in editors only. Visitors never get it, and the page's markup needs nothing extra. Keep the default @addTagHelper lines and a <body> element in the layout.
  • Edit mode is the page's own address with ?sb-edit=1, and a preview of version N is ?sb-version=N. For anyone who is not a signed-in editor both show the normal public page.
  • In edit mode each slot is wrapped so it can be outlined: <sb-text> becomes a <span>, <sb-html> a <div>, and <sb-image> keeps its <img> with extra attributes. The public page is rendered exactly as before.
  • Rich text is edited with HCI.RichText, an HCI package that comes with SunBird; in edit mode its script and stylesheet load from /_content/HCI.RichText/. The browser sends a structured document, never HTML, and SunBird writes the HTML from it using a fixed set of tags (p, h2 to h4, ul, ol, li, blockquote, hr, strong, em, s, sup, sub, a, br). Style those tags inside your <sb-html> slots. The editor offers only what SunBird accepts, and the server refuses anything else; images, tables and styles are not offered. Any other markup in a slot's default content (a class, a <code>) is dropped once an editor saves that slot, and edit mode warns the editor under the slot before then.
  • Pages shown to a signed-in editor are sent with Cache-Control: no-store, so no shared cache can serve the toolbar or a draft to visitors.
  • Saves go to POST /sunbird/edit/{pageKey}/draft, /publish and /rollback, for editors only, with an antiforgery token, and with the page's concurrency stamp so a stale save is refused.
  • Image editing needs a file store registered; see Store images. An image slot in edit mode carries data-sb-media with its image's id, and a click on it never follows a link it sits in.
  • Edit mode only reads while showing a page. The database is written only when the editor saves.
Edit this page