Big Numbers template in the WMS


announcement

This article refers to a legacy WMS process

This article refers to a process used on sites that have not been migrated to the New WMS yet.

If your site is already migrated, consult the Index of documentation for the McGill Web Management System.

OVERVIEW

Target audience: Site Administrators, Site Managers, Site Editors

The Big Numbers template is used to display visually appealing statistical or infographic information on a Web Management System (WMS) site.

In this article:

Create Big Numbers

illustration of Big Numbers in an infographic

The Big Numbers template consists of a value (large red text) with a caption beneath (grey, italic text). It can be created and configured entirely in the WYSIWYG editor interface.

  1. Place your cursor in the editor window where Big Numbers is to be added.

  2. Click the Templates icon.

  3. The Content Templates pop-up window will open.
    1. Select Big Numbers; a Big Number layout will automatically be inserted on the page.

    2. (Optional) Select the checkbox Replace actual contents ONLY if you want all the pre-existing content on the page to be removed. This option is useful if you accidentally selected the wrong template and need to replace it.
  4. Replace the default text:
    • Replace 13 is a default value with the number that should display.
    • Replace This is a default caption with the caption that should display.
  5. Click the Save button once you have finished editing.

Big Numbers Source view

The source code of the Big Numbers layout looks like this:

<div>
  <bignumber>
    <bnvalue>13 is a default value</bnvalue>

    <bncaption>This is a default caption</bncaption>
  </bignumber>
</div>

The various tags are defined as follows:

The instructions below explain how to modify the code to display Big Number variations.

Big Numbers with the caption above the digits

Example with caption about the digits

To display the caption above the digits, simply cut the <bncaption> tag set and paste it above the <bnvalue> tag set:

Default code

Modified code

<div class="bn">
  <bignumber>
    <bnvalue>13 is a default value</bnvalue>

    <bncaption>This is a default caption</bncaption>
  </bignumber>
</div>

<div class="bn">
  <bignumber>
    <bncaption>This is a caption above the number</bncaption>

<bnvalue>123</bnvalue>

  </bignumber>
</div>

Big Numbers with captions above and below the digits

Big Numbers with caption above and below digits

To display captions both above and below the digits, simply copy the <bncaption> tag set and paste it above the <bnvalue> tag set:

Default code

Modified code

<div class="bn">
  <bignumber>
    <bnvalue>13 is a default value</bnvalue>

    <bncaption>This is a default caption</bncaption>
  </bignumber>
</div>

<div class="bn">
  <bignumber>
    <bncaption>This is a caption above the number</bncaption>

<bnvalue>123</bnvalue>

<bncaption>This is a default caption</bncaption>

  </bignumber>
</div>

Big Numbers with an image

Big Numbers with an image above

To add an image to Big Numbers, do the following:

  1. Follow steps 1 through 5 in the section Create Big Numbers, above.
  2. In the WYSIWYG editor, click on the Big Numbers template at the position where the image is to be inserted (i.e. before the digits).
  3. Click the Add Media button to insert an image (for detailed instructions on inserting images, see Add an image to a page in the WMS).

Delete Big Numbers

The recommended method for deleting Big Numbers is to do so via the HTML source.

To remove Big Numbers:

  1. Go to the Source view in the WYSIWYG editor.
  2. Locate the opening <div> tag of the tag set that contains the Big Numbers to be deleted.
  3. Select the whole tag set, from the opening <div> tag to the closing </div> tag.
  4. Delete the selected content.
references

ADDITIONAL REFERENCES: