Templates konfigurabel

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
frase
Posts: 2166
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Templates konfigurabel

Post by frase » Sun Dec 10, 2017 3:08 pm

lck wrote:Ich würde sagen, eine kompakte Zusammenfassung/Anleitung für Template-Ersteller wäre nicht verkehrt.
Sicher.
Aber was zuerst? (Henne oder Ei?)
Erst abstimmen - oder erst alles erklären?

Beim Schreiben bemerke ich den Usinn meiner Worte.
Natürlich erst erklären, damit getestet werden kann.
Ich werde demächst mal hier eine Zusammenfassung/Anleitung hintippen.
Kann etwas dauern.

cmb
Posts: 12794
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Templates konfigurabel

Post by cmb » Sun Dec 10, 2017 4:00 pm

frase wrote:Natürlich erst erklären, damit getestet werden kann.
Ich werde demächst mal hier eine Zusammenfassung/Anleitung hintippen.
Wäre nett, aber eigentlich kann man das auch aus dem template-config Branch erschließen, wo ja das fhs-simple-config Template enthalten ist.
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

frase
Posts: 2166
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Templates konfigurabel

Post by frase » Sun Dec 10, 2017 5:22 pm

Was ist geplant?

CMSimple_XH soll die Möglichkeit bieten, in Templates bestimmte Optionen einstellbar zu machen.
Alle bisherigen Templates können ohne jegliche Einschränkungen weiter verwendet werden.
Nur, wenn der Template-Gestalter es will, kann er solche einstellbaren Optionen in sein Template einfügen.

Wie sieht das aus?

Es gibt in der Anwendung von CMSimple_XH nur eine einzige optische Änderung im Admin-Menü:
Der Menüpunkt "Template" erhält Untermenüpunkte.

Wird als Standard-Template ein "normales" verwendet, dann sieht das Menü so aus:
cfg01.png
Wird als Standard-Template ein neues "konfigurierbares" verwendet, dann sieht das Admin_Menü so aus:
cfg02.png
Die Neuigkeit ist also, dass CMSimple_XH im Template-Ordner nachschaut, ob ein Ordner "config" und/oder ein Ordner "languages" vorhanden ist.
Falls ja, dann werden die zusätzlichen Menüpunkte verfügbar - falls nicht: siehe Bild 1.
Im Grunde funktioniert eigentlich alles ähnlich wie bei Plugins. (Hilfe zum Template ist noch nicht vorgesehen.)

Was muss der Template-Designer tun?
[ERSTER TEIL]


Da ich nur ein Laie bin, schreibe ich, wie ich es verstand. Bitte um Korrektur, falls sich hier Fehler einschleichen sollten.

Beispielhaftes Vorgehen (kann auch anders ablaufen).
1.
Erstelle ein Template inkl. CSS.
2.
Überlege dir, welche Dinge in diesem Template möglicherweise für den Anwender flexibel sein sollen.
Beispiel: Du hast im Header ein Logo vorgesehen. Ein Anwender will das Template aber nur für seine private Homepage verwenden und hat gar kein Logo.
Natürlich könnte der Anwender nun in der Template-Datei den Logo-Aufruf suchen und ihn entfernen.
Falls er aber nicht so recht weiß, wie das geht, könnte er vielleicht auch Schaden anrichten und das Template unbrauchbar machen.
Deshalb: Mach die Anzeige des Logos wählbar.
3.
Lege im Template-Ordner einen Unter-Ordner "config" an.
Darin legtst du eine Datei "config.php" an.
Bleiben wir beim Beispiel "Logo". Du möchtest das Logo bei der Auslieferung anzeigen. Der Inhalt dieser Datei muss dann in etwa lauten:

Code: Select all

<?php
$tpl_cf['header']['show_logo']="true";
Damit erscheint dann in der Template-Konfiguration ein Textfeld in dem steht "true" für anzeigen oder es ist leer "" für nicht anzeigen.
Das ist nicht besonders komfortabel. Besser wäre eine Checkbox zum An- oder Abhaken.
Also besser: Lege eine weitere Datei an "metaconfig.php".
Dort hinein schreibst du:

Code: Select all

<?php
$tpl_mcf['header']['show_logo'] = "bool";
"bool" bewirkt die Anzeige einer Checkbox. Das Ergebinis in der Template-Konfiguration:
cfg03.png
Du siehst im Bild das kleine blaue Fragezeichen, das beim Überfahren mit der Mouse einen Hilfetext anzeigen soll - und das natürlich in passender Sprache.
Das musst du jetzt noch nachholen.
4.
Lege im Template-Ordner einen weiteren Ordner "languages" an.
Beginne mit einer allgemeinen Datei, die immer verwendet werden kann, wenn keine passende Sprache vorhanden ist. Also "default.php".
Dort hinein kommt nun der Hilfetext für das Logo:

Code: Select all

<?php
$tpl_tx['help']['header_show_logo'] = "Whether to show the logo";
Danach legst du für jede gewünschte Sprache eine weitere Datei an. Zum Beispiel für Deutsch: "de.php".
Dort hinein gehört nun:

Code: Select all

<?php
$tpl_tx['help']['header_show_logo'] = "Soll das Logo im Header angezeigt werden?";
Das war nun schon die gesamte Konfigurationsmöglichkeit für die Anzeige des Logos - nur Eines fehlt noch:
Du musst natürlich jetzt die Logo-Anzeige noch im Template von der Konfiguration abhängig machen.
5.
Suche die Stelle in der template.htm, an der du das Logo anzeigst.
Beispiel:

Code: Select all

<img src="<?php echo $pth['folder']['templateimages']?>logo.png" alt="Mein Logo">
Kleide nun diesen Logo-Aufruf in eine Bedingung:

Code: Select all

<?php
if ($tpl_cf['header']['show_logo'] && file_exists($pth['folder']['templateimages'].'logo.png')):?>
<img src="<?php echo $pth['folder']['templateimages']?>logo.png" alt="Mein Logo">
<?php endif?>
Das wars. Ab sofort kann in der Template-Konfiguration gewählt werden, ob das Logo angezeigt werden soll - oder nicht.

Das ist natürlich nur ein sehr einfaches Beispiel, was aber die Möglichkeiten schon ganz gut illustriert.
Jetzt ist es der Kreativität unserer großartigen Template-Designer überlassen, sich noch viel mehr auszudenken.
Wichtig ist aber eines!
Denke genau darüber nach, was dem Anwender deines Templates nützlich sein könnte. Es hat keinen Zweck, alles Mögliche schaltbar zu machen.
Hier ist es nötig, sich in den Anwender "hinein zu versetzen", die praktischen/praktikablen Dinge durchzuspielen und erst dann zu werkeln ;-)

[Teil 1] hat sich bisher nur mit einfachen Konfigurations-Optionen beschäftigt. Du kannst also jetzt schon Dinge ein- und ausschalten. Du könntest auch zum Beispiel ein "helles" und ein "dunkles" Stylesheet bauen und dann die Verwendung im Template auf die gleiche Art und Weise, wie oben beschrieben steuern.
Tatsächlich geht aber noch viel viel mehr.
Zum Beispiel auch noch mit völlig dynamischen Stylesheets.
Das werden wir aber erst im [Zweiten Teil] behandeln.

Zum Weiterlesen, werfen Sie nun bitte eine ausreichend groß bemessene Münze in den dafür vorgesehenen Schlitz ;-)

Das war Spaß!
Morgen werde ich weiter schreiben.
You do not have the required permissions to view the files attached to this post.

Tata
Posts: 2797
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Templates konfigurabel

Post by Tata » Sun Dec 10, 2017 5:53 pm

+1
Solche Anleitungen machen alles totalhammermässig klarer. Bis heute hatte ich nur sehr nebelige Vorstellung, worüber es eigentlich gehen wird.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 2797
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Templates konfigurabel

Post by Tata » Sun Dec 10, 2017 6:50 pm

Getestet!
Ich hoffe, es verstanden zu haben.
+1 Anleitung - etwa so sollten alle "Usage" Absätze in Hilfedateien geschrieben werden.
Studiere weiter.
Soweit mein Test 1:
tpl_config_test_1.zip
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 2166
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Templates konfigurabel

Post by frase » Mon Dec 11, 2017 8:50 am

Was muss der Template-Designer tun?
Was bisher geschah ...
[Nachtrag zum ERSTEN TEIL]


Im Ersten Teil haben wir besprochen, wie man einzelne Elemente im Template (Beispiel Logo) über die Template-Konfiguration ein- und ausblenden kann.

Vielleicht sollte hier, als Ergänzung dazu, noch kurz auf Sprachvariablen eingegangen werden.
Für sprachabhängige Texte, kannst du unter "languages" Übersetzungen anbieten.

Beispiel:
de :: Impressum | en :: Legal Notice

Die einfache Variante:
In den Sprachdateien den betreffenden Text einfügen:

Code: Select all

// in "default.php"
$tpl_tx['text']['imprint'] = "Legal Notice";

// in "de.php"
$tpl_tx['text']['imprint'] = "Impressum";

// in "en.php"
$tpl_tx['text']['imprint'] = "Legal Notice";
Damit steht dieser Begriff in allen (definierten) Sprachen zur Verfügung.
Im Template lautet der Aufruf dann an der gewünschten Stelle:

Code: Select all

<?php echo $tpl_tx['text']['imprint'];?>
"Impessum" wird aber häufig gleich als Link zur Seite "Impressum" (de) oder "Legal Notice" (en) verwendet.
Deshalb wird der Aufruf im Template etwas komplizierter.
Da der Link-Text alle möglichen Zeichen enthalten könnte, muss das Linkziel so codiert werden, wie es dem Aufruf im Browser entspricht.

Code: Select all

<a href="?<?=XH_hsc(uenc($tpl_tx['text']['imprint']))?>"><?=XH_hsc($tpl_tx['text']['imprint'])?></a>
Das ergibt auf der ausgelieferten Seite einen Link mit folgendem Ziel:
de = ?Impressum
en = ?Legal-Notice

Das war ein Nachtrag zum Ersten Teil.
Der Zweite Teil folgt demnächst.

frase
Posts: 2166
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Templates konfigurabel

Post by frase » Mon Dec 11, 2017 10:44 am

Was muss der Template-Designer tun?
[ZWEITER TEIL]


Die bisher besprochenen Möglichkeiten, bestimmte Elemente im Template konfigurierbar zu machen, beruhen auf einem einfachen Prinzip:
Es wird ein Wert vorgegeben/konfiguriert.
Dieser Wert wird aus "config/config.php" und/oder aus "languages/%SPRACHE%.php" ausgelesen und anschließend per PHP im Template eingesetzt.
Das eröffnet schon viele Möglichkeiten.

Was ist nun aber mit bestimmten Styles in "stylesheet.css"?
Wie kann man solche Werte verändern?
CSS ist kein PHP - es geht also nicht, einfach PHP-Variablen in die "stylesheet.css" einzusetzen.

Beispiel:
Im Template "fhs-simple" werden hauptsächlich zwei Farben verwendet.
1. Farbe:
Schwarz (und seine Grau-Abstufungen) für Text, den Header, den Footer, den Seitenhintergrund und die Haupt-Navigation.
2. Farbe:
Orange (#f60) für die Linien im Header und Footer, die Rahmen der Newsboxen, für Buttons, für Link-Hover-Effekt ... und vieles andere mehr.
Die 2. Farbe wird also als Haupt-Kontrastfarbe an ziemlich vielen Stellen verwendet.

Wie kann man die 2. Farbe "auf einen Schlag" auf der gesamten Seite verändern?

Da "tricksen" wir ein wenig.
Einfach gesagt: Wir verwenden eine "stylesheet.css.php" in der wir die erforderlichen PHP-Variablen einsetzen können.
Werden in der Template-Konfiguration irgendwelche Verändeungen gespeichert, erzeugen wir eine normale "stylesheet.css" aus der PHP-Datei, in der alle PHP-Variablen mit den Werten aus der Konfiguration ersetzt sind.
Wir haben also am Ende eine ganz normale CSS-Datei - wie immer schon.

Wie geht das?

Zunächst machst du die 2. (Kontrast-)Farbe konfigurierbar, wie im Ersten Teil beschrieben.

Code: Select all

// in config.php - mit Orange #f60 als Standard
$tpl_cf['colors']['highlight-color']="#f60";

// in metaconfig.php einzeiliges Texteingabefeld vorgeben
$tpl_mcf['colors']['highlight-color']="string";

// in den Sprachdateien die Hilfe-Texte dazu
$tpl_tx['help']['colors_highlight-color']="The contrasting color. Default #f60 = orange";
Nächster Schritt:
Benenne die "stylesheet.css" um in "stylesheet.css.php".

In diese neue PHP-Datei setzt du ganz an den Anfang:

Code: Select all

<?php
$color1 = $tpl_cf['colors']['highlight-color'];
?>
Hiermit wird einfach der Wert für die Kontrastfarbe aus der Konfiguration gelesen und in der neuen Variable "$color1" gespeichert.
("$color1" fand ich irgendwie kürzer und lesbarer)

Jetzt kannst du alle im Stylesheet vorkommenden Farbdefinitionen für Orange ersetzen mit "$color1".
Dein "Suchen und Ersetzen" muss also konkret lauten:
Suche: #f60
Ersetze mit: <?=$color1?>

Ergebnis (einige Beispiele):
#header { border-bottom: 5px solid #f60; ... wird zu: #header { border-bottom: 5px solid <?=$color1?>;
#footer { border-top: 5px solid #f60; ... wird zu: #footer { border-top: 5px solid <?=$color1?>;
und so weiter ...
Alle Vorkommen von Orange #f60 sind also ab sofort variabel - entsprechend der Template-Konfiguration.

Jetzt bleibt nur noch eine Frage:
WIE und WANN erzeugt/aktualisiert das System die normale "stylesheet.css"?

Die "stylesheet.css" muss jedesmal neu erzeugt werden, wenn Änderungen in der Konfiguration vorgenommen wurden. Dazu werden die Zeitstempel, der "config.php" und der "stylesheet.css.php" verglichen - und das jedesmal, wenn eine Seite mit dem konfigurierbaren Template aufgerufen wird.
Wird eine Veränderung festgestellt, wird die "stylesheet.css" neu erstellt.
Um das zu erreichen muss in "template.htm" ganz oben, gleich nach der DOCTYPE-Deklaration folgender Code eingefügt werden:

Code: Select all

<!DOCTYPE HTML>
<?php
if (!file_exists($pth['file']['stylesheet'])
    || filemtime("{$pth['file']['stylesheet']}.php") > ($tpl_temp = filemtime($pth['file']['stylesheet']))
    || filemtime($pth['file']['template_config']) > $tpl_temp) {
        tpl_generateStylesheet();
}
function tpl_generateStylesheet() {
    $tpl_cf = $GLOBALS['tpl_cf'];
    ob_start();
    include("{$GLOBALS['pth']['file']['stylesheet']}.php");
    file_put_contents($GLOBALS['pth']['file']['stylesheet'], ob_get_clean());
}
?>
So.
Nun habt ihr das grundlegende Rüstzeug, um Templates sehr flexibel zu gestalten.
Wer das Ganze erst einmal durchdrungen hat, wird die schier unendlichen Möglichkeiten erkennen können - und hoffentlich auch nutzen.

Wer das hier besprochene ausprobieren und nachvollziehen möchte, muss sich den template-config-Branch herunterladen.
Ein aktuelles Template mit etwas mehr Konfigurationsmöglichkeiten ist hier verfügbar.
Wähle dieses Template "fhs-simple-cfg-05" als Standard-Template im Branch.
Anhand dieses Templates kannst du weitere Möglichkeiten nachvollziehen, z.B. Umschalten der Schriftarten ...

Viel Spaß!

olape
Posts: 604
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Templates konfigurabel

Post by olape » Mon Dec 11, 2017 11:59 am

frase wrote:So.
Nun habt ihr das grundlegende Rüstzeug, um Templates sehr flexibel zu gestalten.
Wer das Ganze erst einmal durchdrungen hat, wird die schier unendlichen Möglichkeiten erkennen können - und hoffentlich auch nutzen.
Sehr gute Erklärung. Nun hoffe ich, es zeigt Wirkung.

lck
Posts: 1324
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Templates konfigurabel

Post by lck » Wed Feb 21, 2018 6:56 pm

cmb wrote:
Sun Dec 10, 2017 4:00 pm
Wäre nett, aber eigentlich kann man das auch aus dem template-config Branch erschließen, wo ja das fhs-simple-config Template enthalten ist.
Nur zur Info: Problem template-config Branch mit Plugin Onepage_XH 1beta2

Wollte gerade mal ein OnePage-Template mit Sprachdateien damit testen, beim Aufruf der Website erscheint eine weiße Seite mit dem Hinweis:
Onepage_XH detected an unsupported CMSimple_XH version.
Uninstall Onepage_XH or upgrade to a supported CMSimple_XH version!
Ursache ist der noch nicht kompilierte Branch, der die CMSimple_XH-Version als "@CMSIMPLE_XH_VERSION@ Released: @CMSIMPLE_XH_DATE@" ausgibt.

Quick-Fix: ./plugins/onepage/index.php Zeile 19-31 auskommentieren

Code: Select all

/* if (!defined('CMSIMPLE_XH_VERSION')
    || strpos(CMSIMPLE_XH_VERSION, 'CMSimple_XH') !== 0
    || version_compare(CMSIMPLE_XH_VERSION, 'CMSimple_XH 1.6.3', 'lt')
) {
    header('HTTP/1.1 403 Forbidden');
    header('Content-Type: text/plain; charset=UTF-8');
    die(
        <<<EOT
Onepage_XH detected an unsupported CMSimple_XH version.
Uninstall Onepage_XH or upgrade to a supported CMSimple_XH version!
EOT
    );
} */
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply