Concrete5 – Using TinyMCE Templates

The Concrete5 content block uses TinyMCE as its WYSIWYG editor. Thanks to this decision, we are able to use several plugins most Concrete5 users haven’t thought about.

One feature I really like is the “template” plugin which allows you to create html snippets which you can insert into the content block. In this tutorial I’m going to show you, how you can create a simple 2 and 3 column table template.

TinyMCE Configuration

You’ll find almost anything you have to know on this page: But luckily for you, I’m going to make this even easier for you.

First, you have to go to the Dashboard – Sitewide Settings. In the bottom right corner, you can activate a “Custom” configuration for the rich text editor. Once you’ve enabled it, it will show you some options. What do we need to activate the TinyMCE templates:

  • We have to load the template plugin
  • There must be a button to display the template dialog
  • We have to create at least one template
theme : "concrete", 
plugins: "inlinepopups,spellchecker,safari,advlink,template",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",	
theme_concrete_buttons1 : "template,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect",
theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor",
theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite",
theme_concrete_toolbar_align : "left",
theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
theme_concrete_font_sizes : "1,2,3,4,5,6,7",
theme_concrete_styles: "Note=ccm-note",
spellchecker_languages : "+English=en",
template_templates : [
		title : "2 Columns",
		src : "themes/yourTheme/templates/2_columns.html",
		description : "Adds a 2 columns table"
		title : "3 Columns",
		src : "themes/yourTheme/templates/3_columns.html",
		description : "Adds a 3 columns table"

There’s one thing you probably have to change. In the two templates I’ve added, there’s a hardcoded path which won’t work on your site. Make sure it points to an existing directory. The content of the html file is rather simple. I modified the example for TinyMCE to make it look like this:

<!-- This will not be inserted -->
<div class="mceTmpl">
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
<td>Sample Data</td>
<td>Sample Data</td>

How you can insert an HTML snippet

You’re already done, but where can you find the snippets? We you add a new content block, you’ll see a new button:

When you click on this button, you’ll see a dialog where you can select the template:

Unfortunately, the insert button is a bit hidden, you have to scroll down to insert the template. You can insert as many snippets into one content block as you want:

I hope you like it and thanks for completely reading this tutorial!

Linux Shell in a Browser

If you’re a *unix admin you probably like SSH a lot. Even if you have to work on a Windows computer you can simply download a small tool like Putty and you’re ready to work on your server. However, there are situations where not even Putty works – if you’re behind a firewall that filters the outgoing traffic as well. It usually makes sense to block outgoing SSH traffic in a big company because you could easily create an encrypted tunnel to move secret data to any server you want.

But there’s another way to access your server using SSH like tools without having to worry about encrypted tunnels or any other threats SSH could cause. It’s called shellinabox and can be found on Google Code.

If you’re working with debian like I do, you can even download a prebuilt deb file.
dpkg -i shellinabox_2.10-1_i386.deb

The installer creates an init script located in /etc/init.d/shellinabox. As soon as it has been started you can access your shell using any webbrowser using an address like this: https://localhost:4200. But the port 4200 is usually not accessible if you’re working behind a firewall that blocks SSH traffic. Let’s use apache to redirect traffic from HTTPS to 4200. We have to enable mod_proxy if it’s not already active:

ln -s ../mods-available/proxy.conf
ln -s ../mods-available/proxy.load
ln -s ../mods-available/proxy_http.load

Edit the site file where you want to add your shell, I used /etc/apache2/sites-available/default-ssl and added these lines:
<Location /shell>
ProxyPass http://localhost:4200/
Order allow,deny
Allow from all

Shellinabox uses https by default as well and is accessible by any ip address. We want to change that, let’s edit this file /etc/init.d/shellinabox and add SHELLINABOX_ARGS (the last line in the following box):
# Set some default values
SHELLINABOX_ARGS="--localhost-only --disable-ssl"

If you now restart all the services “/etc/init.d/shellinabox restart” and /etc/init.d/apache2 restart”, you’re shell can be accessed by https://localhost/shell from anywhere you want!

Concrete5 – Custom 404 page

It hopefullly doesn’t happen very often but sometimes a user might enter an address which doesn’t exist. In most situations a simple page is displayed, telling him that the page doesn’t exist. Having some more detailled information can be very helpful, especially when you just relaunched your website. Google & Co need a while to reindex your page and users will probably see “page not found” more frequently than usually.

Concrete5 allows you to customize this page but it needs a few modifications. Some of them are probably a bit hard to find – which is why I wrote this tutorial. The standard Concrete5 “page not found” page looks like this:


Image Navigation Items

It’s been a while since I’ve posted the last tutorial. Due to some unexpected events I finally found some time to write a new one.

The default autonav Block in Concrete5 allows you to add a navigation/menu to your site in almost no time. But as soon as you want to use images it get a bit more difficult. In this tutorial I’m going to show you, how you can specify pictures for each page and pull them in an autonav template.

Expand/Collapse Block

Due to limited time I wasn’t able to write new articles for codeblog. This time there’s not going to be much text, just a free block which you can use for your site.


Concrete5 – Formular Layout anpassen

Concrete5 has a nice form block which allows you to create a contact form within a few seconds. You don’t even need to have any html or php skills to create a simple file upload form. Unfortunately this block isn’t very easy to style. It uses some html markup which makes it a bit tricky to use CSS. However, it doesn’t mean it’s impossible! I’m going to show you how you can easily create a styles form using Concrete5 Custom Templates to produce this:

Styles Form

Smart text trimming with PHP

Have you ever tried to create a short preview text using PHP? Did you just count the characters and ended up having texts with a completely different width like shown on this picture?


This tutorial describes a small method which calculates the real width of a string and lets you create better looking preview texts!

Concrete5 – more Speed with eAccelerator

UPDATE: The latest eAccelerator version doens’t contain the PHP API anymore. It therefore does no longer work with Concrete5! The upcoming version 5.4 is going to have support for APC and memcache. Sorry!

You want more speed with Concrete5? Make sure you’re using eAccelerator!

In this tutorial I’ll explain how to install eAccelerator on a Debian Linux Server.


Concrete5 – Staff listing with two Columns

Sometimes content should be presented in two columns. In this tutorial I’ll describe a possible solution that included a very simple block to display a staff/team member with a description on the right side of it. The result will look like this:


Concrete5 – CSS features [typograhy.css, customize themes]

If you ever built your own Concrete5 theme you might have wondered why there are usually two css files – main.css and typography.css. In this tutorial I’ll show you some possibilities of typography.css. You should have basic knowledge about building a theme for Concrete5. Read this tutorial in case you never built one before: