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!

• They check if a file is available at /favicon.ico
• They check if a proper link tag has been set:<link rel="shortcut icon"
href="http://www.oraclerecipes.com/oraclerecipesicon.ico" />

But what happens if you don’t do anything of the above? The browser will still try to search for favicon.ico. While you don’t even see that when you open your browsers console, the webserver will notice that. If you check your webservers log file, you’ll find something like this:

www.oraclerecipes.com 88.222.33.111 - - [04/Sep/2011:08:09:23 +0200] "GET /favicon.ico HTTP/1.1" 404 751 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1"

The concrete5 URL rewriting rules check if the requested path is a static file but since it doesn’t exist, the request is forwarded to the dispatcher. This means that concrete5 will search through its database to see if there’s a concrete5 page available at /favicon.ico but obviously won’t return anything else but “Page not found”. This database lookup can easily consume 100ms which isn’t a lot but assuming you’ve got a busy site, this is probably still something you’d like to get rid!

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.

Some of you guys sent me messages telling me that they wish I’d still be as active in the Concrete5 community as I was a while ago. I was really great to hear that, it’s always good to know that someone appreciates your work. However, truth is, I’m still quite active, just not so much in the forums – there’s a good reason or two for that!

First, I have been rather busy doing Oracle and ERP related work which has nothing to do with Concrete5 at all. However, I’ve been spending quite a few evenings, nights and weekends working on a huge tutorial about Concrete5, more like a “book”! I was contacted by Packt Publishing in June and stared writing shortly after that. I’m currently working on the drafts of the last chapters, I’ll then go through the reviews and after that the people are Packt are going to make sure that everything looks and reads smoothly. However, you can already get access to the first chapters because the book has been accepted as a RAW book, just have a look at https://www.packtpub.com/create-and-customize-your-own-website-with-concrete5-beginners-guide/book. You’ll get access to each chapter as it gets written in an unfinished state.

The book is aimed for people knowing web technologies like PHP, JavaScript, HTML and CSS but without Concrete5 experience. It starts rather easy, for some of you too easy I assume but different readers, different skills. It the continues with a custom theme and lots of custom templates for some Concrete5 core blocks. We then look at building blocks, packages and a simple dashboard extension which allows you to have a look and modify your files on the server. Making it easier (and a bit dangerous) to quickly modify your Concrete5 configuration or theme files if you’re out on business without having the FTP credentials with you.

I hope you like it! The final and printed book is expected to be available in April!

Writing a Book

A few words about my experience writing a book. First of all, I had quite a few doubts, especially since English is not exactly my first language. I knew that I could explain myself in English in a way most people understand what I’m trying to say but still.. The people at Packt convinced me that this is not going to be a problem, especially since you never write a book which gets printed without having someone else having a look at it.

After my first doubts, things started very quickly and have gotten a bit stressful from time to time. There’s a deadline for each chapter to assure that everyone involved in the project is able to do their part in time. Working on a book like I do isn’t a fulltime job, for most authors at Packt it’s an evening and weekend job. This makes it sometimes a bit hard to meet all the deadlines with the result that things can be a bit stressful, especially if some unexpected things happen, at work or in your personal life. Nonetheless, I think it’s absolutely worth the effort, the imagination of finding your own book in your postbox or your favorite bookstore is awesome and drives you to keep working on the book.

Having a tight deadline for every chapter can also be really helpful, especially if you’re a bit like me. Whatever I do, I’d like to spend as much time on it as possible to get the best result possible. It also doesn’t happen very often that I think something is perfect… No matter what I do, having a limited amount of time is beneficial. Whenver I wrote a tutorial I told someone that it’s going to be online the next day and it usually was. Being on time is rather important, probably a disease I’ve got due to the fact that I’m Swiss. It’s pretty much the same with the book, you start writing on a chapter and the closer you get to meet the deadline, the more stressful things are but you feel reliefed once you’ve sent the mail, even if you don’t think your work’s as good as it should be.

If you ever get the chance to write a book, make sure you like writing, make sure you have some time or be prepared to sleep less It’s a great experience!

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:

Dialog

The following screenshot shows you the dialog you can use to enter the information related to the expand block. There’s a special feature which I haven’t seen before – you can select the template while adding a new block. No need to open a second dialog!

Updates / Contribution

If you have some nice arrows/layouts. Please contact me! I’d be happy to add them to this block which we could later publish on the Concrete5 Marketplace once it contains a few nice layouts!

Download / Installation

Download block here.

Extract the zip file into /blocks/ and make sure you keep the directory “remo_expand”. It’s not a package yet and therefore must be extracted to blocks and not packages!

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!