How to

The content form fields

Title

The title of the page - displayed at the top of the page and in the browser tab.

Shortname

This is the last part of the URL, usually a web-safe version of the page title but it doesn’t have to be (this page’s title is “Add content to the DS” but the shortname is just “add-content”). Web safe meaning it’s all lowercase and only contains letters, numbers and the hyphen. So for example a page called “UX & Design” would translate as “ux-and-design”.

Category

The category the page should appear under

Sort order

This determines what order the pages appear on the index pages and side menu.

Basic

For most cases, you just need to set a number corresponding to the order you want the page to appear in on the index page, to make it the first item set to 1, 2 for the second. If two pages in the same category have the same sort order set, it will order them alphabetically.

Advanced

For a more complex hierarchy with multiple levels of side navigation this is a bit more complex. Pending a more user-friendly way of setting this it’s done with dot notation indicating the sort order for each level of the page. For example:

/msm/wallet/how-to/accessibility/experience-design/confidence/

Has a sort order of:

2.3.2.1

The sort order starts at the first level of content pages, in this case /msm/wallet/

This means that within /msm/wallet/ how-to is the 2nd item, then within /msm/wallet/how-to/ accessibility is the third item. Within /msm/wallet/how-to/accessibility/ experience-design is the 2nd, and within /msm/wallet/how-to/accessibility/experience-design/ confidence is 1st.

The sort orders are set like this:

Is Tag Content

Only used when creating index pages. This should be set to “No”

Status

Each page has a colour-coded status indicating the level of completeness of the page:

Description

A short summary of the page - this is shown on the index page and in search results.

Introduction

For some page templates, an initial paragraph or two, shown in a slightly larger font as the first text block on the page.

Content

The main content for the page. See below for an explanation of the supported features - Markdown, shortcode and template fragments.

Markdown All

This enables Markdown to be parsed within template fragments (TPLs). It can affect older TPLs though so is a switchable option. Enable it if you see Markdown that’s not being processed.

Image

The ID of a Gallery image displayed on the index page. See below for an explanation of how the Gallery works

Previous Page/Next Page

Certain templates may include links to previous and next pages, the pages they link to can be set here.

Uploading and inserting images with the Gallery

The Gallery is the DS’s image and media storage, very similar to WordPress’s Media Library. Using the uploader you can upload images via drag & drop, file dialogue or copy & paste and use them in your pages.

Uploading images

To upload an image, go to the Gallery via the link in the top right of the screen, then choose your file(s) and hit the Upload button.

After uploading you can rename, add a description or delete the file.

Depending on your permission level, you will see only your own uploads, or everyone’s. Images uploaded by other people show the uploader’s name next to the thumbnail.

Inserting images into a page

Clicking the Insert Image link above the editor’s content field will open an overlay allowing you to pick an image from the gallery the inserts a “shortcode” link into the field. See below for an explanation of shortcode. It also adds the title of the file to make it a bit easier to know what the image is when editing the page:

[img id=461 title="Powerpoint Guidelines"]

You can specifiy a different image to serve for mobile by adding an mid parameter (for Mobile ID):

[img id=100 mid=101]

Adding functionality and creating more complex layouts

To enhance the pages you write, you can add images, easily link to other DS pages and place your content into containers such as tabs, and expanders. This extra functionality is provided via different methods.

Markdown

Markdown is a text-to-HTML conversion tool which allows you to write using an easy-to-read, easy-to-write plain text format, which is then converted to HTML by the system. For example, instead of writing <strong>Lorem ipsum</strong> you would write **Lorem ipsum**.

A link to the Markdown syntax is shown wherever it is enabled for a field.

Shortcode

Shortcode expands on Markdown and uses a similar square bracket syntax. It’s a way of inserting complex HTML with simple markers. This HTML can either be structural, like tabs or expanders, or content, such as images or videos.

As an example for the image shortcode, rather than having to enter all the HTML code to output responsive images like this:

<picture>
    <source media="(max-width: 767px)" srcset="//ds.moneysupermarketgroup.test/gallery/0/content/portrait/powerpoint-guidelines-767x431-6092665c7002f_powerpoint-guidelines.jpg">
    <img alt="Powerpoint Guidelines" src="//ds.moneysupermarketgroup.test/gallery/0/content/portrait/powerpoint-guidelines-2172x1221-6092665c7002f_powerpoint-guidelines.jpg" srcset="//ds.moneysupermarketgroup.test/gallery/0/content/portrait/powerpoint-guidelines-4344x2442-6092665c7002f_powerpoint-guidelines.jpg 2x">
</picture>

You can instead just use shortcode with the ID and the system will auto-generate the HTML:

[img id=123]

Supported shortcode

As the editor system is still work-in-progress, not all supported shortcode is inserted by the links above the field. You can manually add others with the following code. One thing to not is that some of these have closing tags.

In-page links / table of contents (TOC)

As shown at the top of this page, you can insert a table of contents with in-page links to the sections on the page. This is done with the following:

[inpagelinks]

The system will then auto link any H3 (###) level headings and create a list of links to them at the point where the shortcode is inserted. You may need to change what headings are H3s if the TOC list doesn’t match what you want to link to.

Tabs

Wrap the content you want to appear in a tab in opening and closing tab shortcode. Just add one for each tab. This example will show two tabs:

[tab title="Tab one"] Tab one content here [/tab]

[tab title="Tab two"] Tab two content here [/tab]

Expanders

For an expander it’s the same - just wrap your content in the tags:

[expander title="More information"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar odio semper erat varius, ut mattis nunc lacinia. Phasellus sed feugiat sem, eget lacinia metus. Morbi faucibus odio nec leo finibus, quis congue velit placerat. Fusce pretium mauris vel nisi maximus pharetra. Praesent vitae ligula sed diam interdum tristique. Aliquam erat volutpat. Cras cursus ornare purus sed efficitur. Aliquam erat volutpat. Nulla vestibulum lorem sed velit gravida, quis faucibus nisl lobortis. [/expander]

Template Fragments

Template Fragments are used for more complex chunks of HTML and differ from shortcode in the formatting, and that they contain values and CSS overrides. Values in this case are properties of the fragment that are applied to the HTML

Here’s an example of a Template Fragment in the editor:

{TPL_BLOCK_SIDEIMAGE WHITE} Money{/TITLE} There have never been so many ways to manage your money. From digital banks to budgeting apps to next-generation payment options, money management in every form is being reimagined.

To thrive, we need to meet – or exceed – those expectations. This site sets out how we do that. {/CONTENT} [img id=233]{/IMG} {/TPL_BLOCK_SIDEIMAGE}

The fragment starts and ends with the name of fragment, in this case TPL_BLOCK_SIDEIMAGE. Within the fragment code are placeholders for the values that should form the content part of the HTML, in this case a title, the content, and an image. Immediately after the opening tag, CSS classnames can be specified, in this case “white”.

Within the system the HTML for the fragment is defined with placeholders for the values, like this:

<div class="innerwrapper cols sideimage{‎CLASSES‎}"> <div> <h2 class="bravo grad">{‎TITLE‎}</h2> {‎CONTENT‎} </div> <div>{‎IMG‎}</div> </div>

When the page is viewed in the browser, the system takes the content saved by the page author in the fragment format, then replaces the placeholders with the actual values, then parses the shortcode (images etc). For this example {‎TITLE‎} gets replaced with Money, and the outputted HTML looks like this:

<div class="innerwrapper cols sideimage white">
            <div>
                <h2 class="bravo grad">Money</h2>
                <p>There have never been so many ways to manage your money. From digital banks to budgeting apps to next-generation payment options, money management in every form is being reimagined.</p>

<p>It sets new customer expectations. The benchmark for any interaction our customers have with us isn’t set by other price comparison websites. It’s set by what customers have come to expect from the most pioneering brands on the market.</p>

<p>To thrive, we need to meet – or exceed – those expectations. This playbook sets out how we do that.</p>

            </div>
            <div><img alt="Illustration Placeholder" src="//ds.moneysupermarketgroup.test/gallery/0/content/illustration-placeholder-0x0-5f7f1f2c15623_illustration-placeholder.svg">
</div>
        </div>