1. introduction to the wcms contribution mode (front end)dgreports/...1. introduction to the wcms...
Post on 09-Mar-2021
3 Views
Preview:
TRANSCRIPT
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."</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."</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."</p>
<cite>Guy Ryder, ILO Director-General</cite> </blockquote></div>
Quotes slider
<div class=”furniture quote slider-quote”>
<ul class=”slides”>
<li>
<blockquote>
<p>“The ILO has a mandate, recognized in the 2008 Declaration, to promote sustainable
enterprises as an integral part of the Decent Work Agenda.””</p>
<cite>Guy Ryder, Director-General, International Labour Organization</cite>
</blockquote>
</li>
<li>
<blockquote>
<p>“The ILO has a mandate, recognized in the 2008 Declaration, to promote sustainable
enterprises as an integral part of the Decent Work Agenda.””</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"><sup>Footnote reference inside the text</sup></a>
<a name="1"> </a><sup>Footnote number</sup> - 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"> </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
top related