PHP (22)


concrete5 – AJAX Add-on to display File Download Statistics

Today’s article is about concrete5 again after a long time without anything about concrete5 on codeblog.ch. The example we’re going to look at takes a few ideas and code snippets from my book about concrete5.

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:




concrete5 – Performance Improvement with Block-Cache

There has been an interesting feature in concrete5 which can improve your sites performance noticeably. If you log in to your site and look at the Sitewide Settings screen, you can see this box:

concrete5 full page cache settings

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.




Concrete5 – Using TinyMCE Templates

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

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

TinyMCE Configuration

You’ll find almost anything you have to know on this page: 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!




Angepasste 404 Seite mit Concrete5Concrete5 – Custom 404 page

Es sollte nicht oft vorkommen, aber manchmal landen Internetseiten Besucher auf einer nicht vorhandenen Seite. Oft wird dann eine simple Seite angezeigt mit dem Hinweis dass die Seite nicht verfügbar ist. Etwas mehr Informationen können da hilfreich sein. Besonders wenn eine Seite einem kompletten Redesign unterzogen wurde, kommt es vor, dass Google Besucher auf nicht vorhandene Seiten schickt. In diesem Tutorial geht es um die Anpassung der “Standard 404-Seite”.

Concrete5 erlaubt es, ohne grossen Aufwand die 404-Seite anzupassen. Allerdings gibt es ein paar Dinge die man kennen muss. Als Ausgangslage dient diese Seite – die Standard Concrete5 404-Seite:

pagenotfound

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

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

pagenotfound




Bilder in der NavigationImage Navigation Items

Concrete5 Navigation mit Bildern – der autonav Block erlaubt es sehr einfach und schnell eine hierarchische Seitenstruktur zur Navigation einzufügen. Sollen jedoch nicht Text-Links, sondern Bilder angeklickt werden, braucht es etwas mehr Arbeit.

In diesem Tutorial werde ich ein “Custom Template” für den autonav Block erstellen, welches ein Attribut von einer Seite ausliest um ein Bild anstelle des Textes anzuzeigen.

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

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




Concrete5 – Form stylingConcrete5 – Formular Layout anpassen

Concrete5 bietet einen netten Form Block, mit dem man Formulare in wenigen Sekunden erstellen. Dies ohne HTML oder PHP Kenntnisse. Unglücklicherweise lässt sich der HTML Code davon, nur schlecht mit CSS anpassen. In diesem Tutorial zeige ich, wie man ein Formular in diesem Stil erstellen kann:

Styles Form

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

Styles Form




Vorschau Text mit PHPSmart text trimming with PHP

Möchte man einen kurzen Vorschautext in PHP erstellen, der einen Anriss des effektiven Textes zeigt, so wird man wohl oft die einfachste Variante gewählt haben, und einfach nach einer Anzahl definierten Zeichen abgeschnitten haben. Dies generiert jedoch ein unschönes Ergebnis, wenn man eine proportionale Schrift verwendet. Sämtliche Text haben markant unterschiedliche Längen wie auf diesem Bild gezeigt wird:

text-trimming

Dieser Artikel zeigt einen einfachen Ansatz, diese Problematik etwas eleganter zu lösen!

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

text-trimming

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




Concrete5 – Team Datenbank in TabelleConcrete5 – Staff listing with two Columns

In vielen Fällen soll eine Internetseite Elemente enthalten, die in zwei Spalten dargestellt werden sollen. In diesem Tutorial beschreibe ich einen sehr einfachen Block, um ein Bild einer Person anzuzeigen, so dass die Beschreibung rechts vom Bild dargestellt wird.

Das Ergebnis schaut folgendermassen aus:

staff1

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

staff1




Concrete5 Templates

Concrete5 Templates erstellen ENGLISH

Das CMS System Concrete5 bietet die Möglichkeit, für bestehende Blocks aus dem Core, dem Teil von Concrete5 der nicht verändert werden sollte, ein eigenes Template zu erstellen. Dadurch hat man die Möglichkeit das Layout komplett anzupassen, sollte CSS nicht mehr genügen.

Concrete5 Custom Templates DEUTSCH

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.




Einstieg in Ruby (on Rails)

Schon länger liest und hört man viel von Ruby, vorallem von Ruby on Rails. Man will sich als Programmierer ja schliesslich auf dem laufenden halten, so auch ich. Die Prioritäten haben den Ruby Start oft verschoben, als nun aber Redmine bei einem Projekt zum Einsatz kommen wird, und je nach Ergebnis in Zukunft auch bei anderen Projekten, wurde es doch Zeit mit Ruby on Rails zu starten!