Contribution Help

Things to note when working with most content types.

• Header background graphics and sector icons are added automatically based on the sector selected from the sector/industry drop-down. This is applicable for all content types (except General) that utilize this pick-list.
• The default colour theme for the site is the generic blue header and colour. Use the sector/industry drop-down to assign the appropriate corresponding sector design theme. Note that selecting "other sectors" will also assign the generic blue theme.
• You may override a header background image by browsing and adding an image from the Media Library or by uploading a JPEG, PNG or SVG file format. (Add suggested size and aspect ratio format)
• A colour theme is applied to certain elements such as cards, some glyphs and buttons when the sector/industry drop-down is selected. These are elements on the page that are styled with the ofb- prefixed colour classes. 
• To stop the colour theme from affecting any of the elements listed above that as an ofb- prefixed class, add "no-style" to the class attribute.
• Theme colour styles can be applied to various elements on a page see the list of colour styles below. These styles use a !important flag to override framework styles as well.
• A URL Alias is generated from the title of a page. You can control the URL alias by editing it from the URL Alias option on the sidebar options. 

  

Important: Switching text editor mode between the IDE editor format and Full HTML format will affect your code. CKEditor does not preserve PHP codes and they will be commented out or removed. 

CKEditor will also remove empty and malformed HTML tags.

A standard or Type 1 event page has a URL pattern like this: 

English:

https://stage.sourcefromontario.com/en/page/event/104716/mission-biotech-showcase

French: 

https://stage.sourcefromontario.com/fr/page/event/104717/mission-commerciale-biotech-showcase

The event ID forms part of the url e.g. 104716 or 104717. The ID is important for making the relationship with companies that will be attached and displayed on these pages. In most cases the event ID will be the same as the Node ID for the page. 

Setting up a Redirect for a Vanity URL

If a vanity URL is required for a standard or type 1 event page a Redirect has to be created. This can be done from the URL Redirect options on the side bar. Below is an example of how to set this up using Biotech event as a case study.

Vanity URL English: https://stage.sourcefromontario.com/biotech

Vanity URL French: https://stage.sourcefromontario.com/fr/biotech

Add the vanity name "biotech" in the PATH field.

Note that the Node ID in the TO field will automatically map to the URL alias that is set for the respective languages for the page.

Leave the Redirect status on the default 301 Moved Permanently.

Finally, set the Language option to "All languages", this way the same vanity name will be redirected to the French URL when the language ID is prepended to the vanity name in the PATH field.

<span id="total_count">&nbsp;</span>

Using the Event ID field

The event ID is used to group companies/organizations together for display on a type 1 or type 2 event page. The ID is located in the event page URL after event/ as in the case below it is 104716. Note that type 2 event pages do not have an event ID in their URL pattern, but this is addressed under creating a type 2 event landing page.

https://stage.sourcefromontario.com/en/page/event/104716/mission-biotech-showcase

Using the Event Tag Field

The event tag field is used to identify companies that are presenting or otherwise not part of the Ontario delegation attending a trade show led by a Trade Officer.

Companies/Organizations that have been tagged as "Event Participant" in this field will appear in the Participants carousel on a Type 2 landing page. Companies without the tag will appear in the Companies carousel on a Type 2 landing page. More details about this can be found under the Creating a Type 2 Event Landing Page.

Type 2 Event pages are Landing pages. These are used primarily as promotional URLs and are always created with a vanity URL. 

A type 2 event pages pulls together companies/organizations from two type 1 events, and often consists of the following content/design components:

• an introduction
• description of delegate companies
• carousel of delegate companies
• description of presenter companies/organizations
• carousel of presenter companies/organizations
• related content carousel
• side bar items

Companies associated with the type 1 events are displayed in the respective carousels shown below. Company/Organizations profiles that have the Event Participant tag in the Event Tag field will be placed in the Participants carousel. Companies without this Event Tag will be placed in the Companies carousel. 

Adding the Event Node ID and Event Tag

Event ID

Enter the event ID for a type 1 event is required to enable companies and organizations to display in the respective carousels. You can use a pipe separator for multiple IDs e.g. 33200|33201

Event Tag

Ensure that the Event Tag field has the "Event Participant" tag in it. This is required for the carousels to segment the companies and organizations based on the matching tag that were placed on the companies/organizations in the company profile setup.

Adding the carousels

In order for the carousel to be displayed beneath its describing paragraph a php snippet as shown below will be added to the source code of the body field. The code should be added using the Text Format IDE at the bottom of the content area.

To add the companies carousel insert the following below the closing </p> tag of the describing paragraph:

<?php print view_embed('event_types_view', 'delegation_landing'); ?>

Companies Carousel

To display the participants carousel, insert the following php code snippet below the closing </p> tag of the describing paragraph:

<?php print view_embed('event_types_view', 'presenters_landing'); ?>

Participants Carousel

To display both the Participants and Companies in grid format, insert the following php code snippet below the closing </p> tag of the describing paragraph:

<?php print view_embed('companies', 'all_import_id'); ?>

Participants and Companies grid format

Using a jQuery Drop-in

You can drop in the total number of companies (total_delegates) or participants/presenters (total_presenters) into a sentence in their respective paragraphs by adding the following html tags in the desired place:

For companies (delegates)

<span id="total_delegates">&nbsp;</span>

Example of use:

The display:

For Participants/Presenters

<span id="total_presenters">&nbsp;</span>

Example of use:

The display:

Related contents are items that appear at the bottom of a General, Type 1 or Type 2 page. These are usually cross-links between type 1 pages, blog posts on the Invest site or other supporting pages for an event such an additional media, an agenda page or article on an external site.

Use the Related Content Content Type to add these items which consists of a short blurb description of the content, a hyperlink and optionally a thumbnail header image.

Use the related event field to attach it to multiple pages. Just type the title of the page and the autocomplete feature will show a list to choose from.

Sticky at top of lists

Use the promotion options on the options side bar to make a content appear at the beginning of lists.

Weight

Use the weight field to override the default order of the related content items. The default is 0, negative and positive numbers can be used so that the highest weights show up first in a list. This ordering will not force content that have been marked as "sticky at top of lists" to change their position on a list with non-sticky items. You can however, use it to order multiple "sticky" content items among themselves.

Note: You can add a related content carousel on a General content type page using the view_embed function in PHP mode as shown below.

<?php print view_embed('related_content', 'cards'); ?>

A YouTube or Vimeo video can be added above the body of a Type 1 or Type 2 page. Simply copy and paste the full URL of the video e.g. https://www.youtube.com/embed/1eGWgxcmVUg (Do not use a short URL) in the Video URL field. The video will be responsive, so it will scale to match the width of the body column despite the natural dimensions of the video.

Add the title of the video in the named field, this is not displayed visually, but is required by screen readers for accessibility purposes. 

You may also add a note for the video in the named field, such as a disclaimer or a transcript text. The text in this field can be hyperlinked to copy on another page by using the Video Note URL field.

Videos may be added into the body of a page by using the code snippets provided below.

YouTube example

<div class="row">
    <div class="col-md-12">
        <iframe class="w-100" width="100%" height="420" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/D4HlB6Tb04Q?hl=en" title="Video: Brampton Is Now | Brampton Means Business Now"></iframe>
    </div>
</div>

Vimeo example

<div class="row">
    <div class="col-md-12">
        <iframe class="w-100" width="100%" height="420" allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://player.vimeo.com/video/447504638" title="Video: Life Sciences in Hamilton from Hamilton Economic Development on Vimeo"></iframe>
    </div>
</div>

Video note example

For a transcript link you can replace "note: ..." text with the word transcript (French: transcription) and add a hyperlink to the page with transcript.

<div class="row disclaimer-text">
    <div class="col-md-12">
        <p class="video-note">
            <small class="text-dark">Note: This video is hosted by a third party, and may not be available in French.</small>
        </p>
    </div>
</div>

When adding images using the Media Library options ensure that the alt tag information is added as this will be displayed for the image in the side bar or downloadable asset blocks.

If the image being added does not need another artwork for French, use the Media browser (tab under the Content menu) after the image has been uploaded to add a French translation for the alt tag and to auto generate that version.

Abbreviation tags

It's important for accessibility that abbreviations tags are used to provide context for users with AT (Accessibility Technology) devices.

Use the abbreviation button on the Full HTML text editor menu to wrap text in an abbreviation tag or you can do it directly in the source code. When using the abbreviation button just select the text, click the button and add the title in the explanation field in the window that pops up.

Below are a few best practice examples.

Acronyms that are known and used a proper nouns in writing or conversations do not need to have an abbreviation title which would normally be required to convey additional context e.g. USA, US, U.S., WHO or UK can simply be wrapped in an <abbr> tag e.g.:

<abbr>USA</abbr>

This way a screen reader will read it as letters and not try to pronounce the term.

In other cases such as where context is required, use the title attribute option within the <abbr title=""> tag to ensure that the semantic meaning of an abbreviation, symbol, scientific notation or acronym is conveyed e.g.

etc.

<abbr title="et cetera">etc.</abbr>

25 °C

25 °<abbr title="celcius">C</abbr>

OPS

<abbr title="Ontario Public Service">OPS</abbr>

Adding a button

You can change any hyperlinked text in the copy to a button style using the Full HTML editor. To add a button in the body copy do the following:

1. highlight the word in the copy which will become the button label.
2. Use the hyperlink button on the editor toolbar to add the link the button will point to.
3. Use the Styles drop-down to select the Button style. The button default colour will be dark blue, but this will get changed based on the sector colour theme of the page.

This is an example:

To participate in this event Register Now!

Adding font awesome icons

As part of our framework the Font Awesome (version 4.7.0) icons can be utilized throughout the site. You can add the info icon inline with copy that provide information by creating a single space, highlighting it and applying the style from the styles drop-down on the editor toolbar.

To add additional Font Awesome icons in copy use the following code. The <i> tag that Font awesome uses should be replaced by a <span> tag that wraps a non-breaking space (&nbsp;). Note: CKEditor will remove empty tags as well as <i> tags.

The example below produces a square Linkedin icon 

<span class="fa fa-linkedin-square" aria-hidden="true">&nbsp;</span>

For a full list of available icons visit Font Awesome's website.

Helper Functions

The following functions assist with quick manipulation of content or elements on a page.

Theme Colour Default

This function will reset the sector/industry colour theme for a page to the default OFB dark blue theme colour.

<?php theme_colour_default(); ?>

HTML Element Override

This function will override the contents of any specified HTML element on the page. The function accepts three arguments:

$html_wrapper: The HTML element(s) to target

$new_label_en: The replacement HTML content for the named element on an English page. Using NULL will remove the element from the DOM.

$new_label_fr: The replacement HTML for the named element on a French page. Using NULL will remove the element from the DOM.

<?php html_element_override($html_wrapper, $new_label_en, $new_label_fr); ?>

Enter the above argument values in quotes.

Example 1

<?php html_element_override('#participant', 'Partners', 'Partenaires'); ?>

Example 2

This would remove the HTML element with the attribute id="participant" .

<?php html_element_override('#participant', null, 'Partenaires'); ?>

A full reference to theme colour classes is available on the Design Guide. 

Primary Colours

fuchsia, darkblue, deepgreen, burntorange, teal, purple

Colour parameters

ofb-{colour}-{colour_value}-{element}-{element_property}

Secondary colours (only 100% values):

Refer to the design system for more comprehensive information on using the bootstrap framework, theming elements, components and patterns used on this site.