Das Designerhandbuch erklärt den Umgang mit HTML-Vorlagen (Templates) und erläutert die Verwendung der Smarty Template Engine.

Allgemeines

Dieses Handbuch in erster Linie für Webdesigner ausgelegt, daher verzichten wir auf eine Einführung in die Programmierung von HTML-Seiten und setzen ein entsprechendes Basiswissen voraus. Bei Fragen zu (X)HTML, Javascript oder CSS empfehlen wir den Besuch auf z.B. SelfHTML bzw. CSS4you oder verweisen auf entsprechende Fachliteratur.

Einführung

Wie integriere ich ein fertiges Design in das CMS?

Das Haupttemplate
beinhaltet den kompletten Aufbau und das Design Ihrer Website. Dieses ist im ersten Schritt eine einfache HTML-Datei, die Stylesheets und Bilder verwendet. Es wird bei jedem Aufruf der Seite geladen und bildet quasi das Grundgerüst ihrer Website.

Die Template-Bereiche
sind variable Bereiche im Haupttemplate wie z.B. linke Navigation, Inhaltsbereich, rechte News-Spalte usw.. Diese Bereiche sollen sich ändern, je nach dem, auf welcher Seite der Besucher sich gerade befindet.

Die Platzhalter
dienen zum gezielten Platzieren von Informationen in Ihrem Auftritt. Über ein Skript können diese nach Belieben befüllt und auf der Website nach Wunsch positioniert werden.

Die Seitentypen
bestimmen, wie eine Seite im Frontend aussehen hat. So kann z.B. eine Startseite eine Auflistung von News beinhalten, wobei eine Standardseite nur Titel, Kurzbeschreibung und den eigentlichen Inhalt ausgeben soll. Zwar bleibt das grobe Grundgerüst des Auftritts fest, die einzelnen Bereiche können jedoch unterschiedlich aussehen. Das jeweilige Erscheinungsbild wird in sogenannten "Templates" einmal pro Seitentyp (Vorlage) festgelegt.

Zusammengefasst:

Sie erstellen einen fertigen Auftritt in purem (X)HTML
definieren variable Bereiche in Ihrem Auftritt, die sich ändern dürfen (z.B. eine linke Navigation, der Inhaltsbereich usw... ) und
setzen Platzhalter für diese Bereiche ein.

Trennung von Design und Inhalt

Eine der Stärken vom EGOTEC^® CMS ist die klare und schlichte Trennung von Design und Inhalt.

Für jeden Seitentypen kann der Designer ein individuelles Layout (Template) entwerfen; dieses kann anschließend für beliebig viele Seiten verwendet werden. Zum anderen können Redakteure die Inhalte der einzelnen Seiten mit EGOTEC^® einpflegen, ohne sich über das Layout Gedanken machen zu müssen. Damit sind für den Redakteur auch keinerlei Programmierkenntnisse erforderlich.

trennung_layout_design

EGOTEC Templates

Templates

Templates bestimmen das Erscheinungsbild eines Seitentyps.

Die Verzeichnisstruktur

Alle Dateien, die das Aussehen der Website betreffen, liegen immer zentral im skin-Verzeichnis. Verwendet der Mandant als Design "demo", finden Sie dazugehörende Templates im Verzeichnis skin/demo/.

demo_verzeichnis

Die Verzeichnisse "page" und "contact" stehen für entsprechende Seitentypen. Sie beinhalten das seitentypspezifische Template (body.html).

Wie Sie einen neuen Seitentyp erstellen, entnehmen Sie bitte dem Entwickler-Handbuch.

Das Haupttemplate

Das Haupttemplate liegt in skin/MANDANT/index.html und ist das zentrale Grundgerüst der Website, sprich: Das globale Design.

Hier bestimmt der Designer, wie die Webseite aussieht und aufgebaut ist, welche Spalten verfügbar sind und wo welcher Inhalt angezeigt werden sollen.
Das Haupttemplate wird bei jedem Seitenaufruf geladen.

Beispiel

Logo	Hauptnavigation
Navigation	Inhalt
	Fusszeile

Die blauen Bereiche würden dabei über die index.html definiert werden, da sie für alle Seiten mehr oder weniger identisch sind.
Der grüne Bereich wird je nach Seitentyp durch die dazugehörige body.html definiert.

Bestandteile der Webseite, die sich auf allen Seiten wiederholen, sollten ebenfalls in die index.html eingebunden werden, um so ein einheitliches Design zu gewährleisten. Für ein einheitliches Design sorgt auch eine CSS Style Sheet Datei, die man in der index.html einbindet. Wir bevorzugen die Einbindung von Style Sheet Definitionen als Datei, da die so erzeugten HTML-Seiten schlank bleiben.

Platzhalter für Seitentyp-Templates

Damit ein seitentypspezifisches Template eingebunden werden kann, stellt das System automatisch die Variable {$typeTemplate} zu Verfügung. Dieser Platzhalter muss im Haupttemplate an gewünschter Stelle positioniert werden.

QuelltextHTML Code:

<div id="inhalt">
{if $typeTemplate} {* prüfen, ob eine Template vorhaden ist *}
{include file=$typeTemplate} {* wenn ja, dieses Template einbinden *}
{else}
{$page->field.content} {* ansonsten der Inhalt anzeigen *}
{/if}
</div>

Beispiel (index.html)

Eine einfache index.html könnte wie folgt aussehen:

QuelltextHTML Code:

<html>
<head>
<link rel="shortcut icon" href="{$url_dir}skin/<mandant>/favicon.ico" />
<link type="text/css" rel="stylesheet" href="{$url_dir}skin/{$site->skin}/style.css" />
</head>
<body>
<table>
<tr>
<td>
<img src="{$url_dir}/skin/{$site->skin}/img/logo.jpg">
</td>
<td>
{navigation id=$site->rootId var=hauptnavigation}
{foreach from=$hauptnavigation item=seite}
<a href="{page_url page=$seite}">{$seite->field.name}</a>  
{/foreach}
</td>
</tr>
<tr>
<td>
{navigation page=$page show=true var=navigation}
{foreach from=$navigation item=seite}
<br/><a href="{page_url page=$seite}">{$seite->field.name}</a>
{/foreach}
</td>
<td>
<div id="inhalt">
{if $typeTemplate}
{include file=$typeTemplate}
{else}
<h2><a name="top">{$page->field.title}</a></h2>
<p><i>{$page->field.short|nl2br}</i></p>
<p>{$page->field.content}</p>
{/if}
</div>
</td>
</tr>
</table>
</body>
</html>

Beispiel (HEAD-Bereich)

Die Seite lässt sich im Editor einfach nicht speichern.

Wie jede normale HTML-Datei verfügt auch die index.html über einen Kopf-Bereich in dem verschiedene Meta-Daten hinterlegt werden können.

EGOTEC bietet einige Platzhalter an, die speziell für den HEAD-Bereich gedacht sind.
Ein vollständiger HEAD-Bereich könnte dann wie folgt aussehen :

QuelltextHTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$site->language}" lang="{$site->language}">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>{if $page->extra.meta_title}{$page->extra.meta_title}{else}{$page->field.title|escape:"html"}{/if}</title>
<meta http-equiv="content-language" content="{$site->language}" />
<meta name="description" lang="{$site->language}" content="{if $page->extra.meta_descr}{$page->extra.meta_descr|escape:"html"}{else}{$site->site.description|escape:"html"}{/if}" />
</head>

Der Seitentitel

QuelltextHTML Code:

<title>{if $page->extra.meta_title}{$page->extra.meta_title}{else}{$page->field.title|escape:"html"}{/if}</title>

In diesem Beispiel wird das Titel-Feld der aktuellen Seite auch als Titel des Browser verwendet. Hier sind natürlich andere Kombinationen möglich.
Außerdem wird an dieser Stelle geprüft, ob auf dem Meta-Reiter (im Administrationsbereich der Seite) das Feld "Titel im Browser" befüllt wurde. Falls ja, wird dieser Titel verwendet.

Die Meta-Angaben

QuelltextHTML Code:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Der content-type sollte auf jeden Fall auf text/html; charset=UTF-8 gesetzt werden, da EGOTEC komplett auf UTF-8 ausgelegt ist.

QuelltextHTML Code:

<meta http-equiv="content-language" content="{$site->language}" />

Die Sprache der dargestellten Seite kann dynamisch über {$site->language} gesetzt werden. Bei mehrsprachigen Auftritten wird damit immer die korrekte Sprache gesetzt.

QuelltextHTML Code:

<meta name="description" lang="{$site->language}" content="{$site->site.description|escape:"html"}{$page->extra.meta_descr|escape:"html"}" />

Die Beschreibung der Seite werden die Platzhalter {$site->site.description} und {$page->extra.meta_descr} verwendet.

Der Platzhalter {$site->site.description} entspricht dabei der global hinterlegten Beschreibung (unter: Verwaltung->Konfiguration->Mandant->Allgemein).
{$page->extra.meta_descr} hingegen zeigt die Beschreibung auf dem Meta-Reiter der jeweiligen Seite.

Je nach Bedarf können Sie an dieser Stelle gerne beide Platzhalter kombinieren (siehe Beispiel) oder über eine {if}-Kontrollstruktur nur einen verwenden

QuelltextHTML Code:

<meta name="keywords" lang="{$site->language}" content="{if $page->extra.meta_keys}{$page->extra.meta_keys|escape:"html"}{else}{$site->site.keywords|escape:"html"}{/if}" />

Die Schlüsselwörter verhalten sich ähnlich wie die Beschreibung der Seite. Auch diese können aus den speziellen Schlüsselwörtern der Seite und/oder aus den globalen Einstellungen generiert werden.

QuelltextHTML Code:

<meta name="date" content="{$page->field.c_date}" />

Das Aktualisierungs-Datum der Seite kann leicht über einen Platzhalter (Datum der letzten Änderung) positioniert werden.

QuelltextHTML Code:

<meta name="robots" content="{$site->site.robots}" />

Die Anweisungen für Suchmaschinen-Robots können aus den Einstellungen des Mandanten übernommen werden. Die enstprechende Seiteneinstellung aus dem Meta-Reiter kann über den Platzhalter {$page->extra.meta_robots} verwendet werden.

QuelltextHTML Code:

<meta name="generator" content="{$generator}" />

Über den Platzhalter {$generator} wird die aktuelle Version von EGOTEC als Generator der Webseite angeben.

Favicons

QuelltextHTML Code:

<link rel="shortcut icon" href="{$url_dir}skin/{$site->skin}/favicon.ico" />

Über diese Zeile wird ein individuelles FAVICON eingebunden. Falls Sie dazu Grafiken verwenden möchten, die sich innerhalb des EGOTEC-Pfades befinden, sollten Sie dir URL unbedingt mit {$url_dir} beginnen lassen.

Styles

QuelltextHTML Code:

<link rel="StyleSheet" href="{$url_dir}skin/{$site->skin}/style.css" />

Der Pfad zu CSS-Dateien besteht aus {$url_dir} dem URL-Pfad, und {$site->skin}, dem aktuell verwendeten Design des Mandanten. Bitte beachten Sie weiterführende Hinweise zu Stylesheets.

QuelltextSmarty Code:

{include_module_files page=$page}

Der Platzhalte für typenspezifische CSS bzw. Javascript Dateien wird von EGOTEC automatisch befüllt. Näheres zu diesem Platzhalter finden Sie auf der Seite {include_mudule_files}

Typenpezifisches Template einbinden

Damit ein seitenspezifisches Template im Frontend angezeigt wird, muss es erst im Haupttemplate eingebunden werden:

QuelltextSmarty Code:

{if $typeTemplate}
{include file=$typeTemplate}
{else}
{$page->field.content}
{/if}

Über den Platzhalter {$typeTemplate} wird geprüft, ob für die aktuelle Seite ein typenpezifisches Template existiert. Falls dies der Fall ist, wird dieses an der entsprechenden Stelle eingebunden. Andernfalls wird lediglich der Inhalt der Seite dargestellt.

Style-Hinweis

Um eine identische Darstellung im Frontend und im WYSIWYG-Editor zu gewährleisten, sollten Sie den Inhaltsbereich mit einem <div id="inhalt"> umschließen und die CSS-Styles entsprechend an dieser ID ausrichten.

QuelltextSmarty Code:

<div id="inhalt">
{if $typeTemplate}
{include file=$typeTemplate}
{else}
{$page->field.content}
{/if}
</div>

Seitenspezifische Templates

Für jeden Seitentyp kann ein eigenes Aussehen bestimmt werden.
Das Template für einen Seitentyp befindet sich stets unter skin / DESIGN / SEITENTYP / body.html.

Es wird über einen entsprechenden Platzhalter in das Haupttemplate eingebunden und beinhaltet alle Ausgaben und besondere Funktionalitäten für den entsprechenden Seitentyp. Hier kann z.B. angegeben werden, dass alle Unterseiten in einer Liste mit jeweils Titel, Kurzbeschreibung und Verlinkung (News/Liste) ausgegeben werden sollen.

Die einfachste Variante einer solchen body.html könnte wie folgt aussehen:

QuelltextHTML Code:

<h1>{$page->field.title}</h1>
<i>{$page->field.short}</i>
{$page->field.content}

Hier wird lediglich der Titel, die Kurzbeschreibung und der Inhalt ausgegeben. Dabei können Sie Platzhalter an beliebiger Stelle im Template positionieren.

Nähere Informationen zum Erstellen von Seitentypen und deren Namensgebung finden Sie im Entwicklerhandbuch

Weil die "body.html"-Datei nur Teil des Haupttemplates ist und in diesem eingebunden wird, benötigen Sie weder einen <html>, noch <head> oder <body>-Tag.

Stylesheets

Es wird sehr empfohlen alle verwendeten CSS-Anweisungen in eine (oder mehrer) externe Datei auszulagern. Diese kann dann in dem head-Bereich des Haupttemplates der Website eingebunden werden. Das hat den entscheidenden Vorteil, dass Änderungen nur an dieser zentralen Stelle durchgeführt werden.

Mit dieser Zeile binden Sie ein externe CSS-Datei ein:

QuelltextHTML Code:

<link rel="StyleSheet" type="text/css" href="{$base_url}skin/{$site->skin}/style.css" />

Zusätzliche Styles pro Seitentyp
Wie Sie für einen bestimmten Seitentyp eine weiterführende CSS-Datei einbinden können, finden Sie auf der Onlinehilfe unter {include_module_files}.

style.css

Die style.css ist die Hauptdatei für Stylesheets. Hier werden alle CSS-Klassen und Definitionen gesammelt.

Gerne können Sie auch weitere CSS-Dateien über diese Datei verlinken:

QuelltextCSS Code:

/* CSS-Hauptdatei */
@import url("erweitert.css");
@import url("special.css");
@import url("usw.css");

Alle diese Stylesheet-Angaben sind gewöhnlich durch den Designer/Templateentwickler fest vorgegeben. Ein Redakteur hat auf diese Einstellungen keinen Einfluss.

Diese CSS und darin verlinkte CSS-Dateien werden im WYSIWYG-Editor verwendet. Achten Sie also darauf, dass alle im Design verwendeten Styles in dieser style.css-Dateie stehen oder zumindest die entsprechende CSS-Datei hier verlinkt wird. Es ist darauf zu achten das im WYSIWYG-Editor das DIV #inhalt verwendet wird.

Suchtreffer hervorheben

Verwenden Sie folgende CSS-Anweisung in der style.css um nach einer Suche die Suchtreffer hervorzuheben.

QuelltextCSS Code:

.highlight {
background-color:yellow;
font-weight:bold;
}

Gerne können auch eigene Style-Angaben für die Formatierung verwendet werden.

span.css

Über die span.css kann man einem Redakteur einige vorgefertigte Textformatierungen bereit stellen.
Diese kann er im WYSIWYG-Editor über das Dropdown-Menü "CSS-Style" einem Textelement bzw. Absatz zuweisen.

Folgende "CMS-Installationspfad/skin/Mandant Name/span.css"

QuelltextCSS Code:

.red_underline {}
.blueText {}
.blueTextbold {}

entspricht dann im Editor folgender Auswahlmöglichkeit:

css_auswahl

Wie Styles einzelnen Textbausteinen zugewiesen werden können wird im Benutzerhandbuch auf folgender Seite beschrieben.

Dies in der span.css festgelegten Klassen müssen in der style.css definiert werden.

table.css

Die table.css dient ebenfalls dazu dem Redakteur im WYSIWYG-Editor vorgefertigte Formatierungen bereit zu stellen. Allerdings sind die hier definierten Klassen für die Formatierung von Tabellen gedacht (vgl. "Einfügen und Bearbeiten einer Tabelle" im Benutzerhandbuch).

Beispiel table.css

QuelltextCSS Code:

.testTable {}
.egoTable {}
.farben_wechsel {}
.Ego_Buergerservice_Table {}
.Ego_Buergerservice_Table th {}

Dies in der table.css festgelegten Klassen müssen in der style.css definiert werden.

img.css

Die img.css dient dazu dem Redakteur im WYSIWYG-Editor vorgefertigte Formatierungen bereit zu stellen. Allerdings sind die hier definierten Klassen für die Formatierung von Bildern gedacht (vgl. "Einfügen von Bildern" im Benutzerhandbuch).

Beispiel img.css

QuelltextCSS Code:

.roter_Rahmen {}
.gelber_Rahmen {}

Dies in der img.css festgelegten Klassen müssen in der style.css definiert werden.

CSS-Hinweise

Einige Richtlinien, auf die ein Designer bei der Erstellung der CSS-Anweisungen achten sollte:

Allgemeines

Verschachtelungen und abhängige CSS-Anweisungen sollten nur in den statischen Bereichen der Templates verwendet werden.
<h1> bis <h6> sollten definiert und für den Gebrauch im eigentlichen Inhalt reserviert sein.
In den statischen Bereichen es Templates sollten alle CSS-Anweisungen über CSS-Klassen oder die TAG-IDs festgelegt werden.

Wiederholende Elemente

Wiederholende Elemente sind z.B. Menüpunkte und ähnliches.
Bereiche die sich vom HTML-Code ähnlich sind, und sich quasi nur durch den dargestellten Text unterscheiden.

CSS-Anweisungen sollten für solche Elemente identisch sein (keine unterschiedlichen Breiten, Höhen, usw.)

Im eigentlichen Inhalt

CSS-Anweisungen die für den eigentlichen Inhalt verwendet werden, sollten ohne Abhängigkeiten und Verschachtelungen auskommen.
Der eigentliche Inhaltsbereich sollte nicht noch weiter durch DIVs unterteilt werden.

Auf bestimmte Tags beschränken

So fern sich einige CSS-Klassen ausschließlich auf bestimmte Tag-Typen beziehen sollen, ist es ratsam, der Class-Definition diesen Tag mit einem Punkt voranzustellen.
So könnte man bei den Definitionen in der img.css beispielsweise auch img.roter_Rahmen verwenden um sicher zu stellen, dass diese Anweisung nur bei Bildern interpretiert wird.

Weitere Hinweise

Um eine bestmögliche Darstellung im WYSIWYG-Editor zu erzielen sollten Sie nach Möglichkeit darauf verzichten eigene CSS-Klassen zu verwenden.
Sinnvoller ist es die HTML-Tags selbst zu beschreiben. Über verschachtelte Definitionen können Sie die Klassen dabei auf den Inhaltsbereich und den Editor begrenzen.

Die folgende CSS-Definition würde z.B. auf alle <p>-Tags im Editor angewandt werden. Um im Frontend die gleiche Formatierung zu erreichen, muss der Inhaltsbereich in der Index.html dementsprechend von einem Bereich mit der ID inhalt eingeschlossen sein. (vgl. "Der BODY-Bereich" im Designhandbuch)

QuelltextCSS Code:

#inhalt p {
font-family : Times New Roman;
font-style : normal;
font-size : 1.0em;
}

Templates für verschiedene Medien

Zusätzlich zu der Ausgabe als HTML-Dateien unterstützt EGOTEC auch Templates für weitere Medien.

Standardmäßig besteht z.B. die Möglichkeit für eine Druckansciht ein abgeändertes Design zu verwenden.

Im Zusammenhang mit dem PDF-Modul können auch Designs zur PDF-Generierung erstellt werden.

Templates für Druckansichten

Für dir Druckansicht über {print_url} verwendet EGOTEC als Basis ebenfalls HTML-Templates.

Diese können entweder global für einen Mandanten oder speziell für einen Seitentyp erstellt werden. In der Regel werden Elemente wie Navigation, rechte Spalten usw. in Drucktemplates entfernt um die Ansicht auf wichtigen Inhalt zu beschränken.

Das Haupttemplate

Falls sich im entsprechenden Design-Verzeichnis eines Mandanten eine Datei index.print.html befindet, wird diese statt der index.html in der Druckansicht verwendet.
Eine solche index.print.html verzichtet dabei meistens auf die Navigationen, und konzentriert sich stärker auf den eigentlichen Inhalt der Seite.

Seitenspezifische Templates

Falls notwendig können auch für body.html-Dateien durch spezielle Templates die Druckansicht ersetzen. Diese Dateien müssen haben die Bezeichnung body.print und befinden sich jeweils neben der body.html im gleichen Seitentyp-Verzeichnis.

Templates für die PDF-Generierung

Für dir PDF-Ansicht über {pdf_url} verwendet EGOTEC als Basis ebenfalls HTML-Templates. Diese werden aber für die PDF-Ansicht entsprechend vereinfacht.

Das Haupttemplate

Falls im entsprechenden Design-Verzeichnis eines Mandanten eine Datei namens index.pdf.html oder index.htm.html befindet wird diese statt der index.html in der PDF-Ansicht verwendet.
Eine solche index.pdf.html verzichtet dabei meistens auf die Navigationen, und konzentriert sich stärker auf den eigentlichen Inhalt der Seite.

Seitenspezifische Templates

Falls notwendig können auch für body.html-Dateien durch spezielle Templates für die PDF-Ansicht ersetzen.

Mögliche Endungen

htmldoc

body.pdf.html bzw. index.pdf.html

html2ps

body.htm.html bzw. index.htm.html

Für die PDF-Generierung setzen wir das externe Tool htmldoc ein. Diesem sind bzgl. der Darstellungsmöglichkeiten einige Grenzen gesetzt.
Näheres dazu entnehmen Sie bitte der Dokuementation von htmldoc (http://www.easysw.com/htmldoc/). Auch ist es Möglich html2ps einzusetzten.

Templates für Adobe InDesign

Erzeugen eines InDesign Dokuments mittels EGOTEC CMS:

1. Man muss mittels Adobe InDesign eine Vorlage erzeugen und diese dann als Indesign Interchange Format exportieren.

screen1

2. Danach muss man in der erzeugten Datei unter Umständen ein paar {literal} und {/literal} Tags setzten.

screen2

screen3

3. Danach speichert man die Datei im Skin Verzeichnis :

screen4

4. Dann kann man sich das ganze mit gefülltem Inhalt runterladen:

screen5

5. Und im Adobe InDesign öffnen:

screen6

Templates zur Bilddarstellung

Falls verlinkte Bilder aus dem Multimediabereich gesondert dargestellt werden sollen, kann dies über die view_image.html gesteuert werden.

Die view_image.html muss sich im Skin-Verzechnis des Desktop-Mandanten befinden. Zusätzlich muss unter Verwaltung->Konfiguration->Multimedia-Mandant->Administration Reiter Verschiedenes die Checkbox bei "Links auf Bilder für Popups erweitern" aktiviert werden. Das können Sie sich Hier anschauen.

Eine solche view_image.html-Datei könnte z.B. wir folgt aussehen :

QuelltextHTML Code:

<span class="quellcode">{* Die maximale Breite für Bilder festlegen *}
{assign var=maxWidth value=500}
<html>
<head>
<title>{$page->field.title}</title>
</head>
<body>
{capture assign="inhalt"}
<h1>{$page->field.name}</h1>
<p>
{if $page->extra.origImgWidth > $maxWidth}
<a href="{page_url id=$page->field.id media=1}" target="_blank">
<img src="{page_url id=$page->field.id media=1}">
</a>
{else}
<img src="{page_url id=$page->field.id media=1}">
{/if}
</p>
<p>{$page->field.short}</p>
<p>{t}Originalgröße{/t} : {$page->extra.origImgWidth}x{$page->extra.origImgHeight}</p>
<p>{t}Format{/t} : {$page->extra.image_type}</p>
{if $page->extra.origImgWidth > $maxWidth}
<p><a href="{page_url id=$page->field.id media=1}" target="_blank">{t}Original anzeigen{/t}</a></p>
{/if}
{/capture}
{$inhalt|max_image_width:500}
</body>
</html>

Im Gegensatz zu den seitenspezifischen Templates sollte die view_image.html über einen HEAD- und BODY-Bereich verfügen.

Mehrsprachigkeit

Sie können mit {t}{/t} recht einfach einzelne Textbausteine übersetzen.
Dazu stehen Ihnen im Verzeichnis skin/SkinName/locale für jede verfügbare Sprache Übersetzungsdateien zur Verfügung.

Vorbereitungen

Legen Sie in skin/mandant/

einen ordner mit dem namen "locale" an

in diesem Order wird für jede gewünschte Sprache ein Ordner mit dem Länderkürzel als Namen angelegt, innerhalb der Sprache kommt eine translation.ini

Beispiel

skin
- demo
  - locale
    - de
      - translation.ini
    - en
      - translation.ini
    - fr
      - translation.ini

Aufbau einer translation.ini

Diese Seite als PDF Dokument anzeigen. = show this page as PDF
Diese Seite ausdrucken. = print this page
Download = download
Drucken = print
Impressum = imprint

Smarty

Zur Unterstützung der dynamischen Inhaltsgestaltung verwendet Egotec über verschiedene Erweiterungen. Diese Erweiterungen basieren auf der Smarty Template Engine. Im Rahmen dieses Handbuches werden die häufigsten dieser Erweiterungen aus Sicht des Designer beschrieben.

Auf den Folgenden Seiten bekommen Sie informationen über den Einsatz von Smarty-Plugins

Eine Einführung und Informationen zur grundlegenden Syntax von Smarty finden Sie auf der Smarty-Homepage.

Smarty Kommentare

Ein Smarty-Kommentar beginnt mit {* und endet mit *}. Alles was sich zwischen diesen Zeichen befindet, wird in der Ausgabe ignoriert, d.h. auch nicht in der Quelltextansicht der Seite angezeigt.

Beispiel

QuelltextSmarty Code:

{* Das ist ein Kommentar, welcher von Smarty nicht beachtet und in der Ausgabe entfernt wird *}

Smarty Platzhalter

Die einfachste Erweiterung des HTML-Codes sind sogenannte Platzhalter.

Wie auch alle anderen Erweiterungen beginnen Platzhalter mit { und enden mit }. Sie werden je nach anzuzeigender Seite mit unterschiedlichen Inhalten gefüllt.
Zwischen den Platzhaltern steht der Variablenname, beginnend mit einem $.

Beispiel für einen Platzhalter

QuelltextSmarty Code:

{$mein_name}

Smarty bietet zusätzlich zu den Platzhaltern auch noch die Möglichkeit, konstante Werte aus Konfigurationsdateien einzulesen. Näheres dazu ist der Smarty-Dokumentation zu entnehmen.Mit Hilfe der {debug}- Funktion können Sie sich die möglichen Platzhalter zu einzelnen Templates jederzeit anzeigen lassen.

url_dir

{$url_dir}

Der Platzhalter {$url_dir} beinhaltet die URL zu Ihrer CMS-Installation.

Er wird in der Templates verwendet um Pfade zu Bildern, Skripten oder CSS-Dateien anzugeben:

QuelltextHTML Code:

<img src="{$url_dir}skin/{$site->skin}/img/logo.gif />

Im Platzhalter ist am Ende schon ein "/"-Zeichen mit enthalten. Setzten Sie daher nach dem Platzhalter KEIN "/"-Zeichen mehr (siehe Beispiel).

page

{$page}

Bei jedem Seitenaufruf wird vom System die aktuelle Seite als Page-Objekt in Smarty bereit gestellt. Mit dem Platzhalter {$page} können gespeicherte Werte und Eigenschaften direkt im Template ausgegeben werden.

Platzhalter	Beschreibung
{$page->field.name}	Name der aktuellen Seite
{$page->field.title}	Titel der aktuellen Seite
{$page->field.short}	Kurzbeschreibung
{$page->field.content}	Inhalt
{$page->field.a_date}	Erstellungsdatum
{$page->field.c_date}	Änderungsdatum
{$page->field.id}	ID der aktuellen Seite
{$page->field.type}	Interner Seitentyp

Mit {$page->extra.variablenname} kann auch auf Werte im extra-Feld zugegriffen werden, sofern diese Werte vorhanden sind.

site

{$site}

Der {$site} Platzhalter steht bei jeden Seitenaufruf automatisch zu Verfügung. Er beinhaltet das Objekt des aktuellen Mandanten.

Einige Ausgabemöglichkeiten

Platzhalter	Beschreibung
{$site->name}	Name des aktuellen Mandanten
{$site->skin}	Verwendetes Design des aktuellen Mandanten
{$site->language}	Die Sprache des Mandanten
{$site->site.default_skin}	Das Standard-Design des Mandanten

Über das Array {$site->site} können allgemeine Einstellungen (aus dem Adminbereich) wie Standardsprache, verfügbare Sprachen oder E-Mail Adresse des Webadministrators ausgegeben werden. Alle verfügbaren Werte können über die {debug}-Funktion eingesehen werden.

Smarty Blöcke

Mit Hilfe von Smarty Blöcken (und Kontrollstrukturen) können Sie die Darstellung der Seite steuern.

Im Prinzip sind Smarty-Blöcke nichts anderes als Smarty-Funktionen mit dem wichtigen Unterschied, dass sie mit einem schließenden Tag beendet werden müssen.
Die gebräuchlichsten werden im Folgenden beschrieben.

{if}{elseif}{else}{/if}

Mit Hilfe von {if}{elseif}{else}{/if} -Anweisungen können Sie bestimmte Bereiche eines Templates von Bedingungen abhängig machen. So ist es z.B. möglich je nach Typ der Seite unterschiedliche Bilder oder einen alternativen Begrüßungstext einzublenden.

Beispiel

QuelltextSmarty Code:

{if $lang == "fr"}
Bienvenue sur notre site
{elseif $lang == "de"}
Willkommen auf unserer Website
{else}
Welcome to your website
{/if}

{if}-Statements in Smarty erlauben die selbe Flexibilität wie in PHP. Eine Liste der erlaubten Operatoren finden Sie im Smart- Onlinehandbuch hier.

{foreach}, {foreachelse}

Mit Hilfe von {foreach}{/foreach} können Sie nacheinander alle Einträge eines Arrays durchlaufen.

Beispiel

QuelltextSmarty Code:

{foreach from=$meinArray item=eintrag}
{$eintrag.feld1}<br />
{$eintrag.feld2}<br />
{/foreach}

Weitere Informationen zu {foreach} entnehmen Sie bitte den Smarty-Handbuch

{html_code}{/html_code}

{html_code}{/html_code} sorgt dafür, dass HTML-Tags die in dem entsprechenden Bereich stehen, zusammen mit HTML-Tags ausgegeben werden.
(der komplette Bereich wird mit <pre></pre> umschlossen)

Dadurch können Sie z.B. Beispiel-HTML-Code recht einfach in einem Template anzeigen lassen.

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.

{strip}{/strip}

Der {strip}-Block entfernt alle Leerzeichen und Zeilenumbrüche, die innerhalb des {strip} und {/strip}-Tags liegen.

Oft wird die Ausgabe des erzeugten HTML im Browser durch letztere negativ beeinflusst. Daher kann diese Funktion an dieser Stelle Abhilfe schaffen.

Beispiel

QuelltextSmarty Code:

{strip}
<table>
<tr>
<td>
<span>
Hallo
</span>
</td>
</tr>
</table>
{/strip}

Ausgabe

QuelltextHTML Code:

<table><tr><td><span>Hallo</span></td></tr></table>

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.

{t}{/t}

Der {t}-Block vereinfacht Ihnen das Erstellen von mehrsprachigen Seiten. Texte, die innerhalb eines {t}{/t} -Blocks stehen, werden an Hand von Übersetzungsdateien automatisch in die gewählte Sprache übersetzt. Näheres zu den Übersetzungsdateien und wie diese gepflegt werden finden Sie hier.

Ein typischer Aufruf des {t}{/t}-Blockes sieht wie folgt aus :

QuelltextSmarty Code:

{t}Dieser Text wird automatisch ersetzt.{/t}

Beachten Sie dabei, dass zwischen den {t}{/t}- Tags weder weitere Template-Platzhalter, noch HTML-Tags auftauchen sollten. Lediglich einfacher Text.

QuelltextSmarty Code:

{t}Die aktuelle Seite trägt den Namen{/t}{$page->field.name}<br/>
{t}Und die Kurzbeschreibung wird{/t}<i>{t}kursiv{/t}</i>{t}dargestellt:{/t}<br/>
<i>{$page->field.short|nl2br}</i>

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung.
In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.

{literal}{/literal}

Mit Hilfe von {literal}{/literal} können Sie Bereiche des Templates von der Interpretation durch Smarty ausschließen. Smarty ignoriert damit alles, was zwischen {literal} und {$literal} steht. Dies ist vor allem für Javascript- oder andere Blöcke nützlich, die geschwungene Klammern verwenden (Ohne den {literal}-Block würde Smarty versuchen die geschweiften Klammern der Javascript-Funktion zu interpretieren, was zu einem Fehler führen würde).

QuelltextSmarty Code:

{literal}
<script language="javascript">
<!--
function meineFunktion(var)
{
alert(var);
}
//-->
</script>
{/literal}

{cache}{/cache}

Beispiel

QuelltextSmarty Code:

{cache name="navigation1"}
{* Alle Unterseiten der Startseite auslesen *}
{get_children id=1 var="kinder"}
<ul>
{foreach from=$kinder item="kind"} {* Alle Unterseiten durchlaufen *}
<li><a href="{page_url page=$kind}">{$kind->field.name}</a></li> {* Seitenname *}
{/foreach}
</ul>
{/cache}

Diese Funktion speichert den komplette Bereich, welcher durch die {cache}-Tags umschlossen wird. Bei variablen Inhalten ist daher auf den korrekten Einsatz dieser Funktion zu achten.

Smarty Funktionen

Smarty-Funktionen sind wichtige Werkzeuge, die Ihnen die Arbeit mit Templates erleichtern. Der entscheidende Vorteil: Sowohl der Aufruf der Funktion als auch die weitere Verarbeitung der Funktionsergebnisses können direkt im Template durchgeführt werden.

Die wichtigsten Funktionen werden im folgenden beschrieben.

Die folgenden Funktionen sind nicht Standard von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu diesen Funktion finden.

{admin_url}

Beispiel

QuelltextSmarty Code:

{admin_url id=10 action=edit}

"url" oder "action" muss gesetzt sein, jedoch darf nur einer der beiden Parameter verwendet werden. Wenn Sie ein page Objekt zur Verfügung haben, verwenden Sie bitte page= als Parameter und nicht id.

{assign}

Beispiel

QuelltextSmarty Code:

{assign var="var" value="Hallo Welt"}
{$var}

Ausgabe

QuelltextHTML Code:

Hallo Welt

{check_captcha}

Beispiel 1

QuelltextSmarty Code:

{check_captcha var=ergebnis}

Beispiel 2

QuelltextSmarty Code:

{if $smarty.request.submit}
{get_captcha var=captcha_result}
{if $captcha_result}
Das CAPTCHA wurde korrekt gelöst.
{else}
Ihre Eingabe ist nicht richtig!
{/if}
{/if}

Wenn das Formular abgeschickt wurde, wird überprüft ob das CAPTCHA gelöst wurde und dementsprechend eine Meldung ausgegeben.

{config_load}

Beispiel

QuelltextSmarty Code:

{config_load file="farben.conf"}

{count_pages}

Beispiel

QuelltextSmarty Code:

{* Die Kind-Elemente der aktuellen Seite auslesen *}
{get_children query.fields="id,order_field" page=$page query.where="type='news/entry'" var="alle_news_eintraege"}
{* Alle Ergebnisse zählen *}
{count_pages pages=$alle_news_eintraege var=scount}
{* Anzahl der Ergebnisse ausgeben *}
{$scount}

{debug}

Beispiel

QuelltextSmarty Code:

{debug}

Der Aufruf von {debug} erfolgt üblicherweise möglichst am Ende des Templates.

Vergessen Sie nicht, alle {debug} Aufrufe vor der Liveschaltung wieder zu entfernen. Andernfalls werden die Debug-Ausgaben auch weiterhin angezeigt.

{extra_push}

Beispiel

QuelltextSmarty Code:

{* in das extra-Feld "wochentag" den Wert "Dienstag" schreiben *}
{extra_push id=1 field="Wochentag" value="Dienstag" }

Existiert bereits ein entsprechender Eintrag im Extra-Bereich wird er überschrieben.

Es können nur Seiten geändert werden, die direkt zum aktuellen Mandanten gehören. Media-Dateien lassen sich z.B. mir {extra_push} nicht bearbeiten

{file_exists}

Beispiel

QuelltextSmarty Code:

{file_exists file="/var/www/cms/skin/demo/index.html" var="file_exists_index"}

{get_captcha}

Achtung: Wenn Sie die Werte für name_text und name_hidden ändern, müssen Sie diese auch {check_captcha} mitteilen.

Die Captcha-Funktion benötigt das GD-Lib Modul mit integrierter Free-Type Bibliothek (http://de2.php.net/imagettfbbox).

Beispiel 1

QuelltextSmarty Code:

{* prüfen, ob der Eintrag korrekt war *}
{get_captcha var=html_code}

Über {check_captcha} kann geprüft werden, ob die Eingabe korrekt war.

Beispiel 2

Erzeugt ein CAPTCHA mit roter Schriftfarbe und grünen Linien und speichert den HTML-Code für das erzeugte Bild und für das Eingabefeld in der Variablen html_code

QuelltextSmarty Code:

{get_captcha var=html_code text_color=#ff0000 lines_color=#00ff00}

Beispiel 3

Erzeugt ein CAPTCHA und speichert den HTML-Code für das erzeugte Bild in der Variablen code_img und das für das Eingabefeld in code_txt.

QuelltextSmarty Code:

{get_captcha var_text=code_txt var_image=code_img}

Weitere Möglichkeiten zur Anpassung werden mit den CSS Klassen captcha_user, captcha_img und captcha_reload angeboten.

{get_children}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiele

QuelltextSmarty Code:

{* alle Kinder der aktuellen Seite auslesen *}
{get_children page=$page var="kinder"}
{* die ersten beiden Kinder der aktuellen Seite auslesen *}
{get_children page=$page var="kinder" query.limit="0,2"}
{* alle Kinder der aktuellen Seite, die vom Typ "news/entry" sind, auslesen *}
{get_children page=$page var="kinder" query.where="type='news/entry'"}

{get_descendants}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiele

QuelltextSmarty Code:

{* alle untergeordnete Seiten auslesen *}
{get_descendants page=$page var="nachfahren"}
{* alle Seiten des kompletten Auftritts zurückgeben, die vom Typ "news/entry" sind *}
{get_descendants id=$site->rootId query.where="type = 'news/entry'"}

Diese Funktion übernimmt beim Auslesen der Seiten leider keine variable Sortierung aus dem Administrationsbereich
(Reiter "Navigation => Sortierung: variabel").

{get_keywords}

Beispiele

QuelltextSmarty Code:

{* die Keywords der aktuellen Seite ausgeben *}
{get_keywords var="keywords" page=$page}
{* Schlagworte ausgeben *}
Aktuelle Schlagworte: {$keywords}

Möchte man die Schlagworte einzeln ausgegeben, wird empfohlen, die Liste Skriptseitig über die explode-Funktion in ein Array abzulegen und an Smarty zu übergeben.

{get_pages}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiel

QuelltextSmarty Code:

{* die 5 zuletzt geänderten Seiten vom Typ "news/entry" sortiert auslesen *}
{get_pages var="seiten" query.where="type='news/entry'" query.order="c_date DESC" query.limit='0,5' }
{* Seitennamen (der Ergebnisse) in einer Liste darstellen *}
<ul>
{foreach from=$seiten item="seite"}
<li>{$seite->field.name}</li>
{/foreach}
</ul>

{get_parents}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiel

QuelltextSmarty Code:

{* alle Eltern der aktuellen Seite auslesen *}
{get_parents page=$page var="eltern"}

{get_path}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiele

QuelltextSmarty Code:

{* aktuellen Pfad (Seiten von der Startseite bis zur Elternseite) auslesen *}
{get_path page=$page var="pfad"}
{* gleiche Abfrage wie oben, jedoch ist die aktuelle Seite auch im Ergebnis enthalten *}
{get_path page=$page var="pfad" show_self=1}
{* gleiche Abfrage wie oben, jedoch in umgekehrter Reihenfolge *}
{get_path page=$page var="pfad" show_self=1 bottomup=1}

{get_siblings}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiel

QuelltextSmarty Code:

{* alle Seiten vom Typ "news/entry" auslesen, die sich auf gleicher Ebene mit $page befinden *}
{get_siblings page=$page var="geschwister" query.where="news/entry"}

{get_sibling}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiele

QuelltextSmarty Code:

{* den führenden Nachbar auslesen *}
{get_sibling var="pPage" page=$page direction="prev"}
{* den folgenden Nachbar auslesen *}
{get_sibling var="nPage" page=$page direction="next"}

{get_user}

Beispiel

QuelltextSmarty Code:

{* den Benutzer auslesen, der die aktuelle Seite zuletzt bearbeitet hat *}
{get_user user_id=$page->field.a_user var="benutzer"}

{help}

In der Regel wird dieses Plugin in der ersten Zeile eines Dialogs eingebunden.

smarty_help

Beispiel

QuelltextSmarty Code:

{help id=99}

Diese Plugin ist erst ab EGOTEC 5 verfügbar.

{icon_by_extension}

Beispiel

QuelltextSmarty Code:

{* einen IMG-Tag zu einem Symbol für Word-Dokumente erzeugen *}
{icon_by_extension extension="doc"}

{include_module_files}

Es wird im Seitentyp-Verzeichnisse nach 2 Dateien durchsucht :

skin/Mandant/seitentyp/style.css
skin/Mandant/seitentyp/script.js

Beispiel

QuelltextSmarty Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>{$page->field.title|escape:"html"}</title>
{include_module_files page=$page}
</head>

{include_module_files} sollte unbedingt im HEAD-Bereich der index.html eingebunden werden

{include}

Beispiel

QuelltextSmarty Code:

{* Template Bereiche einbinden *}
{include file="tpl/header.html"}
{include file="tpl/content.html"}

Der Pfad geht dabei immer vom jeweiligen SKIN-Verzeichnis aus.

Typenspezifische Templates einbinden

EGOTEC stellt automatisch einen Platzhalter {$typeTemplate} zur Verfügung. Dieser enthält immer den Template-Pfad zur aktuellen Seite.

QuelltextSmarty Code:

{* Liegt ein Template für die aktuelle Seite vor? *}
{if $typeTemplate}
{include file=$typeTemplate} {* dann dieses verwenden *}
{else}
{$page->field.content} {* ansonsten den einfachen Inhalt ausgeben *}
{/if}

{input}

Smarty Plugin für den Adminbereich. Einfache Erzeugung von Eingabefeldern.

Beispiel

QuelltextSmarty Code:

{* Eingabefeld für ein Bild erzeugen *}
{input version=5 type="image" name="bild_rechts" title="Bild" short="Diese Bild erscheint in der rechten Spalte"}

Ausgabe:

input_image

Die HTML-Datei

wir erstellen zuerst eine HTML-Datei

jede HTML Datei besitzt 2 Bereiche

Bereich 1 Smarty+HTML

QuelltextSmarty Code:

<form name="extra">
<div align="center">
<table class="table">
<tr>
<td class="cell">
{input version=5 type="button" name="input_test" title="Dies ist ein button" onclick="javascript:test()"}
</td>
</tr>
</table>
</div>
</form>

Achten Sie darauf, dass das Formular auf jeden Fall den Namen extra bekommt
<div> und <table> sind für die einheitliche Gestaltung optionall

Bereich 2 Javasript

Ab Version 5 werden bei Seiten die extra-Felder automatisch gespeichert und geladen.

Es muss nur die unload_extra() Funktion die do_unload bzw. do_unload_extra Funktion aufgenommen werden.

QuelltextJavaScript Code:

// Für die Erweiterung des Informationsreiters
<script language="javascript">
{literal}
function do_load_extra(){}
function do_unload_extra()
{
window.parent.unload_extra()
}
{/literal}
</script>
//Für einen neuen Reiter
<script language="javascript">
{literal}
function do_load()
{
}
function do_unload()
{
window.parent.unload_extra();
}
{/literal}
</script>

Wenn Sie Input-Plugins an anderen Stellen verwenden, z.B. auf einem Konfigurationsreiter in den Globalen Einstellungen können die Felder nicht automatisch abgespeichert werden.
Die Inhalte der Input-Felder können in dieser Version einheitlich mit den Funktionen set_input_value() und get_input_value() geladen und gespeichert werden.

QuelltextJavaScript Code:

function do_load()
{
set_input_value('menue_color', window.parent.get_conf('administration', 'menue_color'));
}
function do_unload()
{
window.parent.set_conf('administration', 'menue_color', get_input_value('menue_color'));
}

do_load

In diesem Teil werden die Werte beim Speichern in die DB geschrieben

do_unload

Hier werden, wenn vorhanden, gespeicherte Werte an das Formular übergeben

Mit Dojo generierte Input-Felder können nicht vollständig über die Eigenschaften ihrer ursprünglichen HTML Objekte manipuliert werden. Hierfür ist es manchmal notwendig das dazugehörige Dojo Objekt zu ermitteln und dieses dann zu manipulieren. Die Funktion hierfür ist get_input_object(). Übergeben wird der Name des Input-Feldes.

QuelltextJavaScript Code:

var obj = get_input_object('menue_color');

Soll ein Attribut geändert werden, verwendet man die attr() Funktion. Nur so aktualisiert Dojo seine Objekte.

QuelltextJavaScript Code:

obj.attr('disabled', true); // ändert einen Wert
obj.attr({disabled : true, label : 'Neuer Text'}); // ändert mehrere Werte auf einmal

Auslesen von Eigenschaften ist hingegen wie gewohnt machbar. Eigenschaften oder Arrays wie checked, selected, options, usw stehen nun auch Verfügung.

QuelltextJavaScript Code:

obj.checked;
obj.selected;
obj.options;

{admin_url}

{assign}

{check_captcha}

{config_load}

{count_pages}

{debug}

{extra_push}

{file_exists}

{get_captcha}

{get_children}

{get_descendants}

{get_keywords}

{get_pages}

{get_parents}

{get_path}

{get_siblings}

{get_sibling}

{get_user}

{help}

{icon_by_extension}

{include_module_files}

{include}

{input}

{in_path}

{mailto}

{mail_send}

{mail_valid_email}

{navigation}

{nav_url}

{nav}

{new_child}

{online_hilfe}

{page_exists}

{page_url}

{print_url}

{sort_extra}

{style_inactive}

{sub_html}

{tag_cloud}

{update_page}

{in_path}

Die Funktion liefert als Ergebnis entweder true (1) oder false (0) zurück.

Beispiel

QuelltextSmarty Code:

{* den Pfad ermitteln *}
{get_path var="mein_pfad" id=$page->field.id show_self=1}
{* prüfen, ob die aktuelle Seite im Pfad liegt *}
{in_path id=$page->field.id path=$mein_pfad var="ist_drin"}

{in_path} eignet sich besonders für mehrstufige baumartige Navigationsstrukturen, welche je nach Position der Besuchers an entsprechender Stelle aufklappen. Dabei wird einmalig über {get_path} der aktuelle Pfad ermittelt und in jeder Navigationsebene geprüft, ob die Seiten im Pfad liegen. Falls ja, werden weiter Kinder ausgelesen.

{mailto}

Weitere Parameter und Beispiele entnehmen Sie bitte der Smarty Dokumentation auf smarty.net

{mail_send}

Beispiel

QuelltextSmarty Code:

{mail_send to="info@egotec.com" from="demo@egotec.com" subject="Demo Mail" message="Ein etwas längerer Text"}

{mail_valid_email}

Rückgabewert ist true oder false.

Beispiel

QuelltextSmarty Code:

{mail_valid_email adress="demo@egotec.com" var="mail_check"}
{if $mail_check}
richtig
{else}
falsch
{/if}

{navigation}

Diese Funktion wird nicht weiter unterstützt und wurde durch die Funktion {nav} ersetzt.

{nav_url}

Beispiel

QuelltextSmarty Code:

{nav id=$site->rootId item="nav1" query.fields='id,name' param.has_children=1}
<li>
<a href="{nav_url}">{$nav1->field.name}</a>
{/if}
{/nav}

{nav_url} kann nur innerhalb eines {nav}{/nav} Blocks verwendet werden.

{nav}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiel

QuelltextSmarty Code:

{** Navigationsliste der ersten Ebene erzeugen *}
<ul>
{nav id=1 item="ebene1"}
<li><a href="{nav_url}">{$ebene1->field.name}</a></li>
{/nav}
</ul>

{new_child}

Beispiel

QuelltextSmarty Code:

{new_child parent_id=$parent_id var="new_page"
field="array(
'name' => '$title',
'title' => '$title',
'content' => '$content',
'type' => 'forum/entry',
'inactive' => '0',
'nav_hide' => '1')"
extra="array(
'anhang' => '$inhalt',
'anhang_mime_type' => '$mtype',
'anhang_file_name' => '$fname',
'entry_user' => '$entry_user',
'entry_email' => '$entry_email')"
}

{online_hilfe}

Beispiel

QuelltextSmarty Code:

{* Link auf Benutzerhandbuch *}
<a href="{online_hilfe id=6}">Benutzerhandbuch</a>

Diese Smarty-Plugin ist in EGOTEC 5 nicht mehr verfügbar. Es wird durch das Plugin help ersetzt.

{page_exists}

Diese Funktion berücksichtigt Freigabe-Daten, Berechtigungen und den Aktiv-Haken.

Beispiel

QuelltextSmarty Code:

{* prüfen, ob die aktuelle Seite auch im englischen Bereich existiert *}
{page_exists id=$page->field.id lang="en" var="page_in_en"}

{page_url}

Beispiel

QuelltextSmarty Code:

{* einen Link auf das aktuelle Page Objekt erstellen *}
<a href="{page_url page=$page}">Link</a>
{* einen Link auf die Seite mit der ID 30 erstellen *}
<a href="{page_url id=30}">Link2</a>

{print_url}

Beispiel

QuelltextSmarty Code:

<a href="{print_url} ">Seite drucken</a>

Näheres zu Druck-Designs erfahren Sie im entsprechenden Kapitel des Designerhandbuchs

{sort_extra}

Sortiert nach einem Wert im Extra Feld

Beispiel

Die letzten 10 eingetragenen Events sortiert nach deren Enddaten anzeigen.

QuelltextSmarty Code:

{* die 10 neusten Seiten vom Typ "events/entry" holen *}
{get_pages var="pages" query.where="type='events/entry'" query.order="c_date DESC" query.limit="0,10"}
{* nach dem Wert "events_until_date" sortieren *}
{sort_extra var="events" pages=$pages field="event_until_date" order="desc"}
{* und die Seiten ausgeben *}
{foreach from=$events item="event"}
...
{/foreach}

{style_inactive}

Beispiel

QuelltextSmarty Code:

<img style="{style_inactive alpha=50}" title="Transparentes Bild" src="text.jpg" />

{sub_html}

Ein String wird abgeschnitten und der Teilstring bleibt XHTML konform.

Als Rückgabewert erhält man ein Array gespeichert in der unter var angegebenen Variable mit folgenden Schlüsseln.

html => Teilstring (oder der unveränderte String, falls er kleiner als length ist)
cut => true oder false (wurde der HTML Code abgeschnitten oder nicht)

Beispiel

QuelltextSmarty Code:

{sub_html var=sub_entry html=$entry->field.content length=200}
{$sub_entry.html}
{if $sub_entry.cut}
... <a href="{page_url page=$entry}">{t}weiterlesen{/t}</a>
{/if}

Möglicher Anwendungsbereich

Wenn Sie auf einer Portalseite die letzten Newseinträge auflisten wollen, diese aber nicht komplett dargestellt werden sollen. Stattdessen sollen diese ab einer gewissen Länge abgeschnitten werden und einen Link erhalten, der zum eigentlichen News-Eintrag weiterführt.

{tag_cloud}

Eine Tag Cloud stellt die am meisten verwendeten Schlagwörter dar. Hierbei gilt standardmäßig: je größer ein Schlagwort dargestellt wird, desto öfters wird es verwendet. Ein Klick auf ein Schlagwort öffnet eine Auflistung aller Seiten deren dieses Schlagwort zugewiesen ist.

Weitere Informationen zur Verwendung von Schlagwörtern finden Sie in unserer Hilfe zum Schlagwortregister.

Die Tag Cloud verwendet eine Standard Formattierung und sieht zum Beispiel so aus:

tag_cloud

Die hierfür verwendete CSS Datei kann pro Skin überschrieben werden. Hier wird empfohlen die originale CSS Datei zu kopieren und diese dann nach eigenen Vorstellungen anzupassen.

Original CSS Datei: lib/smarty/plugins/tag_cloud/style.css
Skin spezifische CSS Datei: skin/<skin>/tag_cloud.css

Die CSS Datei wird automatisch eingebunden sobald diese Funktion aufgerufen wird. In der Regel reicht es wenn die Funktion an der Stelle im HTML Code aufgerufen wird, an der die Tag Cloud angezeigt werden soll:

QuelltextHTML Code:

<h1>{t}Tag Cloud{/t}</h1>
{tag_cloud}

Der generierte HTML Code ist so aufgebaut, dass dieser leicht mit externen Javascript Plugins verwendet werden kann:

QuelltextHTML Code:

<div id="ego_tag_cloud">
<ul>
<li>
<a href="#" rel="9" title="Milch" class="tag9">Milch</a>
</li>
<li>
<a href="#" rel="4" title="Joghurt" class="tag4">Joghurt</a>
</li>
</ul>
</div>

Um die für die Tag Cloud notwendigen Dateien einzubinden, ist im HEAD Bereich des Skins folgender Funktionsaufruf notwendig:
{init_tag_cloud}

Damit ein Klick auf ein Schlagwort die Liste der zugeordneten Seiten öffnen kann, muss es eine Seite mit dem Seitentyp Schlagwörter geben.

{update_page}

Diese Funktion ergänzt die aktuellen Felder um die neuen Werte. Bereits vorhandene Felder werden dabei überschrieben.

Beispiel

QuelltextSmarty Code:

{update_page page=$page field="array('name' => 'Neuer Name', 'title' => 'Neuer Titel')" extra="array('anhang' => '$inhalt')"}

Smarty Modifikatoren

Variablen-Modifikatoren dienen dazu, den Inhalt eines Platzhalter zu bearbeiten, bevor dieser ausgegeben wird. Sie können auf alle Variablen angewendet werden.

Dazu hängen Sie einfach ein | (Pipe-Zeichen) und den Namen des Modifikators an die entsprechende Variable an. Können einem Modifikator noch Parameter mitgegeben werden, werden sie dem Modifikatorname angehängt und mit : getrennt.

Beispiel

QuelltextSmarty Code:

{* Den Titel kürzen, wenn er mehr als 15 Zeichen hat *}
{$begruessung|truncate:15:"..."}

Ausgabe

QuelltextHTML Code:

Hallo Herr Maie...

In dem Beispiel wird ein Text gekürzt, sobald 15 Zeichen überschritten werden. In dem ersten Parameter kann die Anzahl der Zeichen bestimmt werden. Der zweite Parameter gibt die Zeichenfolge an, die nach 15 Zeichen erscheinen soll (in diesem Fall "..."). Auf diese Weise lässt sich z.B. auch ein Datum auf verschiedene Arten formatieren.

Näheres zu den Standard-Modifikatoren von Smarty können Sie der Smarty-Dokumentation entnehmen

Generell kann jede PHP-Funktion die Zeichenketten verarbeitet als Modifikator genutzt werden. Näheres hierzu finden Sie in der Smarty-Dokumentation

max_image_width

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.
{max_image_width} kann nur auf Bilder angewendet werden, die aus dem MM-Bereich von EGOTEC kommen.

max_image_width durchsucht den jeweiligen Platzhalter nach Bildern aus dem Multimediabereich. Diese werden dann mit der übergebenen maximalen Breite verglichen, und notfalls entsprechend verkleinert.

Ein typischer Aufruf des max_image_width-Modifikators sieht wie folgt aus :

{$page->field.content|max_image_width:200}

Mit Hilfe des {capture}-Befehls von Smarty können Sie den Modifikator auch auf Bilder die direkt über das Template eingebunden werden anwenden.

{capture assign="bild"}
<img src="{page_url id=$bild_id media=1}">
{/capture}
{$bild|max_image_width:150}

max_image_height

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.
{max_image_height} kann nur auf Bilder angewendet werden, die aus dem MM-Bereich von EGOTEC kommen

max_image_height durchsucht den jeweiligen Platzhalter nach Bildern aus dem Multimediabereich. Diese werden dann mit der übergebenen maximalen Höhe verglichen, und notfalls entsprechend verkleinert.

Ein typischer Aufruf des max_image_height-Modifikators sieht wie folgt aus :

{$page->field.content|max_image_height:200}

Mit Hilfe des {capture}-Befehls von Smarty können Sie den Modifikator auch auf Bilder die direkt über das Template eingebunden werden anwenden.

{capture assign="bild"}
<img src="{page_url id=$bild_id media=1}">
{/capture}
{$bild|max_image_height:150}

scale_image

Dies ist keine Standard-Funktion von Smarty, der Aufruf steht Ihnen nur bei EGOTEC zur Verfügung. In der Smarty-Dokumentation werden Sie keine weiterführenden Hinweise zu dieser Funktion finden.
{scale_image} kann nur auf Bilder angewendet werden, die aus dem MM-Bereich von EGOTEC kommen

scale_image bildet eine Kombination von max_image_width und max_image_height .
Beim Aufruf von scale_image können Sie sowohl eine maximale Breite, als auch eine maximale Höhe angeben.

Ein typischer Aufruf des scale_image-Modifikators sieht wie folgt aus :

{$page->field.content|scale_image:100:100}

Der erste Parameter entspricht dabei der maximalen Bildbreite, der zweite Paramater der maximalen Bildhöhe.

Es ist dabei zwingend erforderlich beide Parameter anzugeben. Möchten Sie nur Höhe oder Breite definieren, sollten Sie statt {scale_image} besser {max_image_width} bzw {max_image_height} verwenden.

Mit Hilfe des {capture}-Befehls von Smarty können Sie den Modifikator auch auf Bilder die direkt über das Template eingebunden werden anwenden.

{capture assign="bild"}
<img src="{page_url id=$bild_id media=1}">
{/capture}
{$bild|scale_image:100:100}

truncate

Kürzt die Variable auf eine definierte Länge. Standardwert sind 80 Zeichen. Als optionaler zweiter Parameter kann eine Zeichenkette übergeben werden, welche der gekürzten Variable angehängt wird.

Beispiel

QuelltextSmarty Code:

{$artikelTitel}
{$artikelTitel|truncate}
{$artikelTitel|truncate:30}

Ausgabe

QuelltextHTML Code:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod...
Lorem ipsum dolor sit amet, co...

Weiter Informationen und Parameter dazu finden Sie in der Dokumentation auf Smarty.net.

date_format

Formatiert ein Datum in das gewünschte Format.

Beispiel

QuelltextSmarty Code:

{$smarty.now|date_format}
{$smarty.now|date_format:"%d.%m.%y %H:%M:%S"}
{$smarty.now|date_format:"%A, %B %e, %Y"}

Ausgabe

QuelltextHTML Code:

Dez 1, 2009
01.12.09 09:46:36
Dienstag, Dezember 1, 2009

Weiter Informationen und Parameter dazu finden Sie in der Dokumentation auf Smarty.net.

Weitere Smarty Modifikatoren

Eine komplette Liste der verfügbaren Smarty Modifikatoren finden Sie unter http://www.smarty.net/manual/de/language.modifiers.php.

Eigene Smarty-Plugins erstellen

Wenn Sie eigene Smarty-Plugins bereitstellen möchten müssen Sie diese entweder in Ihrem Site-Verzeichnis (z.B.:site/SITENAME/plugins/smarty/) oder im var-Verzeichnis (z.B.:var/lib/plugins/smarty/) hinterlegen.

Bei einem Systemupdate (Einspielen einer neuen Version) werden CMS-fremde Dateien in lib und bin gelöscht.

Sie können auch globale Smarty-Plugins definieren.
Diese werden in "site/_global/plugins/smarty/" hinterlegt und können von allen Mandanten aus genutzt werden.

Vorlagen im Editor

Informationen zum WYSIWYG - Vorlagenplugin (ehemals Blöcke)

Das Vorlagen Plugin für den WYSIWYG-Editor, ermöglicht es Ihnen, eine bestimmte HTML-Vorlage oder vordefinierten HTML-Code in den Editor einfügen.
Solche Blöcke können entweder speziell für jeden Mandanten oder global festgelegt werden.

Sie finden den Einfügen-Button in der Toolbar des Editors.

Einen neuen Block erstellen

Um einen neuen Block im WYSIWYG-Editor einzurichten, werden 2 neue Dateien im Verzeichnis skin/MANDANT/blocks/ erstellt:

Globale Blöcke können im Verzeichnis /skin/_global/blocks/ angelegt werden

Die Bezeichnung meinBlock müssen Sie durch den gewünschten Namen ersetzten

meinBlock_desc.php (die Kurzbeschreibung der Blocks)
meinBlock.html (der HTML-Code, welcher eingefügt werden soll)

Die Datei mit "_desc.php" erhält die Beschreibung Ihres Blocks, z.B:

QuelltextHTML Code:

Mein erster Block
<br/><br/>
Ein Bild mit Text

In die "meinBlock.html" fügen Sie den eigentlichen HTML-Code des Blocks ein:

QuelltextHTML Code:

<table border="0" width="100%>
<tr>
<td>
<img src="/url/zum/bild">
</td>
<td>
Dummy-Text Dummy-Text Dummy-Text Dummy-Text
</td>
</tr>
</table>

Vorschauansicht

Vorlage 2

Alle Dateien, die zu einem Block gehören, müssen immer den gleichen Namen besitzen.
Die Sortierung der Vorlagen erfolgt aufsteigend (A-Z).

Tipps und Tricks

JavaScript

IE IMG Node kopieren

Wenn man ein IMG-Node kopieren will, muss man zuerst das "src" Attribut setzten.

Der Internet Explorer setzt sonst alle anderen Attribute auf eine Standardeinstellung zurück.

IE Bug Flickering Hintergrundbilder

Wird im Internet Explorer mit Hintergrundbildern gearbeitet, so tritt manchmal ein unerwünschstes (und störendes) Flackern auf.

Mit JavaScript lässt sich diesem Effekt ein wenig entgegenwirken.

Folgender Befehl bewirkt, dass die Bilder im IE Cache gelagert werden und somit schneller abgerufen werden:

document.execCommand('BackgroundImageCache', false, true);

Variablennamen

Achten Sie bitte bei der Vergabe von Variablennamen darauf, dass ein Reiter im Adminbereich über verschiedene Template-Quellen (globale Anpassung, Seitentyp Anpassungen) gefüllt werden kann.

Verwenden Sie daher z.B. für "var f = document.forms['extra'] " nicht immer die Variable "f".

CSS

Listensymbole positionieren

wie man Listensymbole, die mit der Eigenschaft list-style-image eingebunden wurden, positionieren kann.

Hier ein Beispiel zur Erklärung:

<html>
<head>
<style>
ol {
   list-style-image: url(pic.gif);
}

li {
   padding : 0px;
   margin-top : -4px;
   font-size : 12px;
   line-height :17px;
   font-family:arial,helvetica,sans-serif;
}
/* Versteht nur IE (Weiche) */
li {margin-top:0px!}

</style>
</head>
<body>
<ol>
   <li>bla</li>
   <li>MMMMMMM</li>
   <li>bla</li>
   <li>BBBBBBBBBBB</li>
   <li>MMMMMMM</li>
   <li>bla</li>
   <li>bla</li>
</ol>
</body>
</html>

Das Symbol (pic.gif) hat oberhalb einen 4 Pixel-großen transparenten Rand, damit es im IE runterrutscht.

YAML

Sollten Sie für das Layout Ihrer Webseite auf Yaml zurück greifen, kann es in einigen Bereichen des CMS zu Einschränkungen kommen.

Vertikale und Horizontale Abstände bei Bildern

Dieses Problem tritt nur beim Einsatz des WYSIWYG-Editors aus Version 4 auf.

In der zentralen base.css-Datei von Yaml werden etliche Browser Resets gesetzt die für gleiche Ausgangsbedingungen für alle Browser sorgen sollen.
Eine dieser Anweisungen sieht wie folgt aus :

QuelltextCSS Code:

* { margin:0; padding:0; }

Dadurch werden sämtliche Innen- und Außenabstände aller HTML-Elemente auf Null gesetzt.
Leider interpretieren einige Browser diese Anweisung dann stärker als die in unserem Editor gesetzten Abstände bei Bildern.
Diese Funktion wird dann unter Umständen nicht mehr korrekt ausgewertet.

Sie können das Problem umgehen, indem Sie auf die direkte Eingabe von Abständen verzichten und statt dessen in der img.css entsprechende Klassen für Bilder definieren.
Mit einem !important ist es möglich, die Yaml-Anweisungen zu überschreiben.

Beispiele & Vorlagen

Hier finden Sie gebrauchsfertige Vorlagen und Problemlösungen zu verschieden Template-Umsetzungen auf die Sie wahrscheinlich während der Template-Entwicklung stoßen werden.

Aufklappbare Navigation

Ein zentrales Skript, über welches komplexe Navigationsstrukturen über Smarty erstellt werden können.

Dieses Skript verwendet die {nav}-Funktion und kann nach Belieben für Projekte angepasst und ändern werden.

navigation.html

QuelltextSmarty Code:

{**
* XHTML-konforme Navigation für Egotec-CMS
* ----------------------------------------
* Features:
* - Navigations-Tiefe einstellbar
* - Nur Navigation des aktuellen Pfads anzeigen
* - keine leeren UL-Tags (XHTML-komform)
* - Einstellbare Ausgangsseite ($page oder $rootId)
* - CSS-Klassen:
* - Pfad zur aktuellen Seite: "active" (a-Element)
* - Aktive Seite: "active current" (a-Element)
* - Aktuelle Tiefe: "levelx" (ul-Element), x steht dabei für die Ebene
*}
{* #######################
## Konfigurationen ##
####################### *}
{* Nur Seiten im aktuellen Pfad aufklappen *}
{assign var="path_only" value="1"}
{* maximale Tiefe der Navigation *}
{assign var="max_level" value="5"}
{* ID der Ausgangsseite (bitte gewünschte Modus auskommentieren) *}
{assign var="rootPage" value=$site->getRoot()} {* Navigation startet bei ID=1 *}
{**assign var="rootPage" value=$page**} {* Navigation zeigt immer nur aktuelle Unterseiten *}
{** Template-Pfad zur Include-Datei **}
{capture assign="childTpl"}{$egotec_conf.egotec_dir}skin/{$site->skin}/tpl/more_children.html{/capture}
{**
* Beispiele:
* 1) Vollständig aufgeklappte Navigation (Navigationstiefe: 5) = Sitemap:
* path_only=0, max_level=5,rootPage=$site->getRoot
*
* 2) Aufklappbare Navigation mit 3 Ebenen
* path_only=1, max_level=3, rootPage=$site->getRoot
*}
{* ##############
## Skript ##
############## *}
{** Aktuellen Pfad ermitteln **}
{get_path page=$page var="aktPfad" show_self=1}
{foreach from=$aktPfad item="p" key="k"}
<a href="{page_url page=$p}">{$p->field.name}</a>
{/foreach}
{assign var="level" value="1"}
<ul class="level{$level}">
{* Auf gleicher Ebene bleiben, wenn keine Kinder vorhanden sind *}
{if $rootPage == $page}
{assign var="max_level" value="1"} {* nur 1 Ebene anzeigen *}
{assign var="path_only" value="1"}
{* Prüfen, ob aktuelle Seite Unterseiten hat *}
{get_children page=$page var="kind" param.no_nav_hide=1 first_page=1}
{if !$kind} {* wenn nicht... *}
{* den aktuellen Pfad nochmal durchlaufen *}
{foreach from=$aktPfad item="p" key="k"}
{if $p->field.id != $page->field.id}
{assign var="page_parent" value=$p}
{/if}
{/foreach}
{* als letztes Kommt der Parent raum *}
{assign var="rootPage" value=$page_parent}
{/if}
{/if}
{nav id=$rootPage->field.id item="level1" param.has_children=1}
{* Liegt die Seite im Pfad? *}
{in_path path=$aktPfad id=$level1->field.id var="inpath"}
{if !$path_only}{assign var="inpath" value="1"}{/if}
<li><a class="{if $inpath}active{/if} {if $page->field.id == $level1->field.id}current{/if}" href="{nav_url}">{$level1->field.name}</a>
{if $level1->field.has_children && $level<$max_level && $inpath} {* Gibts Unterseiten? *}
{* Weiter mit Unterseiten *}
{include file=$childTpl start_id=$level1->field.id level=$level}
{/if} {* ENDIF: Gibts Unterseiten? *}
</li>
{/nav}
</ul>

more_children.html

QuelltextSmarty Code:

{**
* Navigation für Unterseiten (wird rekursiv aufgerufen)
*}
{* Aktuelle Ebene ermitteln *}
{assign var="level" value=$level+1}
<ul class="level{$level}">
{nav id=$start_id item="child" param.has_children=1}
{* Im Pfad? *}
{in_path path=$aktPfad id=$child->field.id var="inpath"}
{if !$path_only}{assign var="inpath" value="1"}{/if}
<li><a class="{if $inpath}active{/if} {if $page->field.id == $child->field.id}current{/if}" href="{nav_url}">{$child->field.name}</a>
{* Gibts Unterseiten ? *}
{if $child->field.has_children && $level<$max_level && $inpath} {* Nur maximal eingestelle Ebenen anzeigen *}
{include file=$childTpl start_id=$child->field.id level=$level}
{/if} {* ENDIF: Gibts Unterseiten? *}
</li>
{/nav}
</ul>

Einbinden der Navigation ins Template

Erstellen Sie entsprechenden HTML-Dateien mit dem Code (siehe oben)
Binden Sie die "navigation.html" an gewünschter Stelle im Ihrem Template ein
Nehmen Sie gewünschte Einstellungen im Skriptbereich "konfiguration" (Datei: navigation.html) vor.

Zweistufige Navigation

Ein recht häufiges Anwendungsbeispiel dürfte eine Navigation über mehrere Ebenen sein.

Ein entsprechender Code-Abschnitt könnte wie folgt aussehen:

<ul id="navmenu">
   {nav id=$site->rootId item=ebene1}
        <li><a href="{nav_url}">{$ebene1->field.name|escape:"html"}</a>
            <ul>
                {nav page=$ebene1 item=ebene2 param.has_children=1}
                    <li>
                        <a href="{nav_url}">{$ebene2->field.name|escape:"html"}</a>
                    </li>
                {/nav}
            </ul>
        </li>
   {/nav}
</ul>

Schauen Sie sich dazu bitte auch diese Seite an {nav} {nav_url}

Popupbildergallerie

im Multimediamandanten den Haken "Links auf Bilder für Popups" setzen (Verschiedenes)
in der skin das Template view_image.html anlegen
Hier sind folgende Variablen gegeben
- page
- original_site
- original_page
- original_skin
- url_dir

Bread-Crump-Navigation / Pfad

Bestandteil fast jeder Webseite ist eine sogenannte Brotkrumen-Navigation oder auch Pfad.
Dieser Pfad zeigt an, wo sich die aktuelle Seite innerhalb der Struktur des kompletten Auftritts befindet.
Ein einfaches Besipiel für eine solche Brotkrumen-Navigation könnte wie folgt aussehen :

{get_path page=$page show_self=1 var=pfad}
{if $pfad}
    {foreach from=$pfad item=seite name=pfad}
       <a href="{page_url page=$seite}">{$seite->field.name}</a>
       {if NOT $smarty.foreach.pfad.last}
          >>
       {/if}
    {/foreach}
{/if}

Rekursive Aufrufe

Über rekursive Aufrufe des {include}-Befehls können sie auch relativ einfach beliebig Tiefe Navigationen erstellen.
Dies eignet sich besonders, um z.B. eine einfache Sitemap zu generieren.

Dazu legen Sie z.B. direkt im Design-Verzeichnis eine Datei unterseiten.html an, die wie folgt aufgebaut ist :

{if $aktuelle_id}
     {navigation id=$aktuelle_id var=unterseiten}
{else}
    {navigation page=$aktuelle_seite var=unterseiten}
{/if}

{if $unterseiten}
    <ul>
    {foreach from=$unterseiten item=seite}
       <li>
            <a href="{page_url page=$seite}">{$seite->field.name}</a>
             {include file=unterseiten.html aktuelle_seite=$seite}
       </li>
    {/foreach}
    </ul>
{/if}

Jetzt muss man nur noch an passender Stelle (z.B. in der index.html) dieses Template zum ersten Mal einbinden :

{include file=unterseiten.html aktuelle_id=$site->rootId}

Um eine solche Rekursion zu realisieren greifen wir auf die Möglichkeit zurück dem {include}-Befehl zusätzliche Parameter übergeben zu können.
Näheres hierzu können Sie dem entsprechenden Kapitel des Smarty-Dokumentation entnehmen

Tel: +49 (0)6261 / 6743-0 Fax: +49 (0)6261 / 6743-29 E-Mail: info@egotec.com	EGOTEC GmbH Hauptstraße 130 D-74821 Mosbach
Erstellt mit EGOTEC® Internet: www.egotec.com © EGOTEC GmbH