1 - Modell für den Header
Das Datenbankmodell für die HeaderPage
Um ein Bild in den Header anzuzeigen, bauen wir eine einfache Upload-Möglichkeit. Dazu verwenden wir die Silverstripe-Klasse Image. Sie benutzt in der Datenbank einen Varchar mit Namen 'Image'. In der Backend-Anzeige wird ein 'UploadField' erzeugt. Also genau das, was wir für unseren Header brauchen.
Der Seitentyp: HeaderPage
1. Erstelle die Datei: HeaderPage.php, Ordner: mysite/code/HeaderPage.php
2. Kopiere den Code der Klasse, füge ihn ein und speichere die Datei.
<?php
class HeaderPage extends Page {
}
class HeaderPage_Controller extends Page_Controller {
}
Für die Datenbank nimmst du die Relation 'has_one', es soll nur jeweils ein einziges Bild gewählt werden können. Also kann nur eines hochgeladen und die Informationen nur einmal hinterlegt werden.
3. Füge die Datenbank-Realtion in den Code ein.
<?php
class HeaderPage extends Page {
private static $has_one = array(
'Photo' => 'Image'
);
}
class HeaderPage_Controller extends Page_Controller {
}
In der Navigation und Suche ausblenden
Die HeaderPage soll nicht in der Navigation und der Suche angezeigt werden. Es handelt sich ja nicht um einen üblichen Seiteninhalt. Selbstverständlich kann diese Einstellung auch bei den 'Einstellungen' der HeaderPage über eine Checkbox ausgeblendet werden. Da ich aber meine KundInnen nicht mit dem erlernen dieses Verhaltens belasten will, ist es edler, dies im Standardverhalten des Controllers festzulegen.
4. Füge den Codeblock für $defaults in die Datei ein
...
private static $has_one = array(
'Photo' => 'Image'
);
static $defaults = array (
'ShowInMenus' => false,
'ShowInSearch' => false
);
...
Eine eigene Ikone für HeaderPage
Du kannst deine PageTypes mit einer Ikone im Backend individualisieren. Das schafft Sicherheit und Übersicht beim bewirtschaften. Die Ikone ico-header.png befindet sich bereits im Ordner: theme/meintemplate/images/ico-header.png (meintemplate-tutorial4.zip)
5. Füge den Verweis auf die Header-Ikone in die Datei ein
...
private static $has_one = array(
'Photo' => 'Image'
);
private static $icon = "themes/meintemplate/images/ico-header.png";
} ...
Die Eingabefelder für das Backend
Im Backend erzeugen wir einen neuen Reiter 'Hintergrundbild' für den datei-Upload. Darin platzieren wir das Upload-Field für das Bild.
6. Füge den Code-Block der Funktion getCMSFields() in deine Datei ein.
...
private static $has_one = array(
'Photo' => 'Image'
);
private static $icon = "themes/meintemplate/images/ico-header.png";
public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Hintergrundbild", new UploadField('Photo'));
return $fields;
}
...
HeaderPage.php (Zur Kontrolle ganz abgebildet)
<?php
class HeaderPage extends Page {
private static $has_one = array(
'Photo' => 'Image'
);
static $defaults = array (
'ShowInMenus' => false,
'ShowInSearch' => false
);
private static $icon = "themes/meintemplate/images/ico-header.png";
public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Hintergrundbild", new UploadField('Photo'));
return $fields;
}
}
class HeaderPage_Controller extends Page_Controller {
}
Die HeaderPage publizieren und testen
7. Speichere/Publiziere die Datei mysite/code/HeaderPage.php
8. Führe /dev/build/ aus, um Silverstripe zu aktualisieren
9. Erstelle eine neue Seite 'Header' in deinem Seitenbaum
Die Neue Seite mit dem Inhalt für den Header
Das Hintergrundbild hochgeladen
(bereitgestellt im Templateordner: meintemplate/images/header-weblabor.png)
Weiter mit dem Controller für den Footer