Login / Status
developer.Resource
Home . Documentation . Tips & tricks . Frontend editing
Sponsors
hosted by punkt.deTYPO3 and Open Source Magazine

Frontend editing

Frontend editing is a concept which has been implemented in TYPO3 for some time now. The concept simply means that the editing of page content can be done either directly on the page or at least be initiated by clicking a link close to the content you wish to edit. You can probably already feel how TYPO3 as usual offers many ways to do it... :-)

Consider this picture:

 

 

This is a screenshot from the TYPO3 frontpage when a backend user is logged in. The difference is that four little pencil icons has appeared and if you click one of them - in this case the first at the header - you'll have a form pop up in a new window:

 

 

In that form a user can edit content of the page related to the area where the pencil was - in this case the header of the content element! There are three other icons and guess what - if you click those, another form with another set of related form fields will pop-up! Very intuitive!

Now, there is a few things you need to do before these icons will appear:

  1. Enable the Admin Panel in the frontend - this is done by inserting the TypoScript line "config.admPanel = 1" in your template record.
  2. Enable the panel for the user in question (admin users has it by default).
  3. In the "Editing" section of the panel, check of the "Display Edit Icons" option.

This looks like this:

 

 

As you see there are other options like "Display Edit Panels". If you enable this option, you'll get a little control panel shown as well:

 

Configure the Admin Panel

Except from the "Admin" backend users in TYPO3, all other users must specifically be assigned access to the Admin Panel. This is done through the field "TSconfig" of backend users and groups. If you enter this configuration in the TSconfig field of a user...:

 

 

... he'll see the Admin Panel in the bottom of pages to which he has access:

 

 

Still the user must "open the panel" and click the options. If you think this is too much to ask, you can extend the configuration, so that the panel does not show up (is hidden) and the "Display Edit Icons" are forcibly set. Doing this, the edit icons will always be shown for the user with no possibility of turning them of.

 

Edit icons for my own records?

Yes, of course you can. What did you expect?

Basically there are two ways of doing it and I'll not discuss it into details - just point you in the right direction; You configure it through TypoScript in your templates and the primary way is through the stdWrap property which exists for a host of cObjects and other things. See TSref for details and don't forget to study the current set up for the tt_content-rendering (try to browse through or search in the Web>Template / Object Browser module).

Setting the icons for records rendered through PHP scripts may be a bit more tricky, but is possible as well.

Warnings

First of all, enabling these features will disable page caching for the user as long as he is logged in. This has no negative influence on other website users, but it slows down page rendering for the logged in backend user because the page must be rendered each time in order to insert the icons and panels.