Content Management Manual
Holcim Ltd
Managing the Holcim corporate website 5 1. General 5 1.1 Target group 5 1.1.1 What is TYPO3? 5 1.2 Access 6 1.2.1 Frontend 6 1.2.2 Backend 6 1.3 Backend Interface 6 1.3.1 Modules 7 1.3.2 Page tree 7 1.3.3 Working area 8 1.3.4 Toolbar 8 1.4 Frontend interface 9 2. Pages 10
2.1 Create new page 10
2.2 Edit a page 12 2.2.1 General 13 2.2.2 Metadata 14 2.2.3 Options 15 2.2.4 Access 15 2.2.5 Extended 16 2.2.6 Delete a page 16
2.2.7 Move or copy a page 17
3. Content 18
3.1 Basic content types 19
3.1.1 Regular text element 19
3.1.2 Text with image 21
3.1.3 Images only 23
3.1.4 Plain HTML 23
3.1.5 Media 23
3.2 Flexible content types 25
3.2.1 Related Category 26
3.2.2 Content Link 26
3.2.5 Publication details 27
3.2.6 Publication list 29
3.2.7 Event 30
3.2.8 FAQ 32
3.2.9 Related link box 33
3.2.10Home banner 34
3.2.11Picture link box 35
3.2.12Foundation block 36
3.2.13Index banner 37
3.2.14Channel page – 2 teasers 38
3.2.15Home page – 2 teasers 39
3.2.16Home page - 3 teasers 40
3.3 Create new content on an existing page 41
3.4 Edit existing content 43
3.5 Delete content 44
3.6 Move or copy content 45
3.7 Rich Text Editor 46
3.7.1 Setting links 47
3.8 Images and files 47
3.8.1 Uploading files in the Backend 48
3.8.2 Uploading files in the Frontend 49
3.8.3 Creating new folders 50
4. Workflow 51 4.1 Introduction 51 4.2 Editor 51 4.3 Preview 51 4.4 Review 52 4.5 Publishing 53 5. Translation 54 5.1 Translate a page 54
5.2 Translate the content of a page 56
6. Plugins 58
6.1 Store Locator 58
6.1.1 Content Element (for displaying data in the Frontend) 58
6.1.2 Records (the data that should be displayed in the Frontend) 60
6.1.2.2 Functions 65 6.1.2.3 Products 65 6.1.2.4 Region 65 6.1.2.5 Subregion 65 6.1.2.6 City 67 6.2 JobControl 67 6.2.1 Content Element 67 6.2.2 Records 68 6.2.2.1 Function 68 6.2.2.2 Seniority 68 6.2.2.3 Discipline 68 6.2.2.4 City 69 6.2.2.5 Education Level 69 6.2.2.6 Job 69 6.2.2.7 Contact Person 72
7. Tips and Tricks 73
7.1 Reusing content elements 73
7.2 Searching 73
7.3 Creating accessible and search engine optimized content 74
7.3.1 Accessibility 74
Managing the Holcim corporate website
This manual is about the usage of TYPO3 for managing the corporate website of Holcim.
1. General
1.1 Target group
This document describes how the content management system TYPO3 is used by the content managers for maintaining the Holcim corporate website.
Readers should be familiar with the use of web based applications and know the guidelines of the Holcim local sites (www.holcim.xx). This manual is only about the technical use of TYPO3, not of the design and CI/CD of the Holcim websites.
1.1.1 What is TYPO3?
TYPO3 is an Open-Source Content Management System (CMS). TYPO3 is basically a piece of software that runs on a server. It makes it easy to publish and administrate content on your website.
Easy content production, no programming skills required
If you can use a computer, you can manage the content for your website. You can simply create text, insert images and multimedia files, schedule content (and much more) to build and maintain a dynamic website. All you need is an Internet connection and a web browser.
Each time you add or change a page, the menu will automatically update to reflect the change. Requirements: all
you need is an internet connection and a web-browser.
1.2 Access
To work with TYPO3 you need to log in to the administration interface. To get to the login interface, just call following URL with your browser:
https://qa-cms.holcim.com/holcimcms/cms/index.php
During login, you can choose which interface of TYPO3 you want to use. Usually you will work with the Frontend interface. More advanced tasks have to be done in the Backend interface. Login with your personal Username and Password.
1.2.1 Frontend
In the Frontend Editing mode you will see the website as it appears for everyone in the browser. You can navigate directly on the site and edit content directly where it appears.
1.2.2 Backend
The Backend Editing mode instead is used for more advanced tasks.
1.3 Backend Interface
If you logged in to the Backend Editing mode, you will see 3 main columns: Use
Frontend-Editing for your daily work. Switch to Backend-Editing when you need to do more advanced tasks.
1.3.1 Modules
On the left side you see all modules (tools) you can use for maintaining the website. Always start your work here by selecting a specific module.
1.3.2 Page tree
Depending on the module you've chosen you will see a page tree of the website in the middle column. All pages of the website are listed here. The position in the tree defines the position in the navigation. By clicking the little arrows you can expand or contract a sub tree.
Image 2: TYPO3 Backend Interface: Modules column
1.3.3 Working area
Depending on the module and page you've chosen, a specific detail view will show up in the big middle column. That's the place where you usually work.
1.3.4 Toolbar
To logout, just click on the Logout-Button at the top of the interface: Image 4: TYPO3 Backend Interface: Detail column
1.4 Frontend interface
To edit the website directly in the Frontend, you have to activate the edit-mode. You will find the button to activate this mode at the very right bottom corner of any website as soon as you are logged in to TYPO3:
After activating the edit mode, you will see a new toolbar at the top left corner of your browser:
Now you can start editing content. Please have a look at the next chapter. Image 6: TYPO3 Frontend Interface: activate editing
2. Pages
The first things we want to look at are pages. Pages are like containers where you can put in content. Before you can create new content, you need a page.
2.1 Create new page
If you want to create a new page, you have to navigate to the future position of the new page first. Use the normal navigations on the website to locate the right position.
In the example above we want to create a new page after the page “History”. Now, on the editing toolbar, click on the button Create new page.
In the following screen you can choose the location of your new page more precisely. Just click on the arrow where you want to insert the new page:
Image 8: navigate to the future location of the new page
After clicking the arrow you will see a list of several page templates you have to choose from. Those are predefined page layouts. Every template has e specific design and defines what content elements you can add later. Except for the homepage you may choose all templates in all positions. Just keep in mind that the channel pages are meant as kind of overview pages. The home page can be used exclusively only once per Group Company Website as the starting and page.
Just click on the icon of the template you want to use. In our example we want to create a page with the template Content page – 1 column (l) no banner. You can find it at the very left bottom corner of the selection.
After clicking on the icon you will see a form where you can enter the title of the new page: Image 10: select page template
The field Pagetitle has to be filled in [1]. It will be used as HTML-title as well as the navigation entry for the new page.
Enter a page title and save the page with a click on the Save and close document-button at the top of the window [2].
After saving the page you will be led to a page where you can enter content to the newly created page. We well close this window now because we want to have a look at the page we just created. So close the currend browser-window/-tab to get back to the Frontend-view of the page we were before creating the new page. Reload the page to see the new page in the navigation:
2.2 Edit a page
Editing a page in this terms means only editing the page properties, but not the content itself. Click on the button Edit page properties to open the form for editing the page. You will get a form with 6 tabs to choose from:
Image 12: newly created page
2.2.1 General
Here you can set the most important information of a page like its name, visibility or URL.
Field Type: You can choose what type a page should be. Usually you use the type Standard. That's the case when you want to create a normal page with content.
Standard Normal page with content.
Shortcut Creates a page that links to another internal page. Has no content.
Link to external URL Creates a page that links to an external URL.
SysFolder Used for storing data records like addresses or news records.
Hide page: If this is checked, the page will be hidden on the website. You can only view the page when logged in. Use this if you need some time to create the full page with all its content. Later on unhide it.
Hide in menu: With this option the page will be hidden in navigation menus in the
Frontend. The page can still be viewed if linked directly.
Pagetitle: The page title is used to represent the page visually in the system. Usually in the page tree and for navigation links on the website.
You can always change a page title without affecting links to a page.
You can use any characters in the page title.
Navigation title: Alternative title for menu items in the frontend. This value takes precedence over the page title if this value is filled in.
Speaking URL path segment: Set the URL path segment for this page manually. Only valid URL characters are allowed, namely: latin letters, numbers, underscore and/or minus character.
Example:
mynewurl
Result:
www.holcim.ch/about/holcim/mynewurl
If the checkbox below is marked, the speaking path segment field must contain the whole
Image 15: Hide page
Image 16: Hide in menu
Image 17: Pagetitle
Image 18: Navigation title
Image 19: Speaking URL path segment
postVars). Example:
my/new/path/to/mynewurl
Result:
www.holcim.ch/my/new/path/to/mynewurl
This gives an option to override the path completely. Without this option the field defines only a single URL segment for the current page. When overriding the whole path, the path MUST NOT start or end with a slash!
Exclude from speaking URL: Excludes this page from the speaking URL. Will result in links like
www.holcim.ch/index.php?pid=xyz
2.2.2 Metadata
Abstract: An abstract is a short description of the page content, that might be a little longer than the one in the Description field.
Other than the description, the abstract is not
meant for display in search engine result lists By default, TYPO3 lets you create a content element of type Sitemap and then choose
Menu of subpages to these pages (with abstract) to create an overview of articles. If an abstract is available it will be used instead of the description.
Note: You do not have to enter the text of the description into the Abstract field again.
Keywords: TYPO3 puts these keywords in a meta-tag on the page
To optimize your page for search engines you should not use more than 3 to 6 keywords. You should make sure that the keywords can be found in the content of the page. (be aware that search engines tend to ignore these keywords. Google ignores them completely. In TYPO3, the keywords can also be used to create a menu of related pages. Create a content element of type Sitemap and then choose the menu type Related pages (based on keywords).
Image 20: Exclude from speaking URL
Image 22: Keywords Image 21: Abstract
Autokeywords: TYPO3 creates automatically keywords according to the content it finds on the page. You can see what keywords it generates. If you're not happy with it, just disable the checkbox. Use the field Keywords
above to create your own keywords instead.
Description: TYPO3 insert this description in a meta-tag on the page.
Search engines will display the description in their result list. Thus, the text should be short (about 160 characters maximum), and it's wording should make sense when it shows up in the result list.
Also, the description will be displayed if you create a content element of type Sitemap and then choose the menu type Menu of subpages to these pages (with abstract).
Note: Some search engines only use the description if the text is not found elsewhere in the content. So do not just repeat yourself.
2.2.3 Options
Show content from this page instead: You can choose a page from which all content elements will be displayed instead of the content elements from the current page.
2.2.4 Access
Start/Stop: The Start and/or Stop time determines the date from/until the page will be visible online. Use this to publish the page or hide it on a certain date.
Access: If Access is set to a user group, only website users which are members of the selected user group will be able to view the page when they are logged in. The special option ‘Hide at login’ means the page will not
be visible for website users that are logged in. Likewise “Show at login” will make the page visible for any logged in frontend user.
Image 23: Auto eywords
Image 24: Description
Image 26: Start/Stopp
Image 27: Access
Include subpages: By default the Start, Stop,
Access and Hidden options are effective only
for the page on which they are set. If the option Include subpages is checked, their effect is inherited by all subpages to that page.
2.2.5 Extended
Use Template Design: Select the template design of the chosen "Page Template Structure" for this page.
Subpages – Use Template Design: Select a different template design of the chosen "Page Template Structure" above for all subpages.
Content: Usually, these fields show you the content types that you defined in the selected data structure above. If you use simple content elements, this fields gets automatically altered through the page module once you add content there. So you don't need to change anything here.
2.2.6 Delete a page
To delete a page you need to go to the page properties of the page you want to delete. Then click on the waste bin icon in the top toolbar:
Image 29: Use Template Design
Image 30: Subpages: Use Template Design
Image 31: Content Image 28: Include subpages
The browser will ask you if you are sure. Just select ok to continue:
2.2.7 Move or copy a page
To move or copy a page you have to click on the Create New Content button in the toolbar on the top of the page which you want to move or copy. This opens a new browser window. In the toolbar at the top click on the Move page icon:
You get a new screen where you first have to choose if you want to make a copy of the page or if you want to move the page [1]. Then select the new position in the displayed page tree where the page should be moved or copied to [2]:
Image 33: confirm message
Image 34: Move page
3. Content
Content can be filled up in several places of a page. It always depends on the page template you've chosen what type of content and where you can create that content.
To create content you have to click on the Create New Content button at the top toolbar:
The button opens a new browser-window where you can see all the columns where you can add content:
In the image above, you can see that we only have one single content area to use. Click on the
Create new element icon to continue.
You will then see a selection of several content elements that could be used in this area: Image 36: create new content
Image 38: editing content view
By clicking on a page content element you create a new element of that type. In the following chapters you will find detailed information about all the content elements that are available for you.
3.1 Basic content types
The basic content types are delivered by TYPO3 per default. They are small elements with specific properties, depending on what you want to create. Those elements share some common properties:
General Hide: Check this box if you wish to hide the
content element from being displayed.
Header: Enter a headline for the content element.
Almost all content elements (except the HTML type for instance) will display this header above the content. If you don't want a header displayed, select the header Layout to "Hidden". Alternatively you can choose not to enter any content in this field.
Some content element types do not display the header by default. In those cases the Header field is typically labelled "Name" instead. One of these is the HTML type content element.
Access Start/Stop: Enter the date from which the
content element will be visible/disappear from the website.
3.1.1 Regular text element
The Regular text element is one of the most used content elements at all. You can use it for creating simple text elements.
Image 42: Regular text element
Image 39: Hide
Image 40: Header
Text Text: Here you enter the text of the content element. It’s basically like a small “Word”. The field is reused in most other content element types.
Each line break normally signifies a new paragraph,
Have a look at chapter 3.7 on page 46 for more details about the RTE (Rich Text Editor).
Disable Rich Text Editor: If checked, the Rich Text Editor will be disabled. This way you can see the HTML-Tags behind the formatted text. So in case you have problems with the generated code in RTE, you can still switch back to the HTML-Mode and check the code by hand if you want.
Image 43:Text (Rich Text Editor)
3.1.2 Text with image
Use this element if you want to display text with an image (or multiple images). It basically is an advanced version of the regular text element.
Text
The Text tab is exactly the same as in the content element Regular text element shownin chapter 3.1.1.
Media Images: You can attach images to the content element and almost as many as you like. You can attach them in any web-format you like (gif/png/jpg). You do not need to worry about size and compression because these factors are handled by TYPO3 automatically. When you use the Text with image type, it's important to select a proper position of the imageblock. For this purpose, use the
Position selector which is displayed below the image list.
Position: Select the position of the imageblock relative to the text.
If you choose positions where the imageblock is beside the text, TYPO3 automatically resizes the image(s) to the maximum size that is possible. So you don’t have to worry about the image dimensions.
Columns: Select the number of columns in the imageblock.
For instance, if you have 4 images in the imageblock and you select 1 column, they will appear one under the other in 1 column. If you select 2 columns, it will create a grid-like design with 2x2 images.
Image 46: Images
Image 47: Position
Image 48: Columns Image 45: Text with image
Image Dimensions: TYPO3 is configured to use the correct width and height of an image and usually you don't need to specify the dimensions.
However this does give you an opportunity to set a specific width and/or height if you want to use an other size of the image(s).
You can set only the width or only the height or both values. TYPO3 always resizes the images with the correct aspect ratio.
Image Links: In the Link field you can specify a URL where the image links to. Use the Link-icon on the right to select a link. Be aware that, if you use more than one image, every image will have the same link! So if you want to create different links on every image, you have to create a separate content element for each image.
Alternatively you can activate the checkbox
Click-enlarge. This creates a popup on every single image displaying a big-size version of it. Activating the checkbox Activate
SmoothGallery will generate a smooth designed image gallery instead of the popup-version.
Caption: Enter a caption for the image. The caption will appear at the bottom of the image. With the dropdown-menu Align you can choose the alignment of the caption (left, center, right).
If you have more than one image, each line in this field will be the image caption of the corresponding image in the list.
Alternative Text: Enter the alternative text of an image. This text will be displayed in case of that the image could not be displayed.
This is very important for people with a visual impairment, but is also very useful for search engines. It should describe the image.
If you have more than one image, each line in this field will be the alternative text of the corresponding image in the list.
Image 49: Image Dimensions
Image 50: Image Links
Image 51: Caption
Title Text: Enter the title text of an image. This text will (depending on the browser) appear as a speech bubble when someone moves the mouse over the image.
This is important for search engines. It is usually shorter than the alternative text. If you have more than one image, each line in this field will be the title text of the
corresponding image in the list.
3.1.3 Images only
Use this element if you want to display images only, without any text.
Media
The Media tab is exactly the same as in the content element Text with image. For further details please look at the according chapter (20)
3.1.4 Plain HTML
Here you can enter plain HTML code. Use this if you need to implement code from third-party companies (tracking-code, special content elements) or when you create content elements on your own (for instance image maps created with a special tool like Dreamweaver)
HTML: Enter your HTML code here.
3.1.5 Media
Use the Media content element for inserting any kind of multimedia files (movies, audio, flash, etc).
Image 53: Title Text
Image 54: Images only
Image 55: Plain HTML
Image 57: Media
Relative Path of Media File or URL: Enter the path to the media file if on the server itself or enter the complete URL to an external media file. Use the file-selector-icon on the right of the input field.
Use Player (only for Shockwave Flash): If your media file is a Shockwave Flash file you can enable a nice player for the file.
Use this for movie and audio files. The files must be in Shockwave Flash format (*.swf).
Media Type: Select what type of media you use: Video or Audio.
Media Width / Media Height: Enter the width and the height of the media file. Values are in pixels.
Render Type: Select the browser plugin which should be used for displaying the media. This depends mainly on the type of media file you use.
Additional Parameters: If your media file needs some more specific parameters, you can define them here.
Image 58: relative Path of Media File or URL
Image 59: Use Player
Image 60: Media Type
Image 61: Media With/Media Height
Image 62: Render Type
Alternative Content: This content will be showed if the user cannot see your media file (reasons could be missing browser plugins or surfing with limited mobile devices).
Take your time to create useful alternative content and don’t rely only on the media file if it contains really important information.
3.2 Flexible content types
The Flexible content types are especially made for the Holcim website. They are like presets of often used content. This way it is easy for you to create common looking content elements which match the CI/CD.
All of these elements have the same 3 tabs where you can enter content:
General
Flexible Content
Access
The General and the Access tab are the same tabs as in the basic content elements. Please have a look at chapter 3.1 on page 19 for more information.
Image 64: Alternative Content
In the following chapters you will get a detailed overview of all flexible content elements that are available.
3.2.1 Related Category
Flexible Content Category Point: Point to a page where
categories are saved.
3.2.2 Content Link
Flexible Content Related link: Fill in a page ID or choose a
page using the link-selector icon where the link should point to. It is also possible to add an email address or an external link.
Related Link Title: This is the link text, which is shown in the frontend.
Link Type: The link type defines the look of the link. Especially the icon at the left side of the link.
Important: Please be aware that some flexible content elements have repeated form fields. Usually they are numbered (e.g. title1, title2, title3, etc). Let’s say you have e flexible content element with 3 field repetitions. That means you can add up to 3 entries in to that element (the handling of the repeated fields is always the same). However, to keep this manual free from repetitive
information, only the first entry of every element will be explained.
Image 66: Related Category
Image 68: Content Link
Image 67: Category Point
Image 69: Related link
Image 70: Related Link Title
Image 71: Link Type
3.2.3 Faq javascript
If you plan to add the flexible content FAQ this one has to be placed on top of the current page to get the FAQ working. Do not add that element twice. Be aware to check first if it is already included.
3.2.4 Event javascript
If you plan to add the flexible content Event this one has to be placed on top of the current page to get the Event working. Do not add that element twice. Be aware to check first if it is already included.
3.2.5 Publication details
Flexible Content Publication Title: Add the title for the
publication.
Publication Image: Select an image using the file-browser icon or browse your local
computer.
Image 72: Faq JavaScript
Image 73: Event JavaScript
Image 74: Publication details
Image 75: Publication Title
Image Orientation: Rotate the picture to horizontal (Landscape) or vertical (Portrait) position.
Description: Use this field to add a description.
Publication File: Choose a PDF or DOC file using the file-browser icon or browse your local computer.
Publication Link Text: Link text for the publication file.
External Link: Set an additional link to any location using the page-browser icon
External Link Text: Link text for the external link.
Image 77: Image Orientation
Image 78: Description
Image 79: Publication File
Image 80: Publication Link Text
Image 81: External Link
3.2.6 Publication list
Flexible Content Publication Image: Select an image using the
file-browser icon or browse your local computer.
Publication Image Orientation: Rotate the picture to horizontal (Landscape) or vertical (Portrait) position.
Publication Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
OR: Choose a PDF or DOC file using the file-browser icon or browse your local computer.
Link Name: This is the link text of the publication, which is shown in the frontend. Image 83: Publication list
Image 84: Publication Image
Image 85: Image Orientation
Image 86: Publication Link
Image 87: OR
3.2.7 Event
Flexible Content Event Title: Add the title for the event.
Event Date: Fill in a date string which is shown after the title.
Event Location: Add a location string which is shown after the event date in the event title.
Event Detail: Enter a detailed description for the event.
Event Image: Select an image using the file-browser icon or browse your local computer. Image 89: Event
Image 90: Event Title
Image 91: Event Date
Image 92: Event Location
Image 93: Event Detail
Event Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Event Link Name: This is the link text of the event, which is shown in the frontend.
Image 95: Event Link
3.2.8 FAQ
Flexible Content FAQ Question: Add the question for the FAQ.
FAQ Answer: Fill in the answer text.
FAQ Image: Select an image using the file-browser icon or browse your local computer.
FAQ Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
FAQ Link Name: This is the link text of the FAQ-link, which is shown in the frontend. Image 97: Faq
Image 98: FAQ Question
Image 99: FAQ Answer
Image 100: FAQ Image
Image 101: FAQ Link
3.2.9 Related link box
Flexible Content Related Link: Fill in a page ID or choose a
page using the link-selector icon where the link should point to. It is also possible to add an external link.
Related Link Title: This is the link text of the related link, which is shown in the frontend.
Link Type: The link type defines the look of the link. Especially the icon at the left side of the link.
Image 103: Related link box
Image 104: Related Link
Image 105: Related Link Title
Image 106: Link Type
3.2.10 Home banner
Please be aware that this content element should only be used for the homepage.
Flexible Content Banner Title: Add the title for the banner.
Banner SubTitle: Add the subtitle for the banner.
Banner Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Banner Image: Select an image using the file-browser icon or browse your local computer.
Banner Link Name: This is the link name of the banner link..
Banner Title Position: Select the position of the banner title.
Banner Texts Color: Choose a color for the banner text.
Image 107: Home banner
Image 108: Banner Title
Image 109: Banner Subtitle
Image 110: Banner Link
Image 112: Banner Link Name
Image 113: Banner Title Position
Image 114: Banner Texts Colour
3.2.11 Picture link box
Flexible Content Image: Select an image using the file-browser
icon or browse your local computer.
Picture Link Description: Use this field to add a description to the image
Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Link Title: This is the link text, which is shown in the frontend.
Link Type: The link type defines the look of the link. Especially the icon at the left side of the link.
Image 115: Picture link box
Image 116: Image
Image 117: Picture Link Description
Image 118: Link
Image 120: Link Type
3.2.12 Foundation block
Please be aware that this content element can only be used for Foundation-Users. Group Companies Content Managers cannot use it.
Flexible Content Foundation Block Image: Select an image
using the file-browser icon or browse your local computer.
Header: Add the header for the foundation block.
Foundation Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Foundation Block Text: Add the block text for the foundation block.
Image 121: Foundation block
Image 122: Foundation Block Image
Image 123: Header
Image 124: Foundation Link
3.2.13 Index banner
Flexible Content Banner Title: Add the title for the banner.
Banner SubTitle: Add the subtitle for the banner.
Banner Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Banner Image: Select an image using the file-browser icon or browse your local computer.
Banner Link Name: This is the link name of the banner.
Banner Title Position: Select the position of the banner title.
Image 126: Banner Title
Image 127: Banner SubTitle
Image 128: Banner Link
Image 129: Banner Image
Image 130: Banner Link Name
Image 131: Banner Title Position
Banner Link Color: Choose a color for the banner link.
3.2.14 Channel page – 2 teasers
Flexible Content Channel Title: Add the title for the channel.
Channel Image: Select an image using the file-browser icon or browse your local computer.
Teaser Description: Use this field to add a description.
Teaser Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Teaser Link Text: This is the link text of the teaser, which is shown in the frontend. Image 133: Channel page - 2 teasers
Image 132: Banner Link Color
Image 134: Channel Title
Image 135: Channel Image
Image 136: Teaser Description
Image 137: Teaser Link
Link Type: The link type defines the look of the link. Especially the icon at the left side of the link.
3.2.15 Home page – 2 teasers
Flexible Content Teaser Title: Add the title for the teaser.
Teaser Image: Select an image using the file-browser icon or browse your local computer.
Teaser Description: Use this field to add a description.
Teaser Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Image 140: Home page - 2 teasers
Image 139: Link Type
Image 141: Teaser Title
Image 142: Teaser Image
Image 143: Teaser Description
3.2.16 Home page - 3 teasers
Flexible Content Teaser Title: Add the title for the teaser.
Teaser Image: Select an image using the file-browser icon or browse your local computer.
Teaser Description: Use this field to add a description.
Teaser Link: Fill in a page ID or choose a page using the link-selector icon where the link should point to. It is also possible to add an external link.
Image 145: Home page - 3 teasers
Image 146: Teaser Title
Image 147: Teaser Image
Image 148: Teaser Description
3.3 Create new content on an existing page
If you want to create a new content element on an already existing page, just navigate to the page where you want to create the new element. Every content element you can edit has a toolbar at the bottom where you can choose from:
Click on the New-button to create a new content element below the existing one. A popup window will occur where you can fill up the content of the new element. Choosing this way of creating new elements only allows you to create simple text elements.
Alternatively you can click on the Create New Content button in the toolbar on the top of the page. This opens a new browser window with a more advanced view of the whole page:
3.4 Edit existing content
To edit already existing content, just navigate to the page with the content you want to work on. Every content element you can edit has a toolbar at the bottom where you can choose from:
Click on the Edit-button to edit the element. A popup window will occur where you can edit the content element.
Alternatively you can click on the Create New Content button in the toolbar on the top of the page. This opens a new browser window with a more advanced editing view of the whole page:
Then click on the pencil-icon to edit the content element.
3.5 Delete content
You can delete a content element in several ways. One way is to open the content element for editing. You can use this in the Frontend or in the Backend. Click at the waste bin-icon at the top
of the editing window and confirm the following message to finally delete the content. Image 153: Editing existing content element alternative
The other way can be used only in the Frontend. Just click the Delete button in the toolbar below the content element:
Confirm the following message to finally delete the content.
3.6 Move or copy content
To move or copy a content element you have to click on the Create New Content button in the toolbar on the top of the page where you want to move or copy an element. This opens a new browser window. Look after the content element you want to move or copy. Then either click on the Copy element icon for copying or the Cut element icon for moving the element.
Copy element Cut element
Now every other content element on this page has a new Paste element icon where you can paste your cut or copied element after. If you want to paste the element into another page than the current one, just close the current browser window and use the Frontend to navigate to the page where you want to paste the element. Again, click on Create New Content to open a new editor browser window and you will see the Paste element icons too.
Just paste the element and TYPO3 will either make a 1:1 copy or it moves the element from the page where you’ve cut it to the destination page.
Image 156: Copy element Image 157: Cut element
Image 158: Paste element
Alternatively you can move a content element inside the same page and the same column very easy. Just use the Up or Down buttons to rearrange a content elements position:
3.7 Rich Text Editor
The Rich Text Editor (RTE) in TYPO3 is very powerful. You can format your text as easy as in MS Word. The icons in the editor are all well-described. Just hover over an icon with the cursor to get some information.
Image 160: Rich Text Editor
3.7.1 Setting links
Creating links with the RTE is easy. Just select the text you want to link [1] and click the Insert link icon [2]:
A new window appears where you can select different kind of link types:
You have the choice to create links to another internal page, or to a file (for download), or to an external URL or you even can link to an email address.
3.8 Images and files
To use files like PDF documents or images on the website, you need to upload them first into TYPO3.
Image 161: Insert link
3.8.1 Uploading files in the Backend
The best way to upload files is by using the Filelist module [1] in the TYPO3 Backend. Then select the folder where you want to store your file(s) [2]. By selecting a folder you will get a list of already existing files in that folder. Now click the Upload Files icon [3] to open the file uploader.
The file uploader is in Flash format, so be sure you have installed the Adobe Flash Player.
Just click on the button Select Files. You can now browse your local files for uploading. You can select one file or multiple files by holding Ctrl when selecting the files. Select Open to start the upload. The upload window looks like this:
You can now start using the files (e.g. include them in a content object as image or as file download.
Image 163: Upload files
Image 164: File up loader
3.8.2 Uploading files in the Frontend
If you prefer to work directly in the Frontend, you can also upload files directly from there. Every content element which supports images or files has the possibility to either select already
uploaded files/images or to upload new files/images. In the next image there is a content element which allows images.
Now click on the Browse/Durchsuchen button to select a single local file. Again select Open to start the upload. The image/file is now already included in the content element.
The main difference between uploading files in the Backend and the Frontend is that you cannot choose the file location when using the Frontend. TYPO3 will create a special place for files uploaded directly in the Frontend which is not visible to you or any other user. This means that the file is shown exactly once at the place where you inserted it, but you or any other user cannot reuse the file again. It is a little bit easier to use the Frontend upload, but you’ll cut your possibilities of reusing already uploaded files. Therefor it is suggested using the Backend for uploading files.
3.8.3 Creating new folders
To create new folders inside the Filelist module just click on the parent folder where you want to create a new folder and select New:
In the following screen enter a name for a new folder in the tree here. If you want to create multiple folders, please select the number of new folders before entering folder names.
Click the Create folders button to create them.
Image 167: Creating new folders
4. Workflow
4.1 Introduction
To prevent incorrect / inaccurate content to be published on the website, TYPO3 comes with an advanced workflow-feature. Usually you work directly on the live site and your changes will appear in real-time.
Depending on your user profile you cannot publish content directly into the live environment (called Live-Workspace). Instead you are working at a special Stage-Workspace. Only you can see those changes. Of course you can preview all your changes like it would be on the real website. Another person with the role of the Reviewer can check your changes and finally publish them if everything is ok.
4.2 Editor
As a content manager you are usually in the role of an editor. Everything you do inside of TYPO3 will happen in the Stage-Workspace. You don’t have to worry about previewing your changes. Everything looks the same as it would be live. Only you can see all the changes while you’re logged in.
4.3 Preview
Previewing your changes is very easy. As soon as you logged in and viewing the Frontend, you’re already in the preview-mode of the Workspace. You notice this with the help of the big red
preview-alert box in the upper right corner of the website:
In the example above the user is working in the Workspace “ABACUS workspace”. Usually your user profile is assigned to a specific Workspace, so you don’t have to care about which
Workspace is the correct one for you. Nevertheless, if you belong to the handful users working on multiple Websites, please always make sure you are working in the right space!
4.4 Review
Once you have finished your work and want to get the changes published on the website, you have to send all of your changes to a review. This step can only be done in the Backend of TYPO3. If you’re not already in the Backend, do so now.
Once you’re in the Backend, click on the Workspace module.
You will now see all the changes that were made in the Stage-Workspace (and which are not live yet). Now you can send all or only selected items to review:
Image 170: Module Workspace
Once an item is sent to review, you cannot change it anymore. The page or the content elements are now blocked to assure a smooth review process. However, you can always check what elements are in which stage of the approval. Move your cursor above the item to check the comments you or any other user in the process left.
4.5 Publishing
Publishing is done through supervisors. Just be aware that the publishing of new content will take some time, depending on how long the approving task last. CC recommends to keep the workflow process as lean as possible. And specially if you do not refresh your content to often, rather do not work with the model of the two-step-approval, but as content manager also keep the publisher role.
If the Reviewer rejects your changes, he will write a comment too. So you’ll know what was the reason and you can correct the items. In that case the item will be rejected to stage Editing and is not blocked anymore. You can resend it to review after you’ve done your corrections.
Image 172: Comment for Reviewer
5. Translation
Translating in TYPO3 is done through just creating translated versions of pages and content.
5.1 Translate a page
To start with a translation the first thing you need to do is to create a translated version of a page. To do so you have to work in the Backend. Select the Page module [1], then choose the page you want to translate [2]. In the Detail View click on the Localization View tab [3]:
A dropdown appears where you have to choose which language you want to create: Image 174: Translate a page
As soon as you click on a language, TYPO3 creates a new language version of the page and you can start translating the page properties:
As you can see the original title is visible in a green box just below the field Pagetitle. This way you always can check what text or value is filled up in the original language and you can easy translate all text and settins into the new language.
Now you have some new functions in the Localization view tab. With this tools you can switch between all the languages of a page to manage all the versions. The language dropdown now only shows the remaining languages:
Image 176: Translate page properties
5.2 Translate the content of a page
As soon as a page is translated, you can start translating its content. To do so you have to click the link Create a copy for translation at the bottom of every content element you want to translate:
TYPO3 creates a copy of the text. Now you can just click directly onto the text to edit it:
6. Plugins
Plugins will be added like normal content elements. But added plugins just specify how the data would be displayed. The data itself has to be added in the Backend as so called “records”.
The basic data (records) are located in a specific Folder (Sysfolder).
6.1 Store Locator
The plugin Store Locator provides addresses of Holcim or other offices. They can be entered directly in the Backend. The plugin will show them in the Frontend on a Google Map.
6.1.1 Content Element (for displaying data in the Frontend)
Plugin Options Startingpoint: Choose a page (Sysfolder)
where the records are stored.
Image 182: Starting point Image 180: Plugins
Recursive: Defines how many levels it should searched through the page tree. Starts at
Startingpoint (see above).
General Options Result Limit: Limit the number of results.
Latitude: Add your desired latitude.
Longitude: Add your desired longitude.
Zoom: Add a zoom factor between 0 to 20.
Show Region: Should region been showed?
Show Subregion: Should subregion been showed?
Show Function: Should the function been showed? Image 183: Recursive Image 184: Result Limit Image 185: Latitude Image 186: Longitude Image 187: Zoom Image 188: Show Region Image 189: Show Sub region Image 190: Show Function
Display Options Display Mode: Choose between two modes.
Display just the search form or add the map with all locations.
Template Options Template File: Add the path to the used
template.
CSS File: Add the path to the used stylesheet file.
6.1.2 Records (the data that should be displayed in the Frontend)
General Language: Locate the record to your desired language.
Hide: Check this box if you wish to hide the content element from being displayed
Stop: Enter the date from which the content element will be disappear from the website.
Access: If Access is set to a usergroup, only website users which are members of the selected usergroup will be able to view the record when they are logged in. The special option 'Hide at login' means the record will not
be visible for website users that are logged in. Likewise "Show at login" will make the record visible for any logged in frontend user.
Image 191: Display Mode
Image 192: Template File
Image 193: Css File Image 194: Language Image 195: Hide Image 196: Stop Image 197: Access
6.1.2.1 Locations
Locations Location Name: Add the location name.
Location Id: Add the location Id
Latitude: Add your desired latitude.
Longitude: Add your desired longitude.
Address: Add the location address.
Additional Address: Add some additional address data.
Region: Select a region (The values in this selection are separate records).
Subregion: Select a subregion (The values in this selection are separate records).
City: Select a City (The values in this selection are separate records).
Image 198: Location Name
Image 199: Location Id
Image 200: Latitude
Image 201: Longitude
Image 202: Address
Image 203: Additional Address
Image 204: Region
Image 205: Sub region
ZIP / Postal Code: Add the ZIP code of the location.
Country: Add the country of the location.
Contact Person: Add a contact person.
Phone1: Add the phone number.
Phone2: Add an additional phone number.
Cellular: Add the mobile number.
Fax1: Add a fax number.
Fax2: Add an additional fax number.
Email1: Add an email address.
Email2: Add an additional email address.
Image 207: ZIP / Postal Code
Image 208: Country
Image 209: Contact Person
Image 210: Phone1 Image 211: Phone2 Image 212: Cellular Image 213: Fax1 Image 214: Fax2 Image 215: Email1 Image 216: Email2
Hours: Add the desired hours.
Notes: Add some notes.
Image: You can attach an image to the location.
You can attach them in any web-format you like (gif/png/jpg). You do not need to worry about size and compression because these factors are handled by TYPO3 automatically.
Geocode: Should the geocode be displayed?
Contact: Select as many contacts from the right side as you like. Contacts will be added as separate records.
Function Group 1: Select a function group (The values in this selection are separate records).
Product Group 1: Select a product group (The values in this selection are separate records).
Function Group 2: Select an additional function group (The values in this selection are separate records). Image 217: Hours Image 218: Notes Image 219: Image Image 220: Geocode Image 221: Contact Image 222: Function Group 1 Image 223: Product Group 1 Image 224: Function Group 2
Product Group 2: Select an additional product group (The values in this selection are separate records).
Function Group 3: Select an additional function group (The values in this selection are separate records).
Product Group 3: Select an additional product group (The values in this selection are separate records). Image 225: Product Group 2 Image 226: Function Group 3 Image 227: Product Group 3
6.1.2.2 Functions
Functions Function Name: Add the function name.
6.1.2.3 Products
Products Locator Main Category: Select as many
categories from the right side as you like. Categories will be added as separate records.
Icon: Select an icon from the given list
Product Name: Add the product name.
6.1.2.4 Region
Region Region: Add a region name.
6.1.2.5 Subregion
Subregion Subregion: Add a subregion name.
Image 228: Function Name
Image 229: Locator Main Category
Image 230: Icon
Image 231: Product Name
Image 232: Region
6.1.2.6 City
City Region: Select a region (The values in this selection are separate records).
Subregion: Select a subregion (The values in this selection are separate records).
City: Add a city name.
6.2 JobControl
The plugin JobControl provides Holcim job offers on the website. They can be entered directly in the Backend. The plugin will show them in the Frontend as a list.
6.2.1 Content Element
Plugin Options Startingpoint: Choose a page (Sysfolder)
where the records are located.
Recursive: Defines how many levels it should searched through the page tree. Starts at
Startingpoint (see above).
Image 234: Region Image 235: Subregion Image 236: City Image 237: Startingpoint Image 238: Recursive
General Settings What to display: This option defines which
plugin view should be displayed. Select the desired value to control the output in the
Frontend.
6.2.2 Records
General Language: Locate the record to your desired language.
6.2.2.1 Function
Function Function: Add a function name.
6.2.2.2 Seniority
Seniority Seniority: Add a seniority name.
6.2.2.3 Discipline
Discipline Discipline: Add a discipline name.
Image 239: What to display
Image 241: Function
Image 242: Seniority
Image 243: Discipline Image 240:
6.2.2.4 City
City City: Add a city name.
6.2.2.5 Education Level
Education Level Level: Add an education level.
6.2.2.6 Job
Job Reference: Add a reference name.
Job Title: Add a job title.
Employer: Add an employer name.
Employer Description: Add some employer description.
Image 244: City
Image 245: Level
Image 246: Reference
Image 247: Job Title
Image 248: Employer
City: Select a city from the right side. Cities will be added as separate records.
Short Job Description: Add a short job description.
Job Description: Add the whole job description.
Experience: Add an experience
Job Requirements: Add the job requirements.
Job Benefits: Add the job benefits.
Image 250: City
Image 251: Short Job Description
Image 252: Job Description
Image 253: Experience
Image 254: Job Requirements
Apply Information: Add some apply information.
Salary: Add the job salary.
Job Type: Select a job type.
Contract Type: Select a contract type.
Sector: Select a sector from the right side. Sectors will be added as separate records.
Job Category: Select a job category from the right side. Job Categories will be added as separate records.
Discipline: Select a discipline from the right side. Disciplines will be added as separate records.
Image 256: Apply Information
Image 257: Salary Image 258: Job Type Image 259: Contract Type Image 260: Sector
Image 261: Job Category
Level Of Education: Select a level of education from the right side. Levels of education will be added as separate records.
Contact Person: Choose a contact person from the given list. Use the black cross to add a new contact or add a new contact as a separate record.
6.2.2.7 Contact Person
Contact Person Name: Add a contact name.
Address: Add a contact address.
Telephone: Add a contact phone number.
Email: Add a contact email address.
Image 263: Level Of Education
Image 264: Contact Person Image 265: Name Image 266: Address Image 267: Telephone Image 268: Email
7. Tips and Tricks
7.1 Reusing content elements 7.2 Searching
Inside the TYPO3 Backend you can search for all kind of data records. To open the search, click on the magnifier-icon in the toolbar at the top of the Backend:
A search field appears where you can enter the text you are looking for and press enter: Image 270: Backend search
TYPO3 searches through the whole Backend and gives you a result list with all found records:
In the example above a search was started with the term “investor”. TYPO3 found 1 page and 2 news records with this term.
At the bottom of the search result you see a field called Search String. Here you can refine your search and you can even set how many levels down in the page tree the search should crawl and how many search results that should be found in maximum.
7.3 Creating accessible and search engine optimized content
Accessible websites not only ensure easier access to information, but provide more relevant advantages:
accessible websites are an expression of social responsibility and technical competence; accessibility is a quality feature
accessible websites are easier to maintain due to consistent separation of presentation and content
semantically correct websites build a perfect basis for search engine optimization
websites are displayed cleaner and faster when avoiding out-dated technology
7.3.1 Accessibility
Pay attention to correct semantic structure of the page: Image 271: Search result list
use title-tags for titles, don’t just set text bold for titles
don’t forget setting title tags for links
don’t forget setting title and alt tags for images
Also pay attention to stylistic requirements:
pages and blocks of text should not be too long (if you really need to use a lot of text, use PDF-files instead and link them inside a short text block)
keep the structure of a page simple and clearly arranged
use the same linguistic level as the target group of the website does
using images and colors with a high contrast not only helps the visually impaired, but also helps people using small mobile devices
7.3.2 Search engine optimization
You already do a lot of search engine optimization (SEO) when following the rules described above. However, here are some more tips and things you should know:
the title of a page will be used as URL, this is very important for SEO (choose keywords also used in the text later)
don’t forget to check the description and keywords field of every page
don’t create too much levels of page navigation (visitor should find the information he’s looking for within 4 clicks)
Holcim Group Support Ltd
Website Content Manager Corporate Communications Hagenholzstrasse 82 CH-8050 Zurich [email protected] www.holcim.com Phone +41 58 858 83 06 Fax +41 79 237 37 76
