Cluster CMS - Typo3
1 Introduction ... 3
2 Backend ... 4
2.1 Page Module ... 4
2.1.1 Comparison in Backend (Pageview) and Frontend ... 6
2.2 List View ... 7
3 General Hints ... 8
3.1 Preparing text for copy and paste to the homepage ... 8
3.1.1 Notepad++ ... 8
3.1.2 Dreamweaver ... 10
3.1.3 Ac’tive Aid (PastePlain) ... 11
3.2 Upload media files for use on your project page ... 11
3.3 Add a personal profile ... 12
3.4 Change your personal profile ... 13
3.5 Announce an event on your project page ... 14
4 Project pages ... 17
4.1 Project start pages ... 17
4.2 Changing Project Members and Project Coordinators... 18
4.3 Add or change an image on the project start page ... 18
5 Pages ... 19
5.1 Create a new page / menu item in navigation ... 19
5.2 Change existing Pagetitle / menu item in navigation ... 21
6 Page content... 23
6.1 Create page content ... 23
6.1.1 Entering a heading for a content element ... 24
6.1.2 Enter and edit text in a page content element ... 24
6.2 Setting links ... 26
6.2.1 Link to Page ... 29
6.2.2 Link to File... 29
6.2.3 Link to External URL ... 29
6.2.4 Email Link ... 29
6.2.5 Link styles ... 29
6.2.6 Link behavior ... 29
6.3 Adding images to a content element ... 30
1 Introduction
The purpose of this tutorial is to enable Cluster member to maintain their own project site. Typo3 is an Open Source Content Management System1. The Cluster Homepage is created by
Netz982
The page is designed as a bilingual homepage with English and German content. .
News can only be posted by the Press Officer (Dr. Alexander Häntzschel
[email protected]). The homepage event management functionality is currently in beta test-ing phase. In the meantime fell free to send event announcements to [email protected].
The Homepage consists of two parts: the frontend and the backend. The cluster homepage that can be accessed at http://www.asia-europe.uni-heidelberg.de by everybody is called the frontend. The place where you can manipulate what is show on the frontend is called the backend. It can be ac-cessed at http://www.asia-europe.uni-heidelberg.de/typo3. You must have a login to enter the backend. To get a login please contact [email protected].
This tutorial is constantly growing. Feedback is very much appreciated.
2 Backend
To edit your project homepage logon to http://www.asia-europe.uni-heidelberg.de/typo3/
2.1 Page Module
Choose the Page module to browse through the navigation tree of your project pages. It depends on your user rights which projects you see. To get your user rights changed, please contact [email protected].
2.1.1 Comparison in Backend (Pageview) and Frontend
There are different display modes in the Page module. There is no need to change the view mode for standard page editing. Columns view is a reasonable default. Choose Languages when you need to edit or create the German version of a page or content element.
2.2 List View
In the List module all elements under a selected page element are listed by element type.
Project start pages can only be accessed with the List module.
3 General Hints
3.1 Preparing text for copy and paste to the homepage
Larger texts are often written and formatted in a text processing program like MS Word. When copy-ing and pastcopy-ing from a text file two problems can occur:
• Unwanted formatting information is copied and ruins your layout
• Some characters are replaced by weird symbols, due to wrong character encoding There are several ways to prevent this.
3.1.1 Notepad++
The easiest and probably most reliable way is to copy the designated text to a plain text editor like Notepad++3
Notepad++ is Open Source Software that is preinstalled on Windows Computers at the KJC. If Note-pad++ is not installed on your Computer please do not hesitate to contact the IT-Support.
. All the formatting will be deleted and you can reformat the text within Typo3.
3.1.1.1 Change default character encoding in Notepad++
To make sure that the text you copy from Notepad++ to Typo3 is encoded in UTF-8 you can change the default character encoding within Notepad++ to UTF-8.
If you do not want to change the default character encoding in Notepad ++ you can also change the character encoding or convert to another encoding for each document handled with Notepad++. Format -> Convert to UTF-8 (when there is already text in another format in the document you have opened)
Format – > Encode in UTF-8 (When you have created an empty document with another character encoding than UTF-8)
3.1.2 Dreamweaver
When you have some basic html knowledge Dreamweaver is an interesting option to clean up large Word files and preserve the basic formatting. Dreamweaver is part of Adobe CS4 which is installed on most Computers at the KJC.
Start Dreamweaver -> Open new html document -> select Split view -> drag and drop the word doc-ument to the lower half of the window. Choose the preferred settings. The settings shown below seem to be a reasonable default to start with.
3.1.3 Ac’tive Aid (PastePlain) Ac’tive Aid4
With this module it is possible to paste text without any formatting from the clipboard by pressing Windows-Key + V. Unfortunately it cannot handle UTF-8 but for texts with western character encod-ing it is the fastest way to copy and paste text to Typo3.
is a set of tools and scripts that are supposed to make your work with Windows easier. It is Open Source Software developed by members of the computer magazine c’t. It consists of a large variety of very helpful modules. The one I’d like to recommend here is called PastePlain.
Ac’tive Aid is not installed on Cluster PCs by default. If you want to use Ac’tive Aid please contact the IT-Support-Team.
3.2 Upload media files for use on your project page
To embed media files in your website you have to upload them to the typo3 backend first. The Filelist module offers the functionality needed for this task.
Click on Filelist to browse through the files already on the server. Click “Upload Files” for single or multiple fileupload.
Click “Durchsuchen…/Browse…” to select a file for uploading. Click “Open” to start the upload. Note: There is 1 TB of disc space reserved for media files. Large files should be uploaded from a com-puter directly connected to the university network to prevent timeout errors. The maximum size of a single file must not exceed 2 GB. If you plan to distribute or share many and/or large multimedia files for your research please contact [email protected] for consultation. There may be interesting alternatives we can offer, especially when it comes to metadata enrichment of your digi-tal material.
The uploaded files can now be included in your page.
Note: Not all file types can be include in every part of the page.
In Typo3 there are many ways to complete a task. In general this tutorial will stick to one way. When working with Typo3 regularly you will soon find other ways of getting things done. As an exception the chapter on “Adding additional page content elements” will show more than one way.
3.3 Add a personal profile
To add a new personal profile, please send a text file containing basic information on the person to
[email protected]. Mandatory information Name: Firstname: E-mail address: Optional Information
Type (None, Academic Staff, Administration, Graduate Students, visiting Fellows, Alumni)
3.4 Change your personal profile
Navigate to the cluster homepage (http://www.asia-europe.uni-heidelberg.de) and login with your AD Account (also used for cluster email and the computers at the KJC).
You will automatically be redirected to a form where you can edit your personal profile. Some fields offer a “Paste default value” – functionality. The default value is written in light grey below the field.
Rich text fields offer some basic formatting. When you copy and paste text from another document, please make sure to paste plain text (e.g. when copying text from a word document the easiest way to get rid of word formatting is pasting the text to a plain text editor like Notepad).
By clicking “<>” you can switch to html-mode in case you would like to paste or enter formatted text in html.
3.5 Announce an event on your project page
Every cluster member with a cluster AD login (for cluster email and computers at the KJC) can add an event on the cluster homepage. Log on to the homepage (NOT to the Typo3 backend!) with your AD account.
Select the designated month and click on the small greenish dot (which supposedly could be identi-fied as a “+” – button) to create a new event.
Note that you can only create or edit future events. In case a past event needs to be changed please contact [email protected].
Short teasers are usually posted on the right side of a project page or the startpage of a research area when the corresponding checkbox is ticked. An event will also be posted on the Cluster Start-page when the category “öffentlich” is ticked. The next five upcoming events are shown there auto-matically. Please mark only events as “öffentlich” that are organized by the Cluster.
When you want to document in which events you are going to take part please mark the event only as “member activity” and your project number. Make sure that the description text of the event can-not be mistaken and that this is an event organized by someone else.
4 Project pages
4.1 Project start pages
4.2 Changing Project Members and Project Coordinators
To be added as project coordinator or member a person must have a personal profile page at the cluster.
There are only these two categories to describe a person’s relation to a project. If you want to display a more hierarchical structure please describe it in the text. Keep in mind that among other things “The concept of the Cluster is based on […] flat hierarchies”5.
Open the project element and click on the folder icon and open the Typo3 element browser to select coordinators or members of a project.
Browse to the Project & Persons folder and select the designated person by clicking on the “+” next to the name. You can also search for a name using the search functionality on the bottom right. Note: The affiliation must be set for the English AND the German version of the project element.
4.3 Add or change an image on the project start page
5 Pages
A Page is a container for Pagecontent elements. A page has a URL and a Pagetitle. A page can be visible, hidden or hidden in menu. Menu items in the navigation on the left are automatically gener-ated from the page titles of visible pages. Pages that are marked as hidden in the backend can only be viewed as preview and are not visible to the public. Pages marked as hidden in menu are publical-ly accessible through direct links but are not listed in the navigation.
5.1 Create a new page / menu item in navigation
Select the Page module -> select a page in the pagetree -> click New page
Enter Pagetitle and save the page by clicking on the disk icon. Mandatory fields are marked with a yellow exclamation mark. Pages can only be saved when all mandatory fields are filled.
5.2 Change existing Pagetitle / menu item in navigation
Set/Change the Pagetitle by navigating to the desired page in the pagetree and click on the pencil icon on top of the right column. This is possible in Page and in List view.
In the Frontend the Pagetitle is show in the menu (if not hidden) and in the title bar of your browser.
6 Page content
In Typo3 Text, images etc. is not directly written into the page element but in so called content ele-ments. A page can contain several page content eleele-ments. Both pages and content elements can be referred to with a hyperlink. The order of content elements on a page can be changed any time. 6.1 Create page content
Select Page view -> browse to desired page -> Click Create Page content
6.1.1 Entering a heading for a content element
There are three predefined values for visible headings (h2-h4). The heading format is defined in the system and cannot be changed. A “hidden” heading will not be shown in the frontend; the heading will only appear as the title of the content element in the backend.
Note: The heading format depends on the place where a content element is inserted. Headings in the “Main Content” column differ slightly from those in the “Border” column.
6.1.2 Enter and edit text in a page content element
Note: Some html tags are filtered to keep the cooperate design.
The Headings and the paragraph formats are probably the most common ways to format a text. Please use the predefined heading styles instead of changing the font size and weight to define something that looks like a heading. By clicking the save and (pre-)view button, a (pre-)view of the page will open in another browser tab/window. Make sure that pop-ups for this site are not blocked by your browser.
6.2 Setting links
Switch to the text tab, select the designated text and click on the “Insert Web Link” Button as shown bellow.
The “Insert/Modify Link”- Window will pop up. Typo3 distinguishes between 4 link destinations. A link to a page or a page content element within the CMS, a File in the Filelist, an external page and a link for emails.
Navigate through the page tree and choose either a “page” or a “page content element” as link des-tination.
6.2.1 Link to Page
Use Page to link to pages visible in the page tree. 6.2.2 Link to File
Choose the File tab in the “Insert/Modify Link”- Window to set a link to a file in the Filelist e.g. to make a PowerPoint Presentation or a pdf-document available for download on your homepage. Be sure that you do not commit any copyright violation by making available copyright protected materi-al on the internet! That materi-also includes pictures used in presentations.
6.2.3 Link to External URL
Use External URL to link to pages that are not visible in the page tree e.g. external websites and pag-es within the cluster homepage that are not visible in the page tree (personal profilpag-es).
6.2.4 Email Link
To set an Email Link -> mark the text that has to be linked -> open the “Insert/Modify Link”- Window -> choose the Email tab -> enter the email address -> click “Set Link”.
6.2.5 Link styles
In the CMS it is possible to choose between different link styles: the arrow link and the standard link. They only differ in their looks.
6.2.6 Link behavior
6.3 Adding images to a content element
You can add an image to a page content element in the media tab
Check “display thumbnails” for an easy identification of the image you would like to add. Browse through the Filelist and click on the “+” next to the filename to add the image.
Note: Images embedded in the frontend will be re-rendered. The image quality for re-rendered jpg-Files is set to 60 for performance reasons. Use the jpg format for photos. For images that include text (e.g. posters) use the png format for better text quality.
If you want to add links to several images use a comma to separate the URLs from each other. You can choose whether the pictures should be arranged in columns or a row.
6.4 Adding additional page content elements
The image below shows that there are at least six ways to create a new content element for this page.
Buttons A and B will open a Menu where you first select the type of the content element and then choose the position on the page.
Buttons C, D and E are buttons that place a new page content element at a certain position. C on top of the main content column
D after this content element E on top of the main border column
By clicking on the icon next to the page name in the page tree a context menu pops up. Chose New (F) to get into a menu where you can select “Click here for wizard!” this will open the menu that can be accessed directly via A or B.
C, D and E are the fastest ways to place a page content element.
6.5 Moving page content
Page content elements can be moved within a page or from one page to another. Click on the up and down arrows to move p content within a page.
Click on the content type icon to enter a context menu where you can choose cut or copy. To paste the content element into another page navigate to the page click on the page icon and select “Paste into”. The element will be inserted on top of all existing content elements.
6.6 Creating a sitemap / page internal navigation
For some pages it might make sense to have lots of content on one page instead of splitting it to sev-eral pages. By providing a page internal navigation the content can still be accessed conveniently by visitors.
To provide users with page internal navigation create a new content element in the border column of the desired page.
Make sure that your page content is split up to different content elements. The items in the naviga-tion are generated from the headings of the content elements.
Enter a Header text for the internal navigation in the General tab and choose “Überschrift H4” as Type.
For further information please contact the Webmaster
+49 (0) 6221 – 54 4355 Karl Jaspers Centre, Room 005b
OR KJC IT Team
