Contao im CMS-Garden auf der CeBIT 2013

Sie interessieren sich für eine neue Website und möchten sich über die verschiedenen Content Management Systemen (CMS) informieren? Dann sollten Sie die diesjährige CeBIT in Hannover besuchen. Im “CMS Garden“ werden vom 5. bis 9. März erstmals die besten Open-Source-Werkzeuge zur Gestaltung von professionellen Websites an einem Ort präsentiert. Neben Contao, dem Content Management System, mit dem wir unsere Websites entwickeln, werden unter anderem auch Typo3, Drupal, Joomla, OpenCMS und WordPress vorgestellt. Hier bietet sich die optimale Gelegenheit die verschiedenen Systeme zu vergleichen und im Expertengespräch alle aufkommenden Fragen kompetent beantwortet zu bekommen.

Darüber hinaus wird es einen Wettbewerb geben, bei dem sich die verschiedenen CMS Communities an der Lösung von klassischen sowie exotischen Aufgaben versuchen und mit ihrem jeweiligen Werkzeug das optimale Ergebnis erreichen sollen. Die Besucher können dies live verfolgen und auch auf diesem Weg die Stärken und Schwächen der unterschiedlichen Systeme erkennen.

Um den ca. 100 m2 großen Stand zu finanzieren wurde ein ausführliches CMS-Infobuch gedruckt, dass auf dem Stand ausliegen wird und in einem redaktionellen Teil die verschiedenen Content Management Systeme vorstellt. Ebenso enthält es ein Dienstleisterverzeichnis, das Ihnen auf einen Blick die Experten für das jeweilige CMS aufzeigt. Wir zählen zu den Unterstützern des CMS-Garden und würden uns freuen, wenn Sie die Möglichkeit ergreifen den Stand im Open-Source-Park in Halle 6 zu besuchen.

How To Create Your Own Contao Module

Contao is a wonderful tool for creating professional websites. We already know that. But there’s one major flaw which can easily destroy all the fun you had with Contao so far:
That really awful documentation for developers.

If you want to develop a custom module, you’re pretty much left alone. The official ressources (https://contao.org/en/manual.html) don’t show the complete creation process, which is highly needed in my opinion.

To help you out a little bit, I created a very simple slideshow module. Its really nothing special, but should show you whats happening behind the scenes.

Feel free to do whatever you want with this piece of code, and if you have any questions, don’t hesitate to drop a comment.

Download

Small Mootools Twitter Class

For a current project, we had to implement a custom Twitter widget. After some time searching the web, I found this article on David Walsh’s Blog. Even if its a bit outdated, it did the trick.

Based on the old class, I present the updated and extendend version!

var TwitterWidget = new Class({

	Implements: [Options, Events],

	options: {
		count: 3,
		insertElement: null,
		actionSeparator: '<span class=\"tweet_actions_separator\">.</span>',
		dateFormat: '%e %b'
	},

	initialize: function(username, options) {
		this.setOptions(options);
		this.username = username;
	},

	getTweets: function() {
		new Request.JSONP({
			url: 'http://api.twitter.com/1/statuses/user_timeline.json',
			data: {
				screen_name: this.username,
				count: this.options.count
			},
			onComplete: function(data) {
				data.each(function(tweet) {
					tweet.text = this.linkify(tweet.text);
				}, this);
				this.fireEvent('fetchComplete', [data]);
				this.insertTweets(data, this.options.insertElement);
			}.bind(this)
		}).send();
		return this;
	},

	linkify: function(tweet) {
		//totally stolen from Jeremy Parrish / David Walsh
		return tweet.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>')
					.replace(/(^|\s)@(\w+)/g,'$1<a href="https://twitter.com/$2">@$2</a>')
					.replace(/(^|\s)#(\w+)/g,'$1<a href="https://search.twitter.com/search?q=%23$2">#$2</a>');
	},

	insertTweets: function(tweets, element) {
		if (element == null) {return;}
		tweets.each(function(tweet) {
			var tweetDate = Date.parse(tweet.created_at)
			var tweetContainer = new Element('div', {
				html: '<span>' + tweet.text + '</span>',
				'class': 'tweet'
			});
			new Element('div', {
				html: '<a href=\"https://twitter.com/' + this.username + '/status/' + tweet.id_str + '\">' +
					 tweetDate.format(this.options.dateFormat) + '</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/tweet?in_reply_to=' + tweet.id_str + '\">reply</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/retweet?tweet_id=' + tweet.id_str + '\">retweet</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/favorite?tweet_id=' + tweet.id_str + '\">favorite</a>',
				'class': 'tweet_actions'
			}).inject(tweetContainer);
			tweetContainer.inject(element);
		}, this);
		this.fireEvent('insertComplete');
	}

});

Usage

Let’s say you have the following HTML snippet,

<div id="twitter_container">
</div>

and you want your recent 5 tweets in this container, then simply use the following code:

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5
}).getTweets();

But what if you don’t like the date format and want an other separator between reply, retweet and so on? No problem.

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5,
    dateFormat: '%B-%d-%Y',
    actionSeparator: '|'
}).getTweets();

(for the date format options head over to http://mootools.net/docs/more/Types/Date#Date:format)

That’s it! Simple.
But be aware that you need to add the Request.JSONP and the Date module if you are using Contao. These two things are not included in the Mootools-More pack by default.

On this page, you can see how it could look like on your website.

Have fun, and oh, please let me know if this could come in quite handy on any project you’re working on.

The benefits of using Contao

As we are now using the Contao content management system (cms) for nearly every website we create, I wanted to give you a brief overview over the benefits of the system. Maybe this helps you to get a better impression of it and leads to even more people using Contao.

contao back end

Contao back end

So what makes it that good?

Most of our customers who switched over from different content management systems were very impressed with Contao’s simplicity and easy-to-accustom ways to keep their site up-to-date. In fact we had several clients who wanted us to build them a new site just because their former cms was way too complicated to use. It is important for our clients and also ourselves to know that the system we’re using can be expanded flexibly and inexpensively. Contao is fantastic in making that possible. A great example is it’s extension catalog which offers a big database of extensions you can use on your web site. It’s biggest plus is that you can install these extensions right there, in Contao. You don’t need to download it, then upload it via FTP and then include it into your system. Contao does all that on its own.

Furthermore Contao offers a high security standard and allows us to develop search engine friendly websites which are also accessible for people with disabilities.

Is doesn’t matter whether you have a big or a small site, Contao is the optimal solution for both variants. Especially at bigger web sites it offers the possibility to work with multiple people, even simultaneously. It is no problem to manage and create new user accounts for every one of your colleges who update your site.

These and many other built-in features made Contao one of the most popular open source content management systems on the market. We are really recommending you to give it a try! Give us a call or simply drop a mail if you have any questions!

Head over to contao.org to see videos and tutorials or download it.