combine Javascript-files with contao cms

(with the help of a PHP template)

Contao (formerly Typo Light) is a great open source Content Management System hitting the sweet spot between simplicity and flexibility pretty well. One of the things I missed, though, was the possibility to combine the multiple Javascript files of a project into a single file inside the CMS — like it’s default for the CSS files already.

Up to know I had to combine the files externally before uploading them to the system, but recently I found a quite simple and elegant workaround for that specific problem.

First step is to define the scripts you want to combine.

Create a new template called j_scripts.html5 with your FTP-client (contao won’t let you do it right in the backend) and list all the Javascript and jQuery files you want to combine according to the following syntax:

Next step is to integrate the template you just created in your Pagelayouts.

You need to load jQuery (do it localy, of course!) to get the option to embed jQuery-Templates. Alongside the default ones there should be the new one (j_scripts) available now:

Thats it.

If you check the Sourcecode of your website after the changes, you’ll see a new Javascript file linked in the header:

This your file with the combined Javascript.

As you might notice the file is located in the assets directory (just like the combined CSS one line above it) which means it’s not just speeding things up by reducing multiple server request to just one, but by storing the single file inside the internal Cache of Contao, too — if the Cache is activated of course.

Now you got the speed advantages of a single, cached file right alongside the adjustability of separate Javascript files. And if you need to add or remove a script now, you don’t have to change every Pagelayout of the Theme but only the j_scripts template.

Pretty neat, huh?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.