T3Doc/doc tut quickstart/Edit and create pages and content

<< Back to Getting Started Tutorial

Edit and create pages and content

We know now that pages store their content in page content elements. So if you want to edit content on a page you have to edit page content elements!

Edit page & content

It is really easy to edit page content in TYPO3. Just select the Page module (1), click the page title of the page you want to edit (2) and in the "Columns" view (3) you click the edit icon (4) of the page content element you wish to change:

This brings up this edit form:

First of all the field "Type:" (1) tells you the type of page content element! In this case "Text w/image". It could also be "Text" (like you saw earlier) or "Image" or "Table" etc. See for yourself! Each content element type has its own set of fields and by inserting different elements you can achieve great diversity on your website.

The header field (2) contains the headline of the content element. You can insert text by switching to the tab "Text":

Different element types have different options. Play around a bit and see what you can do on the different tabs. Be aware that every change of the element type saves the element.

Note

QuickEdit - save a mouse click... If you want fast access to your page content elements you can change the Page module view to "QuickEdit" instead of "Columns" - then the first content element on a page is shown right away:

File:10000201000004BF0000035C6F8568AB.png

New page

We already saw one way to create a new page when we created the "External URL" page earlier. However, in TYPO3 there are multiple ways to get things done. Here are some more ways to create a page:

If you click on either of the two buttons in the docheader you will get the position selector for your new page in the next step:

Now create a new page "My Content Test" after (NOT inside) the "Text And images" page and have a look at your website afterwards. You will find the page in the menu next to the "Text and images" page.

The page is still blank - we need to create some page content elements on the page!

Creating page content elements

In the Page module, click the page title of "My Content Test" in the page tree and then the icon with the content element and the little green plus in the docheader "Create new content element":

Immediately you will see a nice form like this (below). This allows you to select a page content element type (1) - as said earlier, different content element types create different kinds of content on the web page - and the position (2) of the element. Let’s create "Text with image":

Right away we get the form. Now enter some dummy content and select an image from your hard drive (1). Select a position relative to the text for your image (2). If you chose a big image you can change it's size with (3) [If this does not work for you, have a look at the "troubleshooting" chapter]. Additionally you can enter a link for your image (4)

Press the "Save document" button. Now the image is uploaded to the web server and attached to the new page content element.

This should look like this if everything went fine:

On the web page it now looks like this:

Inserting another content element

Back in the Page module the new content element is clearly shown. Let's create another content element. The little content element icons with the plus in the header bar of the content columns let you create content in that column. Use the icon at (3) the right column to add content there.

This time we choose to create a special element called "Sitemap".

The site map element allows you to insert all sorts of page link lists (like a real site map, a menu of sub-pages...). We want to insert a link list to some pages we select manually, so we chose "Menu of these pages":

Select the pages you want to link to. There a two possible ways to do this. Either press the little folder icon and choose the pages from the pop-up that appears then or use the auto-suggest search.

Here we added some sub-pages of "About TYPO3":

Now the page has two content elements, a "Text w/Image" type in the normal column and a "Sitemap" type in the right column:

In the Page module this looks like this:

Move / Copy page

Moving pages is really easy. Just drag the page in the page tree to its new position and choose "Move". Depending on what you want you can move the page into or after the page you dragged it to.

As you can see you can copy pages in the same way.

Cut'n'Paste & Copy'n'Paste

You can also use Cut'n'Paste or Copy'n'Paste for moving or copying. Select "copy" from the context menu of the page you want to copy:

And choose "paste after" (or "paste into" depending on what you want) from the context menu of the destination page:

Watch out - consistent concepts on board! Notice that the same principles of copy/cut/paste can be used with not only pages but page content elements as well - well, in fact any database element or file that TYPO3 manages is subject to this functionality! This is a great example of how TYPO3 uses the same concepts consistently and throughout the system - so once you have learned a feature, a lot of other features make sense to you as well! If you open your eyes to it you will have many of those "Aha!" experiences when you see how things are designed to fit together.

Visibility settings - hiding pages, timing appearance etc.

A feature you will find for many elements - in particular pages and page content elements - is the publishing control fields or visibility settings. They look like this for pages:

The access settings are the same for content elements.

Hiding a page

Check the "Hide page" flag:

Save the page and have a look at the page tree (if the page tree didn't reload press the green arrows on top of it to refresh):

The hidden page has an icon indicating its state. A page that is hidden can not be viewed from the frontend. If you are logged in the backend however you are still able to see a preview of that page. Choose "Show" from the context menu of the hidden page:

In the frontend you will see your hidden page with a "preview" note that tells you that a normal visitor won't see it:

Hiding pages and content element is probably the most typical kind of visibility setting. It is so common that it actually has its own item in the context menus:

Timing pages and content elements

While hiding is the most common thing you can also determine when a page should go online - on which date! For instance try to enter the code "d+10" in the "Start time" field:

Automatically the date is set to the current date plus 10 days! If you save the page and hold the mouse over the page tree icon you can also see this setting reflected:

You can of course just enter a date directly or use the date picker to select one. And guess what - this page is currently not visible and will automatically be visible the 20th of July year 2010, 10 days later! That is how easy it is to control publishing of information based on Start times. The same principles work for the "Stop" field of course. And for page content elements, news elements, guest book elements - you name it. Same principle - many places - easy to understand.

Rich Text Editing: Bold, Italics, Bullet lists, Insert images

When you are working with the text on your pages you can use the same kind of formatting options as you are used to from your word processor. You have access to a Rich Text Editor (RTE) for the body text field. "Rich Text" means that you can apply formatting to the text in addition to just writing it.

As you can see you can create lists, apply formatting like bold or italic and even insert tables. This editor can be fully configured to match all your needs. The configuration is not part of this tutorial. You can find a description in the rtehtmlarea manual.

Make links

Hyperlinks are what glues the internet together some say. In TYPO3 you already have links automatically made for you since the sheer creation of pages in the hierarchical structure of the page tree has generated the menu automatically. But you still might want to link from a piece of text to another page, a file, another website or an email address, right? This is very easy if you use the Rich Text Editor. Simply mark the text and press the "Insert Link" icon:

A popup opens in which you can choose which type of link you want to create. In this case choose the tab "Page" and click on "About TYPO3" in the page tree to create a link to the "About TYPO3" page.

The popup should close itself and you can now see that the text you marked is linked:

To edit the link just right-click on it and choose the link option from the context menu (or position your cursor somewhere in the link text and click on the link icon again). In the frontend this will produce a link as you would expect. Click it and you are taken to the "About TYPO3" page:

If you have problems with the editor you can switch to the source code view and have a look at what it generated:

It is just simple HTML. But remember: The RTE parses the code in there and removes everything it doesn't know or isn't configured to allow. So you can't just write your own HTML in here.

Other kinds of links?

You can create links to local files and external webpages - even links directly to a specific content element on a page and links to email addresses. We already saw how to link to an internal page. The following screenshots illustrate how to set different types of links.

Creating a link to a certain content element

Creating a link to a file

Creating a link to an external URL =

Creating a link to an email address

Content element types

As you already know there are a number of page content element types available and combining them is the key to creating diverse web pages so not every single page on your site looks the same!

The different types are grouped by categories. The most used items are "Text" and "Text w/images".

Wizards

Notice that some elements come with a little wizard. For instance edit one of the content elements on the page "Tables" (you can find it in the "Editor features" branch):

You can edit the content of the table in plain text mode (1) or you can open the wizard (2).

The table is constructed by interpreting each line in the "Text" field as a table row. Then the vertical line, | , is used to separate columns from each other. This is the "low level" way it works and it could be maintained by hand.

But the "Table wizard" would be the right tool to use for most people. This will bring up designated form fields and buttons for adding, deleting and moving table content around:

Secondary options - "Palettes"

From the dawn of time TYPO3 has held to the concept of primary and secondary form fields. The editing forms in TYPO3 contain a lot of fields and can be extended with even more. But many fields shown at the same time become very hard to overview for the average user. In particular if you are a beginner and have lots of new things to keep inside of your head already. The concept of primary and secondary fields means that normally you see only the most important and typically used form fields (primary). And more detailed options are hidden in the secondary fields which are shown on request. Go to the page "Frames" in your page tree and edit the first content element:

You only see some essential fields. Now press the button at (1).

You will now see the so-called secondary options palette:

So the complexity is hidden behind this button which makes the normal interface cleaner and easier to understand but the advanced options are always "just a click away". The downside is when you need one of these secondary options and can't remember "behind which icon" it is (or if you use the field a lot) - then it might in itself be confusing to find them! Therefore you can activate the option "Show secondary options" in the bottom of all editing forms:

After activating the secondary options for all element will be shown by default.

Frames

One field in the secondary options that is used in the introduction package is the "Frame". Navigate to the "Frames" page in the frontend:

There are by default some frames to insert rulers or indent the text.

Now go to the same page in the backend and edit the "Ruler before" content element:

You can see that the frame "Ruler before" is selected in the secondary options - this creates the horizontal line in front of the element. Basically what the frame element does is to wrap the content element with a certain html element or css class which can then in turn be used in your own stylesheet to create different looking elements.

Password protected pages

Now you know how to create and edit pages! That was not so hard, was it? Quite easy to become a webmaster with TYPO3. So one thing is to make web pages for all the world to see. What if we would like only a part of the world to see them? Can we add password protection? Yes, we can!

Actually there are already some password protected pages in our installation. Browse in the frontend to "Customer login" (it is the link on the top right corner).

Read the text on that page and then use the login box on the right to login as customer1.

You see some pages appearing in the left menu after you successfully logged in.

Now go to the backend and have a look at these pages in the page tree:

The little blue man on those pages tells you that these pages have some kind of user restriction. Go and edit the page properties of the page "Protected customer page" (Context menu > Edit) and go to the access tab:

You can see here that only the group "Customers" is allowed to see this page. You could also set the page to "Show at any login" that would mean that every registered user (regardless of his user group) would be able to see the page. In the next step you will learn how to create users and user groups.

Create users/groups

Before you can create access restricted pages you must first and foremost have one or more frontend users and groups. These can be created before, during or after creation of your website. The order doesn't matter.

Frontend and backend users

Now, wait a minute! How many kinds of users are there? Well, there are only two kinds. Remember that we have two areas of TYPO3 - the frontend (website) and the backend (administration).

Frontend users

A frontend user (orange icons) can log in to the website of course. They cannot change content (since they have nothing to do with the backend!) but they merely exist because it allows us restrict access to information on the website! Frontend users (also called "Website users") are created in the system where we want to create them. In our case we have made a nice sysFolder called "Frontend users and groups" for both users and groups. The only requirement of this storage place for the frontend users is that we tell the login to look at that folder for the users.

Now you can probably imagine that users and groups are not content elements but records. So they won't fit into the columns concept of the page module. That is where the list module of TYPO3 comes in handy. The list module displays a listing of all records on a page. Content elements are a special kind of records and are displayed in the page module, all other records are normally only visible in the list module.

Open the list module on the "Frontend users and groups" page:

You can see two tables, one containing the users and one containing the user groups. Each table represents one record type in the list view.

Backend users

A backend user (blue or green icon) works in the backend and is concerned with changing the information behind the scenes. Because backend users are concerned with the administration of a website they have nothing to do with the access restriction on the website itself (which is only partially true of course since backend users can preview hidden frontend pages).

Backend users can be created only in one place - in the page tree root (pid = 0) - and only by backend users that are "admin" users (who have the admin-flag set, which is indicated by the blue icon) since they are the only users with access to records in the page tree root:

The three green backend users (1) are configured so they can maintain a little part of the website each - more about that in the users section later on. At (2) you see the configured backend user groups for your website. Finally the "admin" user (3) - the one we are working with - is blue and has total and unrestricted access to any part of the system.

Editing a user or group

As you can see we already have a sysFolder "Frontend users and groups" with user groups and two users. The user group "Others" is really nothing but a dummy group. No special settings or anything. The user group "Customers" has one special setting: It contains the page the user will be redirected to after he logs in.

Let's have a look at that setting (editing things in the list module is pretty easy, just click on the user group icon in front of Customers and you will get the context menu again, then choose edit):

Go to the "Extended" tab and you will see the redirect setting:

Creating a user

Let's try to create a user. Since frontend users (like page, page content elements, news articles etc) are just database records in TYPO3's opinion, the same process of creation can be used for a frontend user as for any other element. So this is even a general introduction to creation of new elements!

Ready? It is simple. First, click the page icon in the page tree of the page where you want to create a new element:

Then select the "Website user" element:

... and enter the information.

Hidden stuff

This page was configured to just contain users and groups, therefore you can only create these few record types. If you use new on other pages you will get more options.

In this case username, password and group are required fields:

Save the user. If you click the page title of the "Users" sysFolder you should see this listing (provided the "List" module was the last backend module you used of course):

Go to the login form page again and log in with your newly created user:

Create a login form

The Introduction Package already comes with a fully configured login form. But what if you want to create another one, for example on the homepage? No problem. In general the login form is just a content element like text or text with image. Go (in the backend) to the page "Welcome to TYPO3", make sure that the page module is selected and click on the little content element icon with the green plus in the header of the "Related information" content element. This will create a new content element after this one.

Activate the tab "Form elements" and select "Login form":

You will get the form for configuration of the login. Give the login a header and then go to the "Insert plugin" tab. The most important thing here is to set the Startingpoint. This is the folder where the login looks for users. Use the little folder icon next to the Startingpoint field and select your "Frontend users and groups" page.

This is all you have to do. Now take a look at your website and you will see your shiny new login box on your home page:

Create restricted branch

Earlier you have seen how to restrict access to a page (you remember the access tab on the page properties, don't you?). Sometimes however it is useful to have not only restricted pages but whole branches that should only be seen by certain users. For example we want to restrict the whole "Editor features" branch to logged in users only. After what you know right now you'd have to edit each and every page by hand and set it to access restricted. For every new page of that branch you would have to do the same. Sounds annoying? Yeah, it is and therefore there is an easier way to do it.

Go and edit the page properties of the "Editor features" page - tab "Access" again:

If you check "Include subpages" then all subpages will have the same access settings as the parent page. This means you can not only require a login but you could also set a "Start" or "Stop" date for a whole branch!

The Access options

Basically access restriction works as simple as this - just select a website user group and that is it. From that point you just handle which users are members of which groups.

Users can belong to one or more groups, so if you have groups for every section of your website and you want to have some kind of frontend super user, you could just assign him all groups. Finally the option "Hide at login" means that a page will not be visible when a user logs in! This is useful if you have pages with information only relevant for users not yet logged in. Of course the option "Show at any login" is the opposite - that will enable the page for display for any user who is logged in. No need to be a member of any particular group - if you are logged in you are shown the page.

Special content elements

There are some commonly used yet special content elements which will be explained in this section, like a contact form or the search box. You already know the special element sitemap from the section about Content Elements in general.

Email form

Email form

We already have an email form on the website. If you go the the page "Give Feedback" you will see a basic contact form:

Navigate to the "Give Feedback" page in the backend and edit the form:

In the configuration field the form is defined, at the "Jump to page" field you can define where the user gets redirected after he sends the form. If you leave this blank he won't be redirected. Normally you'd enter some kind of "Thank you" page. Let's take a closer look at the configuration. You already know the pipe (|) as separator from the tables content element. It is used here in this mail form to define the form fields. Every line represents one field of the form. Note the wizard icon on the right side of the field. Click it.

As you can see the codes are transformed into this nice form. Here each field in the form is created by visual controls. For a field you need to enter a label of course (1) and a field type (2). These are the visible parts. You also have to give the field an internal name (3) which is the one that will be shown in the email the recipient gets. In the case of "Input field" types you can also enter a default value (4). For all email forms there are three common values to be set: The name of the send button (5), the subject line of the email being sent (6) and finally the email address of the person that should receive the email (7). This person is normally you! Or whoever on your team who is supposed to respond to feedback.

Media

The Media element is not yet used in the introduction package. But you may be interested to show an Video on your website. Upload your video into the fileadmin. Now create an new content element of type "media".

Select the "Media" tab and select your video, set if needed some additional parameters and add the alternative content for those, who are not able to see your video.

Save your content element and watch your video on your website.