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.