1. Introduction to the WCMS Contribution mode (Front end)

Contribution mode is used to update contents using website’s frontend. The contribution mode

works best with Firefox browser. You can add text, images, embed videos, add links, create

boxes and design your page when you are in contribution mode.

1.1. Difference between a Primary and Secondary page:

There are 2 types of pages in WCMS, Primary page and Secondary page. A primary page is the

main webpage which is used to design the page. You can assign templates to different

placeholders on the page. The primary page has 3 column layout and, in each column, there are

placeholders used to assign templates. In left column there are 4 empty placeholders, in right

column there are 7-8 and in central column you can have up to 10 placeholders. The

placeholders in central column can be arranged in different ways. I will explain this later in the

document. Example of Primary page: https://www.ilo.org/budapest/what-we-

do/projects/declared-work-ukraine/lang--en/index.htm

Secondary page is normally a page for a publication, event, news, article, video, generic

document or other content type. The easiest way to identify a secondary page is in the URL you

can see the WCMS ID.

Example of Secondary page: https://www.ilo.org/budapest/what-we-do/projects/declared-

work-ukraine/WCMS_744288/lang--en/index.htm

1.2. Enable Contribution mode:

To go into contribution mode first

1. Open the page where you want to make changes. https://www.ilo.org/budapest/what-

we-do/projects/declared-work-ukraine/lang--en/index.htm and replace www with

staging so the URL will become https://staging.ilo.org/budapest/what-we-

do/projects/declared-work-ukraine/lang--en/index.htm.

2. Please make sure that you are already logged in on https://staging.ilo.org/wcmsp1 if not

then the system will prompt you for username and password.

3. Once the staging URL is open in browser please press the keys CTRL+SHIFT and then hit

F5 key. This will enable the contribution mode of the webpage

4. To exit the contribution mode please repeat the step 3.

5. The contribution mode can only be used for a primary page. Never use the contribution

mode for secondary page.

Once you are in contribution mode you will see placeholders all over the page and they look

like this

1.3. Placeholder

What is a placeholder? Placeholder is the dedicated space available on the page to add your

contents (must be checked-in already in case of image, event, publication). If the placeholder is

empty you will see it like this

If a template is already assigned to a placeholder then it will look like this and you can edit the

contents of that placeholder

1.4 Templates

Here is the list of most common templates used on different websites

• Contact

• Freeform

• Image

• Feature rich

• Links

• Quote

• Slider

Before I explain how the templates can be used below is some important information related to

edit mode.

Contributor’s Row Controls

1. Add New Row

2. Remove Row

3. Edit Row (This can also be done by quickly double clicking on the row you wish to edit)

4. Move Row Up

5. Move Row Down

Item Edit Controls

1. View Source

2. Paste

3. Spell Check

4. Find

5. Replace

6. Select All

7. Erase

8. Create Hyperlink

9. Remove Hyperlink

10. Select target

Assign template to an empty placeholder

Click on an empty placeholder to assign content

Then select any template which you want to assign to this placeholder

Then select new contributor data file and click next

Then fill in the necessary information, please make sure to select the correct account and click

finish

Now the page will refresh and you can add contents to this template.

Hyperlink Wizard

Link to section: If you want to add a link to an ILO website or to an ILO primary page then use

this option. You can select any website which is in WCMS and then you can navigate to the

section/page to which you want to add the link.

Link to a file: If you want to add a link to a file which has WCMS ID then use this option.

Link to following URL: If you want to add a link to an external website or add a mailto link then

please use this option. You can paste the URL in the textbox field.

Creating links:

Select the text to which you want to add a link and then click on the add link button

When you click on create Hyperlink button it will open the linking Wizard, in Linking wizard you

can create the link in three ways

1. Link to a website section

2. Link to a file

3. Link to the Following URL

If you select the first option and click next it will take you to a new window where you will be

able to see all the website sections of all the websites to create the link. See below for details

If you select the second option and click next it will take you to a new window where you will

search the file in content server (if the file already exists) to create the link. If you want to link it

to a new file (means the file does not exist in the content server) then you have to select the

first option which is ‘New Contributor’s Data file’ and click next. See the Figure below for

details.

If you select the First option in the above figure then a new window open which will be same as

when you do a new Check in and if you select the second option then you have to search the

file with the content Id in the content server (Standard search).

If you select the 3rd option the textbox next to it will be enabled and you have to copy the URL

in that text box. See the below for more details.

You have to use the same procedure whenever you want to add a link.

1.4.1 Contact

A contact box is used to give the contact details: Here is an example from www.ilo.org/actemp

website

This is how the edit mode of this template looks like

Clicking on the green plus and red cross sign will add or remove a row

Double click on a row will take you to the edit mode of the row where you can add the text in

different fields available.

Note: Do not copy the text a word document. You can type the text directly or if you want to

add text from word document first copy the text in notepad and from notepad copy the text in

the fields. In this way the inline word styles will be removed.

1.4.2 Freeform

Freeform is an element in which you can use to design your own layout. This is mainly used for

adding text on the primary pages as well as for secondary pages if you check-in a document and

select freeform in primary field. Here are some examples

Secondary page with freeform

Freeform edit

Standard Toolbar

Formatting Toolbar

Embed video using Freeform

1. Go to the YouTube page of the video

2. Click on 'Share' and then 'Embed'

3. Grab the code shown, that starts with <iframe width="560" height="315"

src="https://www.youtube.com/embed/...

4. Paste the iframe code into your freeform (IN SOURCE VIEW)

5. Preview and then click on "Save and close"

Videos - Codes for language versions

Please use the codes below and simply replace the video id from YouTube with yours. This code

helps prevent non-ILO videos being suggested at the end of the video.

Full width

English

<iframe width="767" height="431" frameborder="0" allowfullscreen=""

src="https://www.youtube.com/embed/9yyCDU9fhG4?hl=EN&rel=0&autohide=1&fs=0&showi

nfo=0&fs=0&theme=light&color=white&cc_load_policy=1&iv_load_policy=3&cc_lang_pref=en"

></iframe>

French

<iframe width="767" height="431" frameborder="0" allowfullscreen=""

src="https://www.youtube.com/embed/UGAvIXcI84Q?hl=FR&rel=0&autohide=1&fs=0&showin

fo=0&fs=0&theme=light&color=white&cc_load_policy=1&iv_load_policy=3&cc_lang_pref=fr">

</iframe>

Spanish

<iframe width="767" height="431" frameborder="0" allowfullscreen=""

src="https://www.youtube.com/embed/UGAvIXcI84Q?hl=ES&rel=0&autohide=1&fs=0&showin

fo=0&fs=0&theme=light&color=white&cc_load_policy=1&iv_load_policy=3&cc_lang_pref=es">

</iframe>

Half width embedded videos with CC

Please use the codes below and simply replace the video id from YouTube with yours. This code

helps prevent non-ILO videos being suggested at the end of the video.

Left aligned

<figure class="caption-half-left"> <iframe height="431" frameborder="0" width="767"

allowfullscreen=""

src="https://www.youtube.com/embed/UGAvIXcI84Q?hl=EN&rel=0&autohide=1&fs=0&showin

fo=0&fs=0&theme=light&color=white&cc_load_policy=1&iv_load_policy=3&cc_lang_pref=en">

</iframe> <figcaption>Caption goes here</figcaption> </figure>

Right aligned

<figure class="caption-half-right"> <iframe height="431" frameborder="0" width="767"

allowfullscreen=""

src="https://www.youtube.com/embed/UGAvIXcI84Q?hl=EN&rel=0&autohide=1&fs=0&showin

fo=0&fs=0&theme=light&color=white&cc_load_policy=1&iv_load_policy=3&cc_lang_pref=en">

</iframe> <figcaption>Caption goes here</figcaption> </figure>

Add Photo in Freeform

1. Before checking-in the image make sure you crop the image to good size.

a. 767X431 Normal image

b. 364X204 thumbnail landscape

c. 364X515 thumbnail portrait 2. First add/check-in the image using WCMS backend 3. Take the WCMS ID of the image 4. Edit Freeform template 5. Click on insert image icon

6. Search for the image in WCMS backend using the WCMS ID from step 2 7. Select the image from search result and the image will be added 8. Click on Source to view the source of the freeform template and you will see the image

code like this

<img

src="/wcmsp1/groups/public/@ed_dialogue/@lab_admin/documents/image/wcms_73

9360.png" alt="" class="img-responsive" />

You can use the following codes to display the image in a way you want

Left aligned half (image needs to be 767px wide)

<figure class="caption-half-left">

<img src="/wcmsp1/groups/public/---dgreports/---

dcomm/documents/image/wcms_344816.jpg" alt="" class="img-responsive">

<figcaption>Caption goes here</figcaption>

</figure>

Right aligned half (image needs to be 767px wide)

<figure class="caption-half-right">

<img src="/wcmsp1/groups/public/---dgreports/---

dcomm/documents/image/wcms_344816.jpg" alt="" class="img-responsive">

<figcaption>Caption goes here</figcaption>

</figure>

Full width (image needs to be 767px wide)

<figure class="caption-full-width">

<img src="/wcmsp1/groups/public/---dgreports/---

dcomm/documents/image/wcms_344816.jpg" alt="" class="img-responsive">

<figcaption>Caption goes here</figcaption>

</figure>

Adding Quote box using Freeform

Here is an example

Switch to Source view mode and paste the following code according to your requirement.

Left aligned Quote

<div class="furniture quote half-left">

<blockquote>

<p>Urgent measures to support people and firms are needed.&quot;</p>

<cite>Guy Ryder, ILO Director-General</cite>

</blockquote></div>

Right aligned Quote

<div class="furniture quote half-right">

<blockquote>

<p>Urgent measures to support people and firms are needed.&quot;</p>

<cite>Guy Ryder, ILO Director-General</cite>

</blockquote></div>

Quote full width

<div class="furniture quote full-width"><blockquote>

<p>Urgent measures to support people and firms are needed.&quot;</p>

<cite>Guy Ryder, ILO Director-General</cite> </blockquote></div>

Quotes slider

<div class=”furniture quote slider-quote”>

<ul class=”slides”>

<li>

<blockquote>

<p>&ldquo;The ILO has a mandate, recognized in the 2008 Declaration, to promote sustainable

enterprises as an integral part of the Decent Work Agenda.”&rdquo;</p>

<cite>Guy Ryder, Director-General, International Labour Organization</cite>

</blockquote>

</li>

<li>

<blockquote>

<p>&ldquo;The ILO has a mandate, recognized in the 2008 Declaration, to promote sustainable

enterprises as an integral part of the Decent Work Agenda.”&rdquo;</p>

<cite>Guy Ryder, Director-General, International Labour Organization</cite>

</blockquote>

</li>

</ul>

</div>

Footnoting

To place an footnote - replace the word "text" with the text or number you wish the person to

click on

<a href="#1">^{Footnote reference inside the text}</a>

<a name="1">&nbsp;</a>^{Footnote number} - Footnote text

Anchoring

To place an anchor - replace the word "text" with the text or number you wish the person to

click on

<a href="#1">Title of the anchor link</a>

<a name="1">&nbsp;</a> To be placed where you want the anchor destination

1.4.3 Image

The image template is used to add images to the page. The image template has 5 sub templates

which can be used according to needs. Here are few example

Step 1: Assign an image template to an empty placeholder. See screenshot below

Step 2: Once the image template is assigned you can select the sub template for images. See

the screenshot below

Here is the list of all sub templates available under Images template

The most common sub templates are rotating images (example) and lightbox gallery (example).

Once you select the sub templates now click on edit placeholder and you will get a window like

this

Heading: Add the main title of the images box, you can leave this empty as well.

Text: If you want to add some text use the txt field

Links: If there any links to go along with the images use this field

Images: Add images one by one, use the + and x buttons to add remove rows. How to add

image? See the section on freeform add image.

1.4.4 Feature rich

The template is the most common template used in the website. This template is used to create

boxes in left, right or central column. Here are few examples

Highlighted box in left or right column

2 side by side boxes in central column

List of links with images in left or right column

List of news, press release, publications etc. in central column

A box containing image, subheading, title, content info, item text, item links

Step1: Assign Feature Rich template to an empty placeholder

Step 2: Once the Feature rich template is assigned you can use either the default template or

any of the available sub templates. The default sub template is Single item per row

Step 3: Once you have selected the sub template then it’s time to edit the placeholder and start

adding your contents. This is how the edit template for Feature rich looks like

Heading: Give the title of the box here

Intro: If you want to add some text after the main title use this field

Items: You can add as many items as you want click on the + icon to add row

Text wrap: Yes/No means if you want the text to be wrapped around the images or not

Scale: If you are using images in the content please make this field checked. This will scale the

image automatically based on the column size

Header style: There are 3 header styles available Standard, Strong and Slim

Number of items per row: Only applicable if you have selected the sub template multiple items

per row

Aspect ratio: Only applicable if you have selected Youtube furniture as sub template

Subtitle language: Only applicable if you have selected Youtube furniture as sub template

Add Feature rich Items:

Highlight: If you want to add a background color to the item please check this box

Item heading: The heading appears above the main title

Item Title: The main title of the item

Item Text: If you want to add some text

Item Info: The text that appears under the main title

Image: Add image here

Credit: If you want to add the credit for an image use this field

Caption: If you want to add the caption for an image use this field

Links: If you want to add some additional links

Youtube ID: Only use this if you have selected the YOUTUBE Furniture as sub template. You

only need to add the youtube video ID

You can use these icons to move a row up and down.

1.4.5 LINKS

The template is used if you only want to add a list of links in left, right or central column. Here

are few examples

Step1: Assign Links template to an empty placeholder

Step 2: Once the Links template is assigned you can use either the default template or any of

the available sub templates. The default sub template is LINKS list, standard display

Step 3: Once you have selected the sub template then it’s time to edit the placeholder and start

adding your contents. This is how the edit template for LINKS looks like

Heading: The main title of the box

Quick links: You can add rows containing links

Header Style: You can select any of the 3 header styles available.

Quick links:

Category: If you want to group the links under a sub heading or category please use this field to

add the category name.

Text: If you want to add some text before the links

Links: Here you can add as many links as you want

Copy the link text and use the button add hyperlink to add link to the text. You can make the

links as ordered or unordered list as per your need.

1.4.6 Quote box

The template is used if you want to Quote box in left, right or central column. Here are few

examples

Quote slider example

Simple quote box

Step1: Assign Links template to an empty placeholder

Step 2: Once the Quote template is assigned you can use either the default template or the sub

template. The quote template only has one sub template.

Step 3: Once you have selected the sub template then it’s time to edit the placeholder and start

adding your contents. This is how the edit template for Quote looks like

Heading: The main title of the box if you want to add it

Quote: You can add as many rows as you want if you have selected the sub template. If it’s the

default template then only one row should be added

Hide quote symbol: If you want to hide the quotation marks in beginning of the quote

Quote:

Quote: Add the text for the quote

Cite: Add the text for the cite

Image: If you want to include an image

Credit: Credit for the image