But at the end it’s up to you, both solutions can work just fine!

Using SooperFish is also a bit easier for us, you’ll see at the end of the tutorial how little code you needed.
At the end your navigation can look like this:

Prerequisite to create your drop down menu

It’s rather simple, the only thing you need is the jQuery drop down plugin called SooperFish. You can find a link to download it on this page: http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus.

Once you’ve got the ZIP file, extract all the files into a folder of your choice, we’ll later use some (not all) files from it.

Creating a new block template

If you worked with concrete5 before you’ll probably know that you should never modify any files located in the “concrete” directory. It’s part of the CMS core which gets overwritten whenever you update to a newer version of concrete5. Luckily this isn’t necessary for lots of things! We can easily create an addon, or a block template in this case, without touching the core at all.

In the root of your website, open the folder called “blocks” and go though these steps:

• Create a folder called “autonav”
• Within “autonav”, create a folder called “templates”
• Within “templates”, create a folder called “sooperfish”
• In the last directory you created, “sooperfish”, create a file called “view.php” and put the following content in it:

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

<?php 
$bvt = new BlockViewTemplate($b); 
$bvt->setBlockCustomTemplate(false);
 
function callback($buffer) 
{
  return (str_replace('class="nav"', 'class="sf-menu" id="nav"', $buffer));
}
 
ob_start("callback");
include($bvt->getTemplate());
ob_end_flush();
?>

Background information about the autonav template view.php

What does this template do?

Since the HTML structure needed by SooperFish is almost identical with the default autonav template, we don’t copy the whole template which would create a lot of redundant information. Instead we include the default template in our new template. However, there are still a few things we modified. The original template has an element like this:

<div class="nav">

but we want this:

<div class="sf-menu" id="nav">

Having this element allows us to use the default CSS files shipped with the Sooperfish plugin. You could modify the CSS files as well and remove all the output buffering functions in the code above.

• Create another file in the same directory called “view.js” and put this content in it:

1
2
3

$(document).ready(function() {
   $('.sf-menu').sooperfish();
});

• In the directory where you created “view.php” and “view.js”, create another directory called “js”
• From the SooperFish ZIP, copy “jquery.sooperfish.min.js” and “jquery.easing-sooper.js” into the “js” directory.
• On the same level as “js”, create another directory called “css”
• From the Sooperfish ZIP, copy “sooperfish.css” and “sooperfish-theme-black.css” into the directory called “css”

We’ve already created and copied all the files we need, the only thing we have to do is to make sure our new template is used. Your file structure should look like this now:

Go to your page and start editing the page and modify the autonav block to make these settings:

It’s important that you select “Display all” in both “Sub Pages To Display” and “Sub-Page Levels”. When you work with a JavaScript based navigation you usually print all the items into the HTML output, but hide some of them using JavaScript. Click on Update when you’re done and click on the block you modified again, but this time select “Custom Template” and select “Sooperfish” and click on “Update” again.

Publish the changes and you’ll see your new drop down navigation!

If you ever had a closer look at the file manager you’ve probably seen that if you open the file properties, you can see a small statistics about the downloads of a file. This is quite nice but what if you wanted to see how many file downloads there are in total? Right now, there’s no such report available in concrete5 which is why we’re going to build the first part of such an addon.

It will use some AJAX to switch between different views, allowing us to extend it even further in the future. At the end you’ll have an additional page in the reports section like this:

This article uses a few different elements of concrete5, having some experience with blocks, templates, themes and packages is highly recommended. I’m not going to explain every detail but I’m happy to answer questions in case something’s missing.

First, let’s have a look at the package installer:

<?php    
defined('C5_EXECUTE') or die(_("Access Denied."));
 
class RemoFileReportPackage extends Package {
 
   protected $pkgHandle = 'remo_file_report';
   protected $appVersionRequired = '5.4';
   protected $pkgVersion = '1.0';
 
   public function getPackageDescription() {
      return t("Adds a file download statistic report");
   }
 
   public function getPackageName() {
      return t("File Report"); 
   }
 
   public function install() {
      $pkg = parent::install();
 
      Loader::model('single_page');
 
      $sp = SinglePage::add('dashboard/reports/remo_file_report', $pkg);
      $sp->update(array('cName' => 'File Report', 'cDescription'=>'File Download Statistic'));
   }
 
}
?>

As you can see, the package controller is pretty small. Beside the usual package information fields and methods, we only override the install method to add a custom page located at /dashboard/reports/remo_file_report. By adding out page beneath the dashboard reports, we’ll automatically see our new page as a new register in the dashboard. Nothing else has to be done in order to make sure the page appears where it should.

Page controller & view

Since we’re adding a new page, we’ll have to add a controller as well as a file for the single page output. First, we create a file in packages/remo_file_report/controllers/dashboard/reports/remo_file_report.php with this content:

<?php 
defined('C5_EXECUTE') or die("Access Denied.");
 
class DashboardReportsRemoFileReportController extends Controller {
 
   public function view() {	
   }
 
   public function on_start() {
      $html = Loader::helper('html');
      $this->addHeaderItem($html->css('remo.filereport.css', 'remo_file_report'));
      $this->addHeaderItem($html->javascript('remo.filereport.js', 'remo_file_report'));
   }
}
?>

Again, this file is small, we only make sure that our CSS and JavaScript file are properly included in the head of the page. If you’ve created single pages before, you’ve probably added some code to the view method in order to pass some data to the output of the single page. In our case, this is not necessary since we load our content with the help of AJAX.

Next, create a file for our output packages/remo_file_report/single_pages/dashboard/reports/remo_file_report.php and put this content in it:

<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
 
<h1><span><?php echo t('File Download Statistics')?></span></h1>
 
<div class="ccm-dashboard-inner">
      <div id="remo-file-report-links-1">
      <a href="#" data-action="day"   class="remo-file-report-link" id="remo-file-report-week"><?php echo t('Day')?></a>
      <a href="#" data-action="week"  class="remo-file-report-link" id="remo-file-report-week"><?php echo t('Week')?></a>
   </div>
 
   <div id="remo-file-report-content">
 
   </div>
</div>

Besides a caption and two links to switch between the two views “day” and “week”, there’s only an empty DIV element with the id “remo-file-report-content” where we’re going to add some content with the help of a little JavaScript.

CSS to format File Report

In the page controller, we’ve included two files, one for a few basic styles and one for the AJAX logic. Let’s create the CSS file first at this location packages/remo_file_report/css/remo.filereport.css:

#remo-file-report-links-1 a {
   margin-right: 10px;
}
#remo-file-report-content table {
   margin-top: 10px;
}
#remo-file-report-content th {
   text-align: left;
   background: #ddd;	
}

JavaScript and PHP backend file to handle the AJAX procedures

The next file is the one which holds all the JavaScript and thus the AJAX magic. It has to be created here packages/remo_file_report/js/remo.filereport.js:

$(document).ready(function() {
   $(".remo-file-report-link").click(function() {
      $.post(CCM_TOOLS_PATH + "/../packages/remo_file_report/get_data/", {action: $(this).attr("data-action")}, function(data) {
         // select the correct renderer to print the data
         switch (data.data.renderer) {
            case "table":
               var rowHeader = "";
               var tableBody = "";
               var rowHeaderPrinted = false;
 
               // loop through all rows
               for (var rowKey in data.data.tableData) {
                  var rowData = data.data.tableData[rowKey];
 
                  tableBody += "<tr>";
 
                  // loop through all columns
                  for (var colKey in rowData) {
                     if (!rowHeaderPrinted) {
                        rowHeader += "<th>" + colKey.replace('_',' ') + "</th>"; 
                     }
 
                     tableBody += "<td>" + rowData[colKey] + "</td>";
                  }
                  tableBody += "</tr>";
 
                  rowHeaderPrinted = true;
               }
 
               // put generated markup in DIV
               $("#remo-file-report-content").html("<table><tr>" + rowHeader + "</tr>" + tableBody + "</table>");
 
               break;
            default:
               alert("Unsupported rendered: " + data.data.renderer);
         }
      }, "json")
   });
});

In this file we’re doing the following things:

• Set an event which is executed when the user clicks on the links (day or week)
• Execute an AJAX call by using $.post
• Once we get the result back, we’re detected the correct rendered. Right now, there’s just “table” but this could be extended to create a different output type like a chart
• We then loop though all the data we’ve gotten from the AJAX tool
• Last, we’re going to add the generated content to our DIV element with the ID remo-file-report-content

Our AJAX call uses a file which we’re accessing using this URL: CCM_TOOLS_PATH + “/../packages/remo_file_report/get_data/”. This file is located in the tools folder of our package which is probably the most common way in concrete5 to generate data for an AJAX script. Create a new file at this location packages/remo_file_report/tools/get_data.php and put this content in it:

<?php
defined('C5_EXECUTE') or die("Access Denied.");
 
$ret['error'] = false;
try {
   $jh = Loader::helper("json");
   Loader::model("remo_file_report", "remo_file_report");
 
   // make sure the user is allowed to access the file download statistic.
   $p = new Permissions(Page::getByPath('/dashboard/reports/remo_file_report'));
   if (!$p->canRead()) {
      throw new Exception(t('Not allowed to access the JSON tools to fetch the file statistics.'));
   }
 
   // execute action to get the file download data
   $action = $_REQUEST['action'];
   $actionObject = RemoFileReportModel::getActionInstance($action);
   $ret['data'] = $actionObject->getData();
}
catch (Exception $ex) {
   $ret['error'] = $e->getMessage();
}
 
echo $jh->encode($ret);
?>

What’s in this file?

• We load two elements, the JSON helper because we’re going to return our data in this format,
• the remo_file_report model which is where we put all the database logic
• We also make sure that only users who are allowed to access the dashboard page are allowed to use this file. Without this check it would be possible to access our download statistics by using a direct URL, even if one doesn’t have the permission to do so.
• Next, we’re going to call a method from our model from which we’ll get all the data
• Most of the file has been wrapped in a try…catch block. This is helpful because if you format data in JSON you won’t be able to parse the output in your JavaScript if there’s a PHP error message. By using a try and catch block, we can handle all the possible errors and pass them on to our JavaScript where we can show them to the user
• At the end we’re going to use the JSON helper from concrete5 to return the data echo $jh->encode($ret);

Model to fetch Download Statistics from the database

The only file that’s missing now, is the model which we’re calling from the “tool” to get our download statistics out of the database. Create this file packages/remo_file_report/models/remo_file_report.php with this content:

<?php
defined('C5_EXECUTE') or die("Access Denied.");
 
class RemoFileReportModel {
   public static function getActionInstance($action) {
      switch ($action) {
         case 'day':
            return new RemoFileReportDay();
            break;
         case 'week':
            return new RemoFileReportWeek();
            break;
         default:
            throw new Exception(t('Unsupported action in model remo_file_report.php.'));
      }
   }
}
 
interface IRemoFileReport {
   public function getData();
}
 
class RemoFileReportDay implements IRemoFileReport {
   public function getData() {
      $db = Loader::db();
      $ret['renderer'] = 'table';
      $ret['tableData'] = $db->GetAll('SELECT fv.fvFilename Filename,count(*) Download_Count
         FROM DownloadStatistics ds INNER JOIN FileVersions fv ON ds.fID=fv.fID AND ds.fvID=fv.fvID
         WHERE date(timestamp) = CURRENT_DATE
         GROUP BY fv.fID, fv.fvID, fv.fvFilename
         ORDER BY count(*) DESC');
 
      return $ret;
   }
}
 
class RemoFileReportWeek implements IRemoFileReport {
   public function getData() {
      $db = Loader::db();
      $ret['renderer'] = 'table';
      $ret['tableData'] = $db->GetAll('SELECT fv.fvFilename Filename,count(*) Download_Count
         FROM DownloadStatistics ds INNER JOIN FileVersions fv ON ds.fID=fv.fID AND ds.fvID=fv.fvID
         WHERE YEARWEEK(timestamp) = YEARWEEK(CURRENT_DATE) 
         GROUP BY fv.fID, fv.fvID, fv.fvFilename
         ORDER BY count(*) DESC');
 
      return $ret;
   }
}
?>

This file is a bit bigger but doesn’t do a lot at all, what’s in it?

• The getActionInstance method in the RemoFileReportModel class simply returns the proper class matching the requested action. Splitting every action into a different class isn’t necessary but could be helpful once we add more parts to our report
• Since we’ve splitted our actions into classes, we also define an interface to assure that action classes implement the necessary getData method
• The two classes RemoFileReportDay and RemoFileReportWeek are almost identical, the just execute a simple SQL command to fetch the data and return it as an array

Download and next steps

After all these words, you can download the code and extract it to the “packages” directory of your concrete5 site and install it by using the “Add Functionality” section in the dashboard”.

Download File Report Add-On

This Add-on isn’t complete, as you’ve seen on the screenshot at the beginning of this post, you can’t find a lot of information in the output. A few things which are missing:

• Pictures are often helpful to get a first and quick impression, some charts would be nice
• Different sections to split information into different parts of the report
• Automatically display a statistic, right now you have to click on day or week in order to see something
• An export which produces an XLS(X) or PDF report
• Some information about the file types maybe

And a lot more! I’m you have a lot of ideas yourself, if you want to add something or have any questions about this code / tutorials, don’t hesitate to leave a comment!

As already mentioned on the screenshot, these settings improve the performance by caching various outputs generated by blocks. In order to get the most out of your own blocks, you should look into this feature a bit closer. Think about this: How does concrete5 know that the output of a block can be cached? It can’t!

Block Cache Options

If you already created your own blocks in the past, your should be familiar with the BlockController. You probably also specified properties like $btTable and $btInterfaceWidth. Now, there are a few more properties you can set. Look at the following start of a BlockController:

class MusicBlockController extends BlockController {
   protected $btInterfaceWidth = 450;
   protected $btInterfaceHeight = 430;
   protected $btTable = 'btMusicPlayer';
   protected $btCacheBlockRecord = true;
   protected $btCacheBlockOutput = true;
   protected $btCacheBlockOutputOnPost = true;
   protected $btCacheBlockOutputForRegisteredUsers = true;
   protected $btCacheBlockOutputLifetime = 60*30; // 30 minutes

There are a number of variables starting with btCache. All of them are related to the new cache functionality of concrete5. They let you specify if the content changes once a user is logged in ($btCacheBlockOutputForRegisteredUsers) they let you tell concrete5 if the content stays the same if the page is opened using the POST method allowing the cache to be enabled during a form post too ($btCacheBlockOutputOnPost).

You probably won’t be able to measure a huge impact if you’re block doesn’t have to process lots of data in order to print the output. But if there’s a complex method in the background of your block you can use these variables to easily control the cache of the output making your site feel faster.

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
13

function onEnterField() {
   if ($(this).attr('origLabel') == null)
      $(this).attr('origLabel', $(this).val());
   if ($(this).attr('origLabel') == null || $(this).attr('origLabel') == this.value)
      $(this).val("");
 
 
	$(this).prev(".formError").slideUp();
}
function onLeaveField() {	
   if ($(this).val() == '' && $(this).attr('origLabel') != null)
      $(this).val($(this).attr('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!