Template versch. Header-Backgrounds

[HyteRaph]

Hey Leute,

ich würde auf meiner Seite gerne im Header-Bereich je nach ausgewählter Kategorie (z.Z. 6) verschiedene Backgrounds anzeigen lassen. Im Grunde fällt mir da nur ein, das Content-Template zu benutzen und je Kategorie ein neues Template zu erstellen. Bei 6 verschiedenen ist das ja noch relativ zahm, aber ginge es auch in einem Haupttemplate? Also dass ich nur ein Content Template benutze, welches je nach Kategorie/Seite ein neues Background im Header anzeigt? Unter Umständen möchte ich zukünftig die einzelnen Seiten mit anderen Headerbildchen versorgen. Und da die Seite 2-sprachig ist, würde da im Nachhinein doch einiges an Arbeit anstehen. Da wäre es natürlich nett, wenn es dynamisch mit einem Template zu realisieren wäre. Sofern mir das nicht mehr Probleme/Arbeit bereitet.

Beste Grüße

[nameless1]

gibt je nach konkretem fall mehrer ansätze. einer davon wäre:
im header eine class mit der aktuellen seite und kategorie ausgeben lassen. diese dann jeweils ansteuern via css/ template. gibt es auch bereits lösungen hier im forum. finde ich nur gerade nicht.

ein andere wäre ggf. mit dem seit gestern neuen [else] tag zu arbeiten.

gruß,
nml1

[HyteRaph]

Hey nameless1,

danke für die schnelle Antwort. Die Methode die aktuelle Seite ausgeben zu lassen klingt erstmal ganz gut. Ich werde mal schauen, ob ich etwas finde, wie ich das tue. Falls du noch einen passenden Threat dazu findest, wäre ich dafür sehr dankbar. Wenn ich etwas dazu finde, werde ich es auch mal noch hier einhängen.

Danke und Grüße

[HyteRaph]

Ich habe gerade einen Forumseintrag von einem fremden CMS gefunden, wo eine ähnliche Funktion gesucht wird. Da wird folgender Code angegeben, um die class zu setzen:

Code: Select all

class="<?php if($this->replaceInsertTags('{{env::page_alias}}') == 'XXXXX'): ?>active<?php endif; ?>"

ich glaube damit kann ich erstmal anfangen zu arbeiten. Verstehe ich es richtig, wenn ich dem header-div dann diese class zuweise? Dann müsste ich ja nur noch die CSS Datei bearbeiten, und für die jeweiligen aliases classes erstellen und das jeweils gewünscht background einstellen.

[top]

Ich befürchte du wirst mit einem Code-Schnipsel für contao nicht weit kommen.

Es gibt ein paar Ansätze wie man dein Vorhaben umsetzen könnte. Was ich da versuchen würde, hängt vom angestrebten Layout ab.

Es wäre also einfacher, wenn es schon mal was zu Sehen gäbe - und wenn es nur ein grober Entwurf ist.

Ergänzend dazu noch ein paar Fragen:
Möchtest du es als Hintergrundbild einsetzen, weil du darauf noch weitere Elemente (Seitenname, Navi usw.) platzieren möchtest?
Soll der Bereich immer exakt gleich groß sein?
Wie komfortabel sollen sich weitere Motive ergänzen lassen? (Machst du das nur selbst, oder soll das auch jemand anderes mit weniger Erfahrung pflegen können?)

[kmstario]

Hallöchen,

das geht ganz easy im Template unter Vorlagen und mit etwas CSS:

1. Lösung:
Sicher gibt es einen Container, wo das Bild hinein soll:

Code: Select all

<div id="egal" class="bildbox-{CATEGORY}">Inhalt</div>

/* Dann noch die passende CSS */
<!-- CSS: .bildbox-meinPunkt { background..usw } -->

Damit kann man jedem Menüpunkt eine CSS Klasse nach Bezeichung des Strukturlevels geben.

2. Lösung:
Schwierig wirds bei Sonderzeichen, Leerzeichen etc. aber dafür hat FlipFlop mal in der Wiki das hier hinterlegt:
Standart Tags zusammengefasst

Da gibt es z.B. als Erweiterung das {CATEGORY_CLASS} Tag.
Damit kann man die CSS Klasse abfragen, die im Backend->Admin->Menüpunkt editieren neben dem "Alias der Seitenebene" eingegeben werden kann. Ist frei wählbar für jeden Punkt.

Das Skript liefert suuper viele Varianten, das gibt alles mögliche aus, sehr hilfreich und funktioniert aktuell 1a.
Da wäre auch die Lösung via Artikel dabei, falls es mehrere Artikel in einem Punkt sind.

3. Lösung:
Letzte Möglichkeit ist es über die {CP-ID} zu Steuern. Dazu müssten dann aber CPs fest in dem Menüpunkt liegen, kaum relevant denke ich.
Dann kann man ja gleich in jedem Punkt ein Bilder(div) benutzen.

ich hoffe das hilft,

VG ANdreas

EDIT:: 4. Lösung:
Achso jetzt habe ich doch glatt noch eine weitere Variante vergessen <body class=myclassX" id="myidX">

einfach mal die: conf.template_default.inc.php öffen und etwa Zeile 282 schauen

Code: Select all

// this is used to inject <body> Tag by attribute "id" and/or "class"
// if value is empty '' body tag will not be injected, otherwise it will use
// current category "valueID"
$template_default['body']['id'] = '';
$template_default['body']['class'] = 'myclass';

Wenn man da eine Klasse oder id hinterlegt, wird im Bodytag eine Klasse und/oder id in der Form myclass2, myclass3 ausgegeben.

Nun aber ...

[kukki]

Die wohl doch einfachste Methode wäre die bereits von mir und pepe vorgestellte Variante, dafür ein kleines Script in /root unter "image_check.php" abzulegen und sich mit levelbasierter Menüführung (flipflop) auseinanderzusetzen. Diese bringt eine Menge Vorteile und Ordnung in ein Projekt, ich arbeite gar nicht mehr anders. Hier richtig geplant ist die halbe Miete!

Code: Select all

<?php
// ----------------------------------------------------------------------------------
//     : : :
//     0 1 2 3 4 5           <------LEVELnr.
//     | | | | |
// ----HOME                [ID 0]
// ----|-deutsch           [ID 1]
// ----|-|-start           [ID 2] <
// ----|-|-mitarbeiter     [ID 3] <
// ----|-|-partner         [ID 4] <
// ----|-|-kontakt         [ID 5] <
// ----|-|-impressum       [ID 6] 
// ----|-|-internes        [ID 7]  versteckt
// ----|-|-|-menü1-5       [ID 8]
// ----|-|-|-|-|-menüpkt1   [ID 9]
// ----|-|-|-|-|-menüpkt2   [ID 10]
// ----|-|-|-|-|-menüpkt3   [ID 11]
// ----|-|-|-|-|-menüpkt4   [ID 12]
// ----|-|-|-|-|-menüpkt5   [ID 13]
// ----|-polski .....

//
// -----------------------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// -----------------------------------------------------------------------------------
    $banner = 'bruecke';
    if( isset($GLOBALS['LEVEL_ID'][1]) )
      {
      switch( $GLOBALS['LEVEL_ID'][2])
      {
      case 2: case 18: $banner = 'ueber_uns'; break;
      case 4: case 20: $banner = 'partner';   break;
      case 3: case 19: $banner = 'aktuelles'; break;
      case 5: case 21: $banner = 'kontakt';   break;
      }
      {
      switch( $GLOBALS['LEVEL_ID'][4])
      {
      case 9:  case 25: $banner = 'beratung-pl-de';  break;
      case 10: case 26: $banner = 'fachkraft';       break;
      case 11: case 27: $banner = 'foedermittel';    break;
      case 12: case 28: $banner = 'veranstaltungen'; break;
      case 13: case 29: $banner = 'projektmanagment';break;
      }
      echo '<img src="picture/banner/'.$banner.'.jpg" border="0" width="728"  height="132" alt="" />';
      }
      }
?>

Eigentlich arbeitet man hier nur mit variablen Links/ Urls.
In der HTML-Vorlage HEADER wird nur noch folgendes eingesetzt:

Code: Select all

<div class="headerBild">{PHP:image_check.php}</div>

Vorteil:
Einfache Pflege/ Wartung, kein Upgrade überschreibt händisch veränderte Standardeinstellungen in *.conf.php-files, das Script läßt sich für andere Dinge aus- und umbauen (varibale Links/ Mehrsprachigkeit) - eigentlich ein einfaches Teil, das auch PHP-Unkundige verstehen werden, wenn man sich mit der Materie phpWCMS auseinandersetzen will.

Diese reicht in etwas an diese Lösung ran von

1. Lösung:
Sicher gibt es einen Container, wo das Bild hinein soll:

Code: Select all

<div id="egal" class="bildbox-{CATEGORY}">Inhalt</div>

/* Dann noch die passende CSS */
<!-- CSS: .bildbox-meinPunkt { background..usw } -->

Damit kann man jedem Menüpunkt eine CSS Klasse nach Bezeichung des Strukturlevels geben.

[Oliver Georgi]

Im Prinzip suchst Du keine dynamische Lösung. Ich würde es über einen der folgenden Konfigurationswerte in der conf.template_default.inc.php und mit CSS lösen:

Code: Select all

$template_default['body']['id'] = 'cat';
$template_default['body']['class'] = 'cat';

Gerendert werden dann zusätzliche Attribute im <body>-Tag analog:

Code: Select all

<body id="cat45" class="cat45">

wobei die 45 für die Kategorie ID steht.

Code: Select all

/* Globale Headerdefinition */
header {
    position: relative;
    width: 1000px;
    height: 400px;
    background: #fff url(myheader.png) no-repeat center center;
}
/* Ausnahmen */
.cat45 header, #cat45 header {
    background-image: url(cat45-header.png);
}
.cat5 header, #cat5 header {
    background-image: url(cat5-header.png);
}

Damit ist es ein leichtes, entsprechende Headerbilder als Ausnahme anzusteuern. Es ist auch nicht nötig ID und Class zu nutzen. Ich würde nur ID (#catXX) benutzen.

PHP ist aber vollkommen überflüssig an der Stelle.

[kukki]

Genauuuuu Oliver

conf.template_default.inc.php

- nächstes Update drüber und schüüüüüß mit der Änderung. Wer als Anfänger/ Mitleser/ Beginner denkt daran beim Update auch dieses File zu sichern. Meinen Sakasmus must Du schon entschuldigen. Ich mache das zwar, aber habe es auch schon vergessen nach einer Änderung ,,,,

@HyteRaph:
Nach dieser Auswahl an Lösungsvorschlägen mach das, was Du verstehts, was Du überblickst und was Du nachvollziehen kannst. Es kennt ja niemand hier Deine Erfahrungen, wenn diese halt noch nicht sooo üppig sind.... es muss funktionieren, kein Murks soll entstehen und man muss das jederzeit mit ein paar Klicks auch problemlos woanders / andere PHPWCMS-Seite wieder benutzen können. Nach 20-30 solcher Seiten weißt Du nicht mehr, was Du wann, wo wie geändert hast, an welchen Parametern Du geschraubst hast.

[kmstario]

Hallo,

nächstes Update drüber und schüüüüüß mit der Änderung

Wer macht den auch ein Update, ohne vorher ein Backup zu ziehen

Zudem steht in der Update Anleitung auf der WIKI (wo Anfänger am ehesten landen würden, denk ich mal)

Code: Select all

08. Steuerdatei abgleichen
Die vorhandene Datei /config/phpwcms/conf.template_default.inc.php der alten Version mit der neuen abgleichen.

Als Tipp hätte gäbe es noch:
Ich erstelle mir immer zu jedem fertigen Kundenprojekt eine "Chancelog" Datei, die mit im Rootverzeichnis liegt, in der ich alle Anpassungen reinschreibe.
So weiß ich auch nach Jahren noch, was ich individualisiert habe.

Die Lösung 5, welche auch Oliver empfiehlt, ist ganz sicher die sinnvollste.

Wie es immer so ist, das beste fiel mir erst zum Schluss ein

Vg Andreas

[HyteRaph]

Hui, hier hat sich ja wieder einiges geregt! Danke für die vielen Antworten. Ich habe gerade viel zu tun und kann an der Seite gerade nicht weiterarbeiten. Ich werde in den kommenden Tagen die Posts genau durchlesen und mich dann wieder melden. Vielen Dank nochmal!

[kukki]

Du hast Post