TYPO3 will be holding its first conference in North America from April 16-18, 2009 in Dallas, Texas. Since I live in the Dallas / Fort Worth Metroplex, I’ve been involved in the organization and I’m ready to see the conference get here.  We’ve got a great lineup of speakers that will provide great content for new TYPO3 administrators and experienced developers alike. Many well known members of the TYPO3 community will be in attendance including Kasper Skårhøj (original TYPo3 developer) and Robert Lemke (TYPo3 v5 developer). In addition to the technical content, I’m really looking forward to establishing connections within the North American community of TYPO3 developers.

If you’re still on the fence about attending, I’ll promise visits to the best Tex-Mex and Barbecue spots that Dallas has to offer.  Registration is open now at http://t3con09-dallas.typo3.org/visitors.html and early bird pricing is available until the end of February so don’t wait around.

Main Features

• AJAX loading and saving of editing forms.
• Drag and drop of content elements.
• Clipboard support.
• Support for traditional templating and TemplaVoila.
• Architecture in place for more advanced functionality, such as managing news articles, pages, etc.

User Interface Mockups

With the key focus of this frontend editing project being usability, we wanted to be sure we got the user interface right from the start. For this, we turned InnerEcho, a Dallas-based company skilled in both user experience and TYPO3 development. This was a great pairing for us as the guys at InnerEcho were already well aware of TYPO3’s capabilities and limitations. It’s also worth noting that they were gracious enough to jump in on this project on a volunteer basis in order help the whole TYPO3 community.

The mockups you see below are among many provided by InnerEcho and show the look and feel we’ll be shooting for in a final release.

Functional Prototype

In addition to the screenshots above, we do actually have a working prototype. The video linked below shows our enhanced frontend editing actually working within TYPO3.  No magic or trickery involved at all! You’ll see that AJAX loading and saving works, as does drag and drop of content elements.  We still have plenty of work to do in integrating the InnerEcho-designed UI and in making all of our client side code work correctly across multiple editing actions but its exciting to see the foundations of the system working properly.

• Watch Demo Movie

What’s Next?

I had the privilege of attending T3CON08 and the TYPO3 Transition Days in Berlin last week and was able to give some demos and gather feedback from both TYPO3 consultancies and core developers. We were very encouraged to see the enthusiasm about getting this feature into TYPO3 4.3.

We’ve got some refactoring of TYPO3’s existing frontend editing that should go into TYPO3 4.3 Alpha 1 and then we hope to have the new frontend editing in the core by the first beta release. If all goes according to plan, we should have some great new frontend editing functionality as part of TYPO3 4.3 in late January 2009.

At first glance, this sounds like a great setup.  Editors are able to focus on their pages and don’t get lost within all the other content of the site. In day to day use, however, this causes one major headache: linking to other pages on the site.  In TYPO3, the main pagetree and its settings are used when creating internal links to other TYPO3 pages. If you can’t see a page, you can’t link to it either (at least not without hardcoding the URL, which opens up whole other set of issues). This means an editor cannot create a link from his section to another section.

When a church runs into this problem, my stock answer has always been “Yeah, that would be great.  Unfortunately, its not possible.”  Ron Hall and I were talking about this last week and once again I gave the standard answer. Much to my suprise, I found out that I’ve been answering incorrectly since the release of TYPO3 4.2 several weeks ago.

TYPO3 4.2 now supports User TSConfig for read-only page mounts and file mounts.  Practically speaking, this means its now possible to allow editors to link to pages or files without actually allowing them to write to those locations.  In the example below, the first line of Typoscript defines what directories (and files within) an editor can link to. The second line defines the root page where TYPO3 page links are allowed. Any pages below this are also allowed so it can typically be set to the main page of a site.

options.folderTree.altElementBrowserMountPoints = _temp_/,templates
options.pageTree.altElementBrowserMountPoints = 34

Page Browser with Read-Only Mount

File Browser with Read-Only Mount

Thanks to Kasper Skårhøj for the implementation and Steffen Kamper for bringing it to my attention. Steffen is working on a small patch to bring this behavior to the Rich Text Editor in TYPO3 4.2.2 as well.

http://www.typo3tricks.com/when-switching-from-baseurl-to-absrefprefix/

Definitely worth keeping an eye on for future versions of the WEC Starter Package as we’ve experienced some of the same issues with 404 pages and baseURL.

A client and friend of WEC runs a website that provides premium content behind a subscription.  Users can register for accounts to access this content, which works with the standard TYPO3 access controls for frontend users and groups. In addition to these individual subscribers who sign up on their own, libraries can subscribe to this content and make it available to anyone who logs on while at the library.

Our job was to come up with a way to transparently make this content available to libraries while also providing the TYPO3 administrators an easy way to add new libraries and provide content to them.

The first part of our task turned out to be yet another hidden gem inside TYPO3 as API-level support for IP-based Frontend Groups already existed.  By adding the following code to localconf.php, any visitor matching the IP mask (192.168.*, 127.*) will automatically be treated as part of the frontend group with a UID of 3.

 $GLOBALS['TYPO3_CONF_VARS']['FE']['IPmaskMountGroups'][] = array('192.168.*, 127.*,3);

From this static definition, its pretty clear to see how you could also write the value dynamically based on database records.  In our case, we used the TSFE’s initFEUser hook to get our code running early in the page rendering process.

// get where clause
$where = 'disabled = 0 AND deleted=0 AND (('.time().' > starttime AND '.time().' < endtime) OR (starttime = 0 AND endtime = 0) OR (starttime = 0 AND '.time().' < endtime) OR ('.time().' > starttime AND endtime = 0))';

// get all account records from the db
$res = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows('*', 'tx_weciplogin_accounts', $where);

// loop through results
foreach( $res as $account ) {

	// explode the fe user groups into an array and iterate over them
	foreach( explode(',', $account['feusergroup']) as $groupid ) {
		// add masks to typo3 conf vars
		$GLOBALS['TYPO3_CONF_VARS']['FE']['IPmaskMountGroups'][] = array($account['ip'], $groupid);
	}
}

With the actual group assignment out the way, it was simply a matter of building a user interface so that the TYPO3 administrators could easily manage library subscriptions.  In the screenshot below, we see an IP-based frontend account that is active for one year. Any visitor matching the IP mask will automatically be treated as a member of the “Registered Users” group and see content specific to that group.

(Special thanks to Christoph for his help with this extension.  I know he loves it when I finally blog and its about something that he already knows all about)

As I continue to work in TYPO3 today, I’m still amazed at the depth of the feature set. I’ll feel like I’ve gone deep into the TYPO3 core or pushed the boundaries of extension development, but when a new project comes along, I’ll invariably find new features already implemented that I had no idea about.

These aren’t the kind of features that show up in a list on CMS Matrix, but instead the things you’d never think about when making an initial decision on a Content Management System. They’re the things that keep me from ever thinking about developing my own CMS.

As I continue working in TYPO3, I’ll be posting these hidden gems as I come across them.  Some may be geared toward editors, others toward developers, and some may be obvious to everyone but me.  As a whole, they’re what give TYPO3 its amazing depth and flexibility.

If you haven’t checked RealURL out in a while, its also worth noting that Dmitry has added a very nice autoconfiguration feature to RealURL.  The WEC Config extension takes advantage of this and configures RealURL for many popular TYPO3 extensions.

(For those of who you don’t know me, let me make it clear that this is firmly tongue in cheek)

Let’s start from the top. My name is Jeff Segars and I’m a web developer with the Web-Empowered Church ministry. WEC develops open-source software for churches using the TYPO3 Content Management System. I spend the bulk of my time developing TYPO3 extensions and working as a member of the TYPO3 Core Development Team.

I plan to keep this blog narrowly focused on web development within TYPO3. I’ll throw in the occasional release announcement or status report from WEC, but the bulk of the content around here will be the nitty gritty details of TYPO3. Sounds exciting, I know!

(Yes, I do realize that I’m blogging about TYPO3 from Wordpress.  Hope to remedy that soon but there’s no denying its a quicker option to get something up and running with a decent template)

We’ve also added a public demo site at http://demo.webempoweredchurch.com where you can preview and download WEC Templates. There’s some interesting stuff going on behind the scenes with this demo site, which I plan to cover in a future post.