Version vom 3. Oktober 2010, 16:54 Uhr

Beim Arbeiten mit Produkten, z.B. in Katalogen, kommt es häufiger vor, dass man das Registered(R)-Symbol verwenden muss. Für die Auftraggeber ist ein einfaches Weglassen des Zeichens keine Alternative, da diese Markenrechte viel Geld gekostet haben und es jeder sehen soll, dass das Produkt markenrechtlich geschützt ist.

Aufgabenstellung

Da das ® relativ zur Schrift meist hochgestellt verwendet wird, muss es bei jeder Eingabe extra formatiert werden. In HTML wird es dazu in die ^®-Tags eingeschlossen. Bei der Eingabe von laufendem Text ist das sehr lästig. Wenn das Zeichen beispielsweise in Titelfeldern im Backend verwendet wird, ist es normalerweise gar nicht möglich, HTML-Tags einzugeben, da Contao diese beim Speichern automatisch entfernt. Das kann man zwar mit Einträgen in der dcaconfig.php anpassen, es soll aber eine einfachere Möglichhkeit geben.

.

Lösungansätze

Hier mein Dank an die Kollegen aus dem IRC-Chat für die zahlreichen Ideen und Anregungen.

1. kleines JavaScript

Ein JavaScript würde nach dem Aufbau der Webseite hingehen und nachträglich die ® mit dem <sup>-Tag umschließen. Voraussetzung ist dabei, dass beim Betrachter im Browser JavaScript aktiviert ist.

2. über den Ausgabe-Hook mit einer kleinen Erweiterung

Diese Variante verspricht am meisten Erfolg, da hier die Webseite vor der Auslieferung entsprechend manipuliert werden kann. Es kostet natürlich etwas Überwindung, dafür eine Erweiterung zu schreiben, aber man wird weiter unten sehen, dass es gar nicht so schlimm ist.

3. Bei der Eingabe im Backend modifizieren

Man könnte auch das Backend derart modifizieren, dass eine Speicher-Callback-Routine die Aufgabe ausführt. Dann muss man aber dafür sorgen, dass auch beim Laden über einen Load-Callback die Anpassung erstmal herausgenommen wird, da der Save-Callback sie ja dann wieder einbaut. Außerdem wären diese Callbacks für viele Felder in vielen Modulen notwendig. Diesen Ansatz kann man also auslassen.

.

Erstellung eines kleinen Contao-Moduls

Es hört sich erstmal schwierig an, doch diese einfache Erweiterung macht nicht so viel Aufwand.

Man baut die Verzeichnispfade auf

• Dazu legt man im Verzeichnis system/modules ein Verzeichnis registeredR an.
• In diesem Verzeichnis legt man das Verzeichnis config an, was dann die Modulkonfiguration definiert.
• In das config-Verzeichnis kopiert man aus einem Backend-Modul eine .htaccess-Datei, die für die Sicherheit des Moduls wichtig ist. Die .htaccess überwacht, dass nur das PHP-Script zugreifen darf, ein direkter Zugriff aus den Web bleibt ausgesperrt.

Der Dateibaum des Moduls wird später so aussehen:

Dateibaum RegisteredR-Erweiterung

.

Konfigurationsdatei config.php erstellen

In einem UTF-8-fähigen Editor erstellt man die Datei config.php mit dem folgenden Inhalt und speichern sie im config-Verzeichnis ab.

<?php if (!defined('TL_ROOT')) die('You can not access this file directly!');
 
/**
 * Contao Open Source CMS
 * Copyright (C) 2005-2010 Leo Feyer
 *
 * Formerly known as TYPOlight Open Source CMS.
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation, either
 * version 3 of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, please visit the Free
 * Software Foundation website at <http://www.gnu.org/licenses/>.
 *
 * PHP version 5
 * @copyright  Leo Feyer 2005-2010
 * @author     Leo Feyer <http://www.contao.org>
 * @package    Backend
 * @license    LGPL
 * @filesource
 */
 
/**
 * -------------------------------------------------------------------------
 * HOOKS
 * -------------------------------------------------------------------------
 *
 * Hooking allows you to register one or more callback functions that are 
 * called on a particular event in a specific order. Thus, third party 
 * extensions can add functionality to the core system without having to
 * modify the source code.
 * 
 *   $GLOBALS['TL_HOOKS'] = array
 *   (
 *       'hook_1' => array
 *       (
 *           array('Class', 'Method'),
 *           array('Class', 'Method')
 *       )
 *   );
 * 
 * Use function array_insert() to modify an existing hooks array.
 */
$GLOBALS['TL_HOOKS']['outputFrontendTemplate'][] = array('ModuleRegisteredR', 'registeredR');
 
?>

Ganz wichtig ist, dass in der Datei vor dem <?php und nach dem ?> keine Zeichen oder Zeilenumbrüche stehen, da es sonst zu PHP-Fehlern in der Ausgabe kommt.

Das wichtige in dieser Datei ist die Zeile ganz unten:

$GLOBALS['TL_HOOKS']['outputFrontendTemplate'][] = array('ModuleRegisteredR', 'registeredR');

Damit meldet man das Programm registeredR aus der PHP-Klasse ModuleRegisteredR beim outputFrontendTemplate-HOOK an.

.

Moduldatei ModuleRegisteredR.php erstellen

Es ist ja klar, dass das registrierte Programm auch zur Verfügung stehen muss. Daher wird jetzt das Modulprogramm mit folgendem Inhalt erstellt:

<?php if (!defined('TL_ROOT')) die('You can not access this file directly!');
/**
 * Contao Open Source CMS
 * Copyright (C) 2005-2010 Leo Feyer
 *
 * Formerly known as TYPOlight Open Source CMS.
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation, either
 * version 3 of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, please visit the Free
 * Software Foundation website at <http://www.gnu.org/licenses/>.
 *
 * PHP version 5
 * @copyright  Leo Feyer 2005-2010
 * @author     Leo Feyer <http://www.contao.org>
 * @package    Backend
 * @license    LGPL
 * @filesource
 */
 
 
/**
 * Class ModuleRegisteredR
 *
 * @copyright  Softleister 2010
 * @author     Hagen Klemp <http://www.softleister.de>
 * @package    Controller
 */
class ModuleRegisteredR extends Backend
{
    public function registeredR($strContent, $strTemplate)
    {
        return str_replace( '®', '<sup>®</sup>', $strContent );
    }
}
 
?>

Auch hier muss wieder darauf geachtet werden, dass die Datei in UTF-8 gespeichert wird.

Der Kern der Datei ist eine kleine Programmdefinition passend zum HOOK:

class ModuleRegisteredR extends Backend
{
    public function registeredR($strContent, $strTemplate)
    {
        return str_replace( '®', '<sup>®</sup>', $strContent );
    }
}

Hier wird die Klasse ModuleRegisteredR definiert, die in der config-Datei dem HOOK angemeldet wurde. In dieser Klasse, die die vorhandene Klasse Backend erweitern soll, ergänzt man nur eine Funktion registeredR. Die Aufruf-Parameter der Funktion sind durch die Definition des HOOK in Contao vorgegeben und beschrieben.

Man bekommt in der Variablen $strContent die komplette Webseite und muss im return den veränderten Inhalt an Contao zurückgeben. Die Aufgabe ist nur das Umschließen des ® mit <sup>-Tags, also kann man mit der PHP-Funktion str_replace einfach das Zeichen ® auf der gesamten Webseite gegen einen String mit sup und Zeichen austauschen und den veränderten String zurückgeben.

.

CSS für die bessere Darstellung

Eigentlich kann HTML das ® jetzt allein formatieren, da es bei der Ausgabe durch den <sup>-Tag hochgestellt ist. Durch eine kleine zusätzliche CSS-Definition läßt sich aber noch mehr eigener Einfluss auf die Darstellung erreichen.

sup
{
	font-size:.8em;
	line-height:1em;
}

Hinweis von Datenkind: Durch ein geschicktes CSS läßt sich sogar der Zeilenabstand im Fließtext konstant halten, der eigentlich durch das Hochstellen vergrößert wird. (Der Selektor _vertical-align soll den IE6 besänftigen)

sup
{
	height:0;
	bottom:0.5em;
	position:relative;
	vertical-align:baseline;
	_vertical-align:bottom;
	font-size:.8em;
	line-height:1;
}

Quelle

.

Das war's - doch nicht so schwierig, wie gedacht

-- do_while - 2010-08-14