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: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template. 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">
<tr>
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
</tr>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</table>
</div>

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!

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:

As you can see, the layout uses the default concrete5 dashboard theme. First, we’d like to use our own theme! Open “config/site_theme_paths.php”, there are already a few commented examples in the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php  
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
$v = View::getInstance();
$v->setThemeByPath('/page_not_found', "yourtheme");
 
/* 
	you can override system layouts here  - but we're not going to by default 
 
	For example: if you would like to theme your login page with the Green Salad theme,
	you would uncomment the lines below and change the second argument of setThemeByPath 
	to be the handle of the the Green Salad theme "greensalad" 
 
$v = View::getInstance();
 
$v->setThemeByPath('/login', "yourtheme");
 // $v->setThemeByPath('/403', "yourtheme");
 // $v->setThemeByPath('/register', "yourtheme");
 // $v->setThemeByPath('/dashboard', "yourtheme");
 
*/

In line 5 and 6 you can see the two lines I’ve added. Make sure that you replace “yourtheme” with the name of your theme – identical to the directory name of your theme in the folder “themes”.

Make sure your theme has a file called view.php. It might look similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
 
 	<div id="content">
	   <div id="body">
	   	<!-- begin -->
	   	<?php
	   	echo $innerContent;
	   	?>
	   	<!-- end -->
	   </div>
	</div>	
 
<?php
$this->inc('elements/footer.php');
?>

$innerContent is where all the information is saved.

Once you’ve saved site_theme_paths.php your error page uses your own theme. In my case like this:

Sitemap

It might make sense to display a sitemap when a users landed on the 404 page. This is also easy to do. Create a copy of /concrete/single_pages/page_not_found.php here /single_pages/page_not_found.php. This makes sure we don’t modify files within the Concrete5 core. Open the file and make it look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
 
<h1 class="error"><?php echo t('Page Not Found')?></h1>
 
<?php echo t('No page could be found at this address.')?>
 
<?php  if (is_object($c)) { ?>
	<br/><br/>
	<?php  $a = new Area("Main"); $a->display($c); ?>
<?php  } ?>
 
<br/><br/>
 
<?php
$bt = BlockType::getByHandle('autonav');
$bt->controller->orderBy = 'display_asc';                    
$bt->controller->displayPages = 'top';
$bt->controller->displaySubPages = 'all';     
$bt->controller->displaySubPageLevels = 'all';                    
$bt->render('view');
?>		
 
<br/><br/>
 
<a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.

Lines 13 to 20 uses the autonav block to display a sitemap. That’s it! In my case the “page not found” page looks like this:

A bit useless in my case but probably more helpful if you have more pages than I do.

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.

Page attributes

Concrete5 allows you do add different kinds of attributes to your page. You can use them to manage meta tags, tags, notes, thumbnails or images for your navigation. First we have to create two new page attributes where we can select the pictures. One which will be shown if the page is currently active and one for inactive pages.

All the important information has a red overlay:

• Attribute type must be Image/File
• The Handle is used in the template, make sure you remember it
• The Name is just a description to explain what the use of the attribute is

Assign images

We have two new attributes where we can assign some images. The following screenshot explains this:

• In the sitemap, open “Properties” for the page where you would like to see an image in the navigation
• Go to the last tab “Custom Fields” and add the two fields you just created
• Select the image you want to see if the page is active and inactive

Do this for all the pages where you’d like to have an image instead of a text link. You can always add and modify the images for the pages. Even your end-user can add new image menu item this way. One of many reasons why page attributes are so powerful!

Custom Autonav Template

If you haven’t worked with custom template you should probably read this tutorial first: http://www.codeblog.ch/2009/03/concrete5-templates/.

To create a new custom template, simply copy /concrete/blocks/autonav/view.php to /blocks/autonav/templates/image_navigation.php. You probably have to create the folders autonav and templates first.

Around line 55 you should see this code (might be different, depending on your c5 version:

1
2
3
4
5
6
7
8
9
10

if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

With some HTML and PHP knowledge you probably have already found the place which outputs the link text. It’s of course “$ni->getName()”. This is the code which we have to modify to display images if they’ve been selected.

We replace $ni->getName() with variables which will hold the html code for the image or the link text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . $linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}

• Line 1,2: The new variables
• Line 4,5: Get the attribute values – the image
• Line 7-12: Checks if the attribute has a value and replaces the link text

Now you can add an autonav block, set all the properties and after you’ve added the block, click on it again an hit “Set Custom Template”. If you create our custom template in the correct folder, you should now be able to select it.

If everything worked you should now have a top navigation like this:

Custom Templates

If you don’t know anything about “Custom Templates”, you should probably read this article first: http://www.codeblog.ch/2009/03/concrete5-templates/. In short: Concrete5 allows you to style any block using templates in case you need to change the html output and not only the css rules.

Core modification

There’s one small thing I didn’t want to modify in the custom template since it shouldn’t be printed anyways. This might change in a future version, but because it doesn’t break anything I’m going to make the “not recommendable” core change in this case. Open the file “concrete/blocks/form/controller.php” and go to line 667 as shown on this screenshot:

Remove ’style=”width:95%”‘ as it makes css styling a bit nasty. Please note that this step isn’t necessary, it’s just about the layout!

The default layout

If you create a new form, it usually looks like this:

It works but doesn’t look very nice.

New form style

In this tutorial I’m showing you how you can create a form in which the labels are in the textfields and not on top or left. This might especially be useful if you have a very small page and a huge form. It also looks nice.

This is how the result is going to look like:

Let me start with the php template view.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?php    
defined('C5_EXECUTE') or die(_("Access Denied."));
$survey=$controller; 
$miniSurvey=new MiniSurvey($b);
$miniSurvey->frontEndMode=true;
?>
<div class="ccm-form" id="ccm-form-id-<?php echo intval($bID)?>">
 
<?php  if ($invalidIP) { ?>
<div class="ccm-error">
<?php echo $invalidIP?>
</div>
<?php  } ?>
<form enctype="multipart/form-data" id="miniSurveyView<?php echo intval($bID)?>" class="miniSurveyView" method="post" action="<?php  echo $this->action('submit_form')?>">
	<?php   if( $_GET['surveySuccess'] && $_GET['qsid']==intval($survey->questionSetId) ){ ?>
<div id="msg"><?php  echo $survey->thankyouMsg ?></div>
<?php   }elseif(strlen($formResponse)){ ?>
<div id="msg">
			<?php  echo $formResponse ?>
			<?php  
			if(is_array($errors) && count($errors)) foreach($errors as $error){
				echo '
<div class="error">'.$error.'</div>
';
			} ?></div>
<?php  } ?>
	<input name="qsID" type="hidden" value="<?php echo  intval($survey->questionSetId)?>" />
	<input name="pURI" type="hidden" value="<?php echo  $pURI ?>" />
	<?php   	
	$questionsRS = $miniSurvey->loadQuestions($survey->questionSetId, intval($bID), 0);
	$surveyBlockInfo = $miniSurvey->getMiniSurveyBlockInfoByQuestionId($survey->questionSetId,intval($bID));
 
	$showEdit = false;
	$hideQIDs=array();
 
	while($questionRow=$questionsRS->fetchRow()) {	
		if(in_array($questionRow['qID'], $hideQIDs)) continue;
 
		$msqID=intval($questionRow['msqID']);
 
		$requiredClass=($questionRow['required'])?' required ':'';
		$requiredSymbol=($questionRow['required'])?' *':'';
 
		echo '
<div class="ccm-form-element'.$requiredClass.'">';
		$_REQUEST['Question'.$msqID] = $questionRow['question'] . $requiredSymbol;				
 
		echo $miniSurvey->loadInputType($questionRow,showEdit);
		echo "</div>
";	
	}	
 
	if($surveyBlockInfo['displayCaptcha']) {		
		$captcha = Loader::helper('validation/captcha');				
		echo "
<div class=\"ccm-form-captcha\">";
 
		echo '
<div class="required">';		
		echo '<input type="text" value="Sicherheitscode hier eingeben" name="ccmCaptchaCode" class="ccm-input-captcha"/>';
		// Please note that we need to style our captcha, we therefore create it manually!
		//$captcha->showInput();
		echo "</div>
";
 
		echo "
<div>";
		$captcha->display();
		echo "</div>
";
 
		echo "</div>
";
		echo '
<div style="clear:both"></div>
';
	}
 
	echo '<input class="formBlockSubmitButton button" name="Submit" type="submit" value="senden" />';
 
	?> 
</form></div>

I’m not explaing each line because I assume you understand PHP, otherwise this tutorial isn’t made for you – sorry!
What I changed:

• Calling some methods found in the controller out of the view
• Created a div layout instead of a table layout
• Added some CSS classes to indicate required fields
• Added a strange line which makes sure that the value attribute of the textfield contain the description

Now, we’ve got a form where we don’t have any labels next to the input fields. But we need to get rid of these values at some point, otherwise the users are able to submit forms using the default values (labels). To achieve this, we’re going to use some JavaScript checks:

1
2
3

   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);

These events get raised once a users clicks into a textfield within our form. There we check whether we have to replace the label or not using this code:

1
2
3
4
5
6
7
8
9
10
11
12

function onEnterField() {
   if (this.origLabel == null)
      this.origLabel = this.value;
   if (this.origLabel == null || this.origLabel == this.value)
      this.value = '';
 
	$(this).prev(".formError").slideUp();
}
function onLeaveField() {	
   if (this.value == '' && this.origLabel != null)
      this.value = this.origLabel;
}

We also add some client side checks to make sure the users has entered all the required fields. This allows us to safe a request and a few milliseconds of waiting.

$(document).ready(function() {
 
   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);
 
	$('.miniSurveyView').submit(function() {
		var formErrors = 0;
 
		$('.formError').remove();
		$('input[type=text], textarea', this).each(function() {
 
			if (($(this).attr('origLabel') == undefined || $(this).val() == $(this).attr('origLabel')) && $(this).parent().hasClass("required")) {
				formErrors++;
				$(this).before('
<div class="formError" id="formError'+formErrors+'" style="height:18px;color:red;font-size:10px;display:none;">Bitte Wert eingeben:</div>
')
				$("#formError" + formErrors).slideDown(200,function() {					
				});
			}
		})
 
		if (formErrors > 0)
			return false;
		else
			return true;
	})
 
});

We check for all fields and make sure the have a value in case they’re underneath a div with the class “required”. We simply display a div above the input fields in case there’s a value missing.

The template also contains some css rules which I’m not going to show in this article. They’re pretty straight forward, but you can also find them here:

Download Form Template

Extract the zip into “blocks/form/templates”. You might have to create the diretories form and templates first!
Enjoy!

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

Measuring string width

PHP offers several methods to measure a string width. You can use the built in method ImageFontWidth to measure the width of a string using the built in PHP fonts. This is quite easy and works well if you want to create a captcha or something similar, using the PHP fonts.

But there’s another method which you can easily use to get the complete bounding box of a true type font string. It’s called imagettfbbox. The return value is an array which contains several values needed for a bounding box.

The trimming method

As you’ve probably seen on the picure at the beginning of the article, I needed a method that cuts off a string after a certain width and adds a string to indicate that the text isn’t completely shown. Here’s some code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function trim_by_width($text,$width,$font_file,$font_size=7,$append_string = '...')
{
	$append_string_box = imagettfbbox($font_size,0,$font_file,$append_string);
	$append_string_width = $append_string_box[2];
 
	$str_len = strlen($text);
	for ($i = 0; $i<=$str_len; $i++)
	{
		$trimmed_text = substr($text,0,$i);
		$bounding_box = imagettfbbox($font_size,0,$font_file,$trimmed_text);
		$trimmed_text_width = $bounding_box[2];
		if ($trimmed_text_width + $append_string_width > $width && $i > 0)
		{
			$str_to_return = substr($trimmed_text,0,strlen($trimmed_text)-1);
			if ($trimmed_text_width != $str_len)
			{
				$str_to_return .= $append_string;
			}
			return $str_to_return;
		}
	}
	return $text;
}

$trimmed_text = trim_by_width($text, $width, $font_file, $font_size, $append_string='...');

$text:
The first parameter is the string which you want to trim

$width:
This defines the maximum width of the text in pixels! Not in characters or anything else

$font_file:
Here you have to specify the location of your true type font file.

$font_size:
The font size you want to use. Please note that unit depends on the version of the GD library you're using. GD1 uses pixels, whereas GD2 uses points

$append_string:
An optional string to define the text appended at the end of a trimmed text. By default set to "..."

An example

You can call the method like this:

echo trim_by_width('this is a long text',55,dirname(__FILE__) . '/verdana.ttf',8);

It assumes that the file verdana.ttf is in the same directory as the php script. It will cut the text “this is a long text” after 55 pixels.

That’s it!

Table layouts

I’m not going into the details about tableless layouts, just a few basic things. The table tag shouldn’t be used for a layout, using div & css is the way to go. With Concrete5 you could theoretically create two areas but you would then have the problem that the content in the left column doesn’t have to same margin to the top as the content in the right.

I’m therefore describing a block that creates a proper div output which you can style using common css rules.

The staff block

The block contains only two elements. A picture and a textfield to enter a little note/description about the person.

The html output will look like this:

1
2
3
4
5

<div class="ccm-person">
   <div class="ccm-person-image"><img src="http://myserver/remo.jpg" alt=""></div>
   <div class="ccm-person-description">Lorem ipsum dolor sit ame.</div>
   <div style="clear:both"></div>
</div>

Please note that I’ve added div at the end that uses an inline-style to clear the output. You might want to use a class of your theme but since there’s no class name that’s available everything, I’ve decided to use an inline-style to explain the block!

Without any styling this will generate an output where the text is shown underneath the picture. But since we want to have a table-like layout, we add a few lines to our css file:

1
2
3
4
5
6
7
8

.ccm-person-image {
   float: left;
   width: 80px;
}
.ccm-person-description {
   float: left;
   width: 385px;
}

This is usually specific to your layout, change it to suit your needs!

Download block

The Content Management System Concrete5 supports custom templates for existing blocks. Using this feature enables you to modify the layout of the core elements, without actually touching the core, which offers you an easy to way to modify your layout if css isn’t enough.

In this tutorial we’re going to modify the “page list” block. The page list block is quite handy to create a list of sites. Just add a new sub page and the page list block will display it. Could be used for a news list. I already created a list for this tutorial. It looks like this:

The sites “Untereite A” and “Unterseite B” should be part of a list. To achieve this, we’ll add a page list block to the parent page:

We just created a simple list:

The layout isn’t perfect, but we can modify the CSS! But what if we want to add a thumbnail? CSS isn’t enough anymore and we need to create a custom template!

You should have basic HTML and CSS knowledge. PHP experience isn’t required, I’ll explain all the PHP code.

In this tutorial, I’ll start with a photoshop file which I already converted to and HTML/CSS file. If you don’t have one yet – find, build or download one before you continue.

Elements of a theme

A little overview of all the elements you’ll find in a theme:

• elements - Die directory contains the elements for a template like the header and footer
• images - Sometimes, you’ll put pictures, like a background image, into a theme which you can’t edit. Save them here
• default.php – This is the default file, for pages without a specific page type
• description.txt – Put the name and a short description in this file, just needed to make sure you’ll recognize your theme in concrete5
• full.php – Same as default.php, but this one is used by the pages of where you selected the page type “full”
• home.php – Another layout for page type “home”
• main.css – Save all your CSS rules in main.css
• thumbnail.png – An icon with the dimension 120×90 pixels which shows your theme
• typography.css – A second CSS with is used by the wysiwyg editor
• view.php – the layout for “single pages”.

All the files of your theme will be saved in a directory. This makes is quite easy, to copy a theme. You can install a theme by copying a directory and a single click in the dashboard.