Content Management Manual

Transcription

1 Content Management Manual Holcim Ltd Holcim CMS Handbook November 2010

2 Managing the Holcim corporate website 5 1. General Target group What is TYPO3? Access Frontend Backend Backend Interface Modules Page tree Working area Toolbar Frontend interface 9 2. Pages Create new page Edit a page General Metadata Options Access Extended Delete a page Move or copy a page 3. Content Basic content types Regular text element Text with image Images only Plain HTML Media Flexible content types Related Category Content Link Faq javascript Event javascript Holcim Group Support Ltd 2

3 3.2.5 Publication details Publication list Event FAQ Related link box Home banner Picture link box Foundation block Index banner Channel page 2 teasers Home page 2 teasers Home page - 3 teasers Create new content on an existing page Edit existing content Delete content Move or copy content Rich Text Editor Setting links Images and files Uploading files in the Backend Uploading files in the Frontend Creating new folders 4. Workflow Introduction Editor Preview Review Publishing Translation Translate a page Translate the content of a page Plugins Store Locator Content Element (for displaying data in the Frontend) Records (the data that should be displayed in the Frontend) Locations Holcim Group Support Ltd 3

4 Functions Products Region Subregion City JobControl Content Element Records Function Seniority Discipline City Education Level Job Contact Person 7. Tips and Tricks Reusing content elements Searching Creating accessible and search engine optimized content Accessibility Search engine optimization Holcim Group Support Ltd 4

5 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 ( This manual is only about the technical use of TYPO3, not of the design and CI/CD of the Holcim websites 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. Requirements: all you need is an internet connection and a web-browser. 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 Holcim Group Support Ltd 5

6 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: 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. Image 1:TYPO3 login interface Use Frontend- Editing for your daily work. Switch to Backend-Editing when you need to do more advanced tasks 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 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: 2010 Holcim Group Support Ltd 6

7 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. Image 2: TYPO3 Backend Interface: Modules column 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 3: TYPO3 Backend Interface: Page tree column 2010 Holcim Group Support Ltd 7

8 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. Image 4: TYPO3 Backend Interface: Detail column Toolbar To logout, just click on the Logout-Button at the top of the interface: Image 5: Logout button 2010 Holcim Group Support Ltd 8

9 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: Image 6: TYPO3 Frontend Interface: activate editing After activating the edit mode, you will see a new toolbar at the top left corner of your browser: Image 7: TYPO3 Frontend Interface: edit toolbar Now you can start editing content. Please have a look at the next chapter Holcim Group Support Ltd 9

10 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. Image 8: navigate to the future location of the new page 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 9: select precise position 2010 Holcim Group Support Ltd 10

11 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. Image 10: select page template 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 11: enter page title 2010 Holcim Group Support Ltd 11

12 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: Image 12: newly created page 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 13: Tabs while editing a page 2010 Holcim Group Support Ltd 12

13 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. Image 14: page Type 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: Image 15: Hide page Image 16: Hide in menu Image 17: Pagetitle Image 18: Navigation title Image 19: Speaking URL path segment If the checkbox below is marked, the speaking path segment field must contain the whole path to the page (excluding pre- and 2010 Holcim Group Support Ltd 13

14 postvars). Example: my/new/path/to/mynewurl Result: 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 Image 20: Exclude from speaking URL 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 Image 21: Abstract 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. Image 22: Keywords 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) Holcim Group Support Ltd 14

15 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. Image 23: Auto eywords 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. Image 24: Description 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 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. Image 25: Show content from this page instead 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. Image 26: Start/Stopp 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 27: Access 2010 Holcim Group Support Ltd 15

16 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. Image 28: Include subpages Extended Use Template Design: Select the template design of the chosen "Page Template Structure" for this page. Image 29: Use Template Design Subpages Use Template Design: Select a different template design of the chosen "Page Template Structure" above for all subpages. Image 30: Subpages: Use Template Design 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. Image 31: Content 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 32: delete a page 2010 Holcim Group Support Ltd 16

17 The browser will ask you if you are sure. Just select ok to continue: Image 33: confirm message 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: Image 34: Move page 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 35: Move or copy page 2010 Holcim Group Support Ltd 17

18 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: Image 36: create new content The button opens a new browser-window where you can see all the columns where you can add content: Image 38: editing content view 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 37: choose a content element 2010 Holcim Group Support Ltd 18

19 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. Image 39: Hide 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. Image 40: Header 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. Start/Stop: Enter the date from which the content element will be visible/disappear from the website. Access Image 41: Start/Stop Regular text element Image 42: 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 Holcim Group Support Ltd 19

20 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). Image 43:Text (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 44: Disable Rich Text Editor 2010 Holcim Group Support Ltd 20

21 3.1.2 Text with image Image 45: 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. The Text tab is exactly the same as in the content element Regular text element shown in chapter Text 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. Image 46: Images 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. Image 47: Position 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 48: Columns 2010 Holcim Group Support Ltd 21

22 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). Image 49: Image Dimensions 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 Linkicon 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. Image 50: Image Links 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 popupversion. 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. Image 51: Caption 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. Image 52: Alternative Text If you have more than one image, each line in this field will be the alternative text of the corresponding image in the list Holcim Group Support Ltd 22

23 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. Image 53: Title 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 Images only Image 54: 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) Plain HTML Image 55: 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. Image 56: HTML Media Image 57: Media Use the Media content element for inserting any kind of multimedia files (movies, audio, flash, etc) Holcim Group Support Ltd 23

24 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. Image 58: relative Path of Media File or URL Image 59: Use Player Image 60: Media Type Media Width / Media Height: Enter the width and the height of the media file. Values are in pixels. Image 61: Media With/Media Height 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. Image 62: Render Type Additional Parameters: If your media file needs some more specific parameters, you can define them here. Image 63: Additional Parameters 2010 Holcim Group Support Ltd 24

25 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. Image 64: Alternative Content 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. Image 65: Flexible content selection 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 Holcim Group Support Ltd 25

26 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. In the following chapters you will get a detailed overview of all flexible content elements that are available Related Category Image 66: Related Category Category Point: Point to a page where categories are saved Content Link Image 68: Content Link Flexible Content Image 67: Category Point 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 address or an external link. Flexible Content Image 69: Related link Related Link Title: This is the link text, which is shown in the frontend. Image 70: Related Link Title Link Type: The link type defines the look of the link. Especially the icon at the left side of the link. Image 71: Link Type 2010 Holcim Group Support Ltd 26

27 3.2.3 Faq javascript Image 72: 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 Event javascript Image 73: 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 Publication details Image 74: Publication details Publication Title: Add the title for the publication. Flexible Content Image 75: Publication Title Publication Image: Select an image using the file-browser icon or browse your local computer. Image 76: Publication Image 2010 Holcim Group Support Ltd 27

28 Image Orientation: Rotate the picture to horizontal (Landscape) or vertical (Portrait) position. Image 77: Image Orientation Description: Use this field to add a description. Image 78: Description Publication File: Choose a PDF or DOC file using the file-browser icon or browse your local computer. Image 79: Publication File Publication Link Text: Link text for the publication file. Image 80: Publication Link Text External Link: Set an additional link to any location using the page-browser icon Image 81: External Link External Link Text: Link text for the external link. Image 82: External Link Text 2010 Holcim Group Support Ltd 28

29 3.2.6 Publication list Image 83: Publication list Publication Image: Select an image using the file-browser icon or browse your local computer. Flexible Content Image 84: Publication Image Publication Image Orientation: Rotate the picture to horizontal (Landscape) or vertical (Portrait) position. Image 85: Image Orientation 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. Image 86: Publication Link OR: Choose a PDF or DOC file using the filebrowser icon or browse your local computer. Image 87: OR Link Name: This is the link text of the publication, which is shown in the frontend. Image 88: Link Name 2010 Holcim Group Support Ltd 29

30 3.2.7 Event Image 89: Event Flexible Content Event Title: Add the title for the event. Image 90: Event Title Event Date: Fill in a date string which is shown after the title. Image 91: Event Date Event Location: Add a location string which is shown after the event date in the event title. Image 92: Event Location Event Detail: Enter a detailed description for the event. Image 93: Event Detail Event Image: Select an image using the filebrowser icon or browse your local computer. Image 94: Event Image 2010 Holcim Group Support Ltd 30

31 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. Image 95: Event Link Event Link Name: This is the link text of the event, which is shown in the frontend. Image 96: Event Link Name 2010 Holcim Group Support Ltd 31

32 3.2.8 FAQ Image 97: Faq FAQ Question: Add the question for the FAQ. Flexible Content Image 98: FAQ Question FAQ Answer: Fill in the answer text. Image 99: FAQ Answer FAQ Image: Select an image using the filebrowser icon or browse your local computer. Image 100: FAQ Image 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. Image 101: FAQ Link FAQ Link Name: This is the link text of the FAQ-link, which is shown in the frontend. Image 102: FAQ Link Name 2010 Holcim Group Support Ltd 32

33 3.2.9 Related link box Image 103: Related link box 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. Flexible Content Image 104: Related Link Related Link Title: This is the link text of the related link, which is shown in the frontend. Image 105: Related Link Title Link Type: The link type defines the look of the link. Especially the icon at the left side of the link. Image 106: Link Type 2010 Holcim Group Support Ltd 33

34 Home banner Image 107: Home banner Please be aware that this content element should only be used for the homepage. Banner Title: Add the title for the banner. Flexible Content Image 108: Banner Title Banner SubTitle: Add the subtitle for the banner. Image 109: Banner Subtitle 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. Image 110: Banner Link Banner Image: Select an image using the filebrowser icon or browse your local computer. Image 111: Banner Image Banner Link Name: This is the link name of the banner link.. Image 112: Banner Link Name Banner Title Position: Select the position of the banner title. Image 113: Banner Title Position Banner Texts Color: Choose a color for the banner text. Image 114: Banner Texts Colour 2010 Holcim Group Support Ltd 34

35 Picture link box Image 115: Picture link box Image: Select an image using the file-browser icon or browse your local computer. Flexible Content Image 116: Image Picture Link Description: Use this field to add a description to the image Image 117: Picture Link Description 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 118: Link Link Title: This is the link text, which is shown in the frontend. Image 119: Link Title Link Type: The link type defines the look of the link. Especially the icon at the left side of the link. Image 120: Link Type 2010 Holcim Group Support Ltd 35

36 Foundation block Image 121: Foundation block Please be aware that this content element can only be used for Foundation-Users. Group Companies Content Managers cannot use it. Foundation Block Image: Select an image using the file-browser icon or browse your local computer. Flexible Content Image 122: Foundation Block Image Header: Add the header for the foundation block. Image 123: Header 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. Image 124: Foundation Link Foundation Block Text: Add the block text for the foundation block. Image 125: Foundation Block Text 2010 Holcim Group Support Ltd 36

37 Index banner Banner Title: Add the title for the banner. Flexible Content Image 126: Banner Title Banner SubTitle: Add the subtitle for the banner. Image 127: Banner SubTitle 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. Image 128: Banner Link Banner Image: Select an image using the filebrowser icon or browse your local computer. Image 129: Banner Image Banner Link Name: This is the link name of the banner. Image 130: Banner Link Name Banner Title Position: Select the position of the banner title. Image 131: Banner Title Position 2010 Holcim Group Support Ltd 37

38 Banner Link Color: Choose a color for the banner link. Image 132: Banner Link Color Channel page 2 teasers Image 133: Channel page - 2 teasers Channel Title: Add the title for the channel. Flexible Content Image 134: Channel Title Channel Image: Select an image using the file-browser icon or browse your local computer. Image 135: Channel Image Teaser Description: Use this field to add a description. Image 136: Teaser 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 137: Teaser Link Teaser Link Text: This is the link text of the teaser, which is shown in the frontend. Image 138: Teaser Link Text 2010 Holcim Group Support Ltd 38

39 Link Type: The link type defines the look of the link. Especially the icon at the left side of the link. Image 139: Link Type Home page 2 teasers Image 140: Home page - 2 teasers Teaser Title: Add the title for the teaser. Flexible Content Image 141: Teaser Title Teaser Image: Select an image using the filebrowser icon or browse your local computer. Image 142: Teaser Image Teaser Description: Use this field to add a description. Image 143: Teaser 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 144: Teaser Link 2010 Holcim Group Support Ltd 39

40 Home page - 3 teasers Image 145: Home page - 3 teasers Teaser Title: Add the title for the teaser. Flexible Content Image 146: Teaser Title Teaser Image: Select an image using the filebrowser icon or browse your local computer. Image 147: Teaser Image Teaser Description: Use this field to add a description. Image 148: Teaser 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 149: Teaser Link 2010 Holcim Group Support Ltd 40

41 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: Image 150: adding new content 2010 Holcim Group Support Ltd 41

42 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: Image 151: Create new content element alternative 2010 Holcim Group Support Ltd 42

43 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: Image 152: Edit existing content element Click on the Edit-button to edit the element. A popup window will occur where you can edit the content element Holcim Group Support Ltd 43

44 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: Image 153: Editing existing content element alternative 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 Image 154: Delete a content element of the editing window and confirm the following message to finally delete the content Holcim Group Support Ltd 44

45 The other way can be used only in the Frontend. Just click the Delete button in the toolbar below the content element: Image 155: Delete content element in the Frontend 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 Image 156: Copy element Image 157: 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. Image 158: Paste element 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 Holcim Group Support Ltd 45

46 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: Image 159: Move content element up or down 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 2010 Holcim Group Support Ltd 46

47 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]: Image 161: Insert link A new window appears where you can select different kind of link types: Image 162: Insert link window 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 address. 3.8 Images and files To use files like PDF documents or images on the website, you need to upload them first into TYPO Holcim Group Support Ltd 47

48 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. Image 163: Upload files The file uploader is in Flash format, so be sure you have installed the Adobe Flash Player. Image 164: File up loader 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: Image 165: Uploading files You can now start using the files (e.g. include them in a content object as image or as file download Holcim Group Support Ltd 48

49 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. Image 166: Upload files directly in the Frontend 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 Holcim Group Support Ltd 49

50 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: Image 167: Creating new folders 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. Image 168: Name the folder(s) Click the Create folders button to create them Holcim Group Support Ltd 50

51 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: Image 169: Preview of workspace alert box 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! 2010 Holcim Group Support Ltd 51

52 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. Image 170: Module Workspace 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 171: Send single item to preview A browser box opens where you can enter a comment for the Reviewer: 2010 Holcim Group Support Ltd 52

53 Image 172: Comment for Reviewer 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. 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. Image 173: Stage overview 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 Holcim Group Support Ltd 53

54 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]: Image 174: Translate a page A dropdown appears where you have to choose which language you want to create: Image 175: Choose translation language 2010 Holcim Group Support Ltd 54

55 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: Image 176: Translate 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 177: Localization tools 2010 Holcim Group Support Ltd 55

56 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: Image 178: Create a copy for translation 2010 Holcim Group Support Ltd 56

57 TYPO3 creates a copy of the text. Now you can just click directly onto the text to edit it: Image 179: Translating content 2010 Holcim Group Support Ltd 57

58 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. Image 180: Plugins The basic data (records) are located in a specific Folder (Sysfolder). Image 181: Records 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 Content Element (for displaying data in the Frontend) Startingpoint: Choose a page (Sysfolder) where the records are stored. Plugin Options Image 182: Starting point 2010 Holcim Group Support Ltd 58

59 Recursive: Defines how many levels it should searched through the page tree. Starts at Startingpoint (see above). Image 183: Recursive Result Limit: Limit the number of results. General Options Image 184: Result Limit Latitude: Add your desired latitude. Image 185: Latitude Longitude: Add your desired longitude. Image 186: Longitude Zoom: Add a zoom factor between 0 to 20. Image 187: Zoom Show Region: Should region been showed? Image 188: Show Region Show Subregion: Should subregion been showed? Image 189: Show Sub region Show Function: Should the function been showed? Image 190: Show Function 2010 Holcim Group Support Ltd 59

60 Display Mode: Choose between two modes. Display just the search form or add the map with all locations. Display Options Image 191: Display Mode Template File: Add the path to the used template. Template Options Image 192: Template File CSS File: Add the path to the used stylesheet file. Image 193: Css File Records (the data that should be displayed in the Frontend) Language: Locate the record to your desired language. General Image 194: Language Hide: Check this box if you wish to hide the content element from being displayed Image 195: Hide Stop: Enter the date from which the content element will be disappear from the website. Image 196: Stop 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 197: Access 2010 Holcim Group Support Ltd 60

61 Locations Locations Location Name: Add the location name. Image 198: Location Name Location Id: Add the location Id Image 199: Location Id Latitude: Add your desired latitude. Image 200: Latitude Longitude: Add your desired longitude. Image 201: Longitude Address: Add the location address. Image 202: Address Additional Address: Add some additional address data. Image 203: Additional Address Region: Select a region (The values in this selection are separate records). Image 204: Region Subregion: Select a subregion (The values in this selection are separate records). Image 205: Sub region City: Select a City (The values in this selection are separate records). Image 206: City 2010 Holcim Group Support Ltd 61