Kopf (Header mit Javascript) soll auf Unterseiten wieder statisches Bild sein

[supercat]

Nun bin ich an dem Punkt, an dem ich einfach nicht mehr weiterkomme. Die Übung soll sein, dass die Unterseiten einen anderen Header haben als die Startseite. Stopp, ich weiß wie das üblicherweise mit Bildern geht, z.B. so:

Code Auswählen Erweitern

<div class="header" style="background:url({BASE_URL}layouts/LayoutName/grafiken/BG_{CATEGORY}.jpg);">

Mein Problem: Mein Seitenkopf ist eine Slideshow  Dafür habe ich einen eigenen Header gebaut - verschachtelte Flächen. Auf der Startseite ist das durchaus hübsch, auf den Unterseiten nervt es womöglich. Da wollte ich gern wieder ein (einziges) Bild haben. Aber ich bekomme absolut nicht die Kurve. Hat jemand eine Idee? Womöglich geht es nur über ein Javascript?

Alles zu diesem Slideshow-Header habe ich hier: http://www.motourist.de aufgeschrieben. Will hier nicht das Forum zumüllen.

[supercat]

Na, hat noch keiner eine Idee? Gut, steht ja auch erst seit kurzem hier  Inzwischen hatte ich mir gedacht, bastelst mal eine kleine Abfrage. Die steht in Head der Template-Datei und sieht so aus:

Code Auswählen Erweitern

<script type="text/javascript">
function Banner () {
  var Slide = {CATEGORY_URL};
  if (Slide != Startseite) {
    <div class="banner_a"><div class="banner_b"><div id="slideshow"><img class="start" src="layouts/MeinLayout/bilder/image-001.jpg" /></div><br /></div><div class="banner_logo"><img src="layouts/Mein Layout/grafiken/banner.png" alt="banner"><br></div></div>;
  } else {
    <div class="header"></div>;
  }
}
</script>

Dort, wo im Body sonst das Header-DIV steht habe ich die Funktion eingefügt:

Code Auswählen Erweitern

<div class="main">
<script type="text/javascript" language="JavaScript">Banner();</script>
<div class="maincontent">

"main" und "maincontent" habe ich nur mal zum Verständnis mit hingeschrieben. Beim Seitenaufruf bekomme ich zwar keine Fehlermeldung - ist ja auch nicht übel. Aber es wird mir auch nirgends ein Banner angezeigt 

Eigentlich müsste es funzen. Muss eventuell der Script-Aufruf im Body anders sein? Ich sehe den Wald vor lauter Bannern nicht mehr...

[supercat]

Auf die Gefahr hin, dass ich hier mit mir selbst rede: Per Javascript scheint mein Wunsch nicht in Erfüllung zu gehen. Nachdem ich dem Wahnsinn schon nahe war, habe ich mir mal in Ruhe die index.php angeschaut. Hier wird die template.html eingelesen - und fertig. Das passiert offenbar nur einmal und nicht bei jedem Klick auf eine neue Kategorie/Seite. Wenn dem so ist, dann kann wahrscheinlich nur ein Hack in der index.php helfen. Oder was sagen die Coder? Ansonsten müsste ich statt eines speziellen Bildes (siehe erstes Posting) eine spezielle HTML-Seite als Header-Background einbinden. Na ja, sonderlich elegant wäre das nicht. Schau'mer mal 

[HPdesigner]

Dann unterbrech ich mal dein Monolog, aber ich weiß nicht recht, ob dir das weiterhilft. 
Hattest du das replace Plugin denn jetzt mal ausprobiert? Das sidebar Plugin hat ein ähnliche Funktionalität, wie du sie benötigst. Dabei ist doch die Idee, dass du einen Platzhalter in der template.html platzierst, z.B.

Code Auswählen Erweitern

<div class="header">{Sidebar}</div> und diesen dann mit jeder Inhaltsseite befüllst. Auf der Startseite also z.B. unter den Content setzt

Code Auswählen Erweitern

{Sidebar|<div class="banner_a">
<div class="banner_b">
<div id="slideshow">
<img class="start" src="layouts/Ihr Layout/bilder/image-001.jpg" /></div><br />
</div>
<div class="banner_logo">
<img src="layouts/Ihr Layout/grafiken/banner.png" alt="banner"><br>
</div>
</div>} und auf den Unterseiten entsprechend die statischen Bilder

Code Auswählen Erweitern

{Sidebar|[bild|...]}
Oder versteh ich dein Problem falsch? Die Funktionalität des Replace Plugins ist glaub ich ähnlich, aber das hab ich noch nciht verwendet...

[HPdesigner]

Ah, moment, du arbeitest mit der 1.12beta3 right? Sry, das hatte ich ganz übersehen, die habe ich nie benutzt und weiß nicht, was da geht und was nicht.
Eine weiter unschöne Lösung, die mir einfällt, wäre, direkt in der template.html PHP auszuführen... das sollte in dieser Moziloversion noch funktionieren, ist aber nicht empfehlenswert. In 2.0 spätestens geht das nicht mehr.
Beispiel:

Code Auswählen Erweitern


<div class="header">
<?php 
if (isset($_GET['cat']) and $_GET['cat'] != 'Startseite') {
echo '<div class="header" style="background:url({BASE_URL}layouts/LayoutName/grafiken/BG_{CATEGORY}.jpg);">';
} else {
echo '<div class="banner_a"> 
<div class="banner_b"> 
<div id="slideshow"> 
<img class="start" src="layouts/Ihr Layout/bilder/image-001.jpg" />
</div>
</div> 
<div class="banner_logo"> 
<img src="layouts/Ihr Layout/grafiken/banner.png" alt="banner" /> 
</div> 
</div>
';
}
?>
</div>

Du Fragst per GET Variable ab, ob du auf der Startseite bist, oder nicht und gibst dementsprechend Code aus... Normalerweise schlag ich solche Lösungen nicht vor, aber das ist vlt noch besser, als in der index.php rumzuhacken...

[supercat]

Wow, der PHP-Code sollte es tun. Aber ich gebe Dir recht, der wäre im Template nicht so gut aufgehoben. Das Plugin lungert noch auf der Festplatte herum. Hatte ich bei der entnervten Probiererei ganz vergessen. Ich werde es mir mal gleich vorknöpfen. Besten Dank für die Tipps.

Übrigens: Gestern hatte ich noch probiert, statt eines Background-Bildes eine HTML-Seite einzubinden. Das hat leider nicht funktioniert. Selbst als ich die ganze Sache per iframe reingehangen hatte, wollte das Teil nicht parieren. Kein Plan, warum das nicht ging. {CATEGOR} sollte doch in 1.12 funktionieren? Jetzt stürze ich mich aber erst mal auf das Plugin und melde mich dann wieder 

[supercat]

@HPdesigner: Nun bin ich an dem Punkt, wo ich nur noch heulen könnte Das will partout nicht funktionieren. Mit Sidebar wird nichts angezeigt. Als ob mein Mozilo sich weigert, die Syntax zu verstehen. Der Hammer: Der PHP-Code wird nicht verarbeitet. Baue ich den ein, bekomme ich folgendes angezeigt:
'; } else { echo '
(Hier steht mein Slidebanner, der mit den vielen Divs)
'; } ?>

Erst dachte ich, dass es am Code liegt, weil ins Header-Div noch mal das gleiche Div geladen wird:

Code Auswählen Erweitern

<div class="header">
<?php 
    if (isset($_GET['cat']) and $_GET['cat'] != 'Startseite') {
        echo '<div class="header" style="background:url({BASE_URL}layouts/LayoutName/grafiken/BG_{CATEGORY}.jpg);">';

Das habe ich noch geändert in:

Code Auswählen Erweitern

<div class="header">
<?php 
    if (isset($_GET['cat']) and $_GET['cat'] != 'Startseite') {
        echo '<div style="background:url({BASE_URL}layouts/LayoutName/grafiken/BG_{CATEGORY}.jpg);"></div>';

Hat aber auch nichts gebracht. Nur was unter "else" steht, wird angezeigt und oben unten mit Code-Schnipseln umrahmt. Selbst wenn ich auf die freigegebene Beta4 umsatteln würde, käme vermutlich das Gleiche heraus. Denn eigentlich hätte ja schon mein Javascript funktionieren sollen, wenn bei jedem Seitenwechsel die Template-Datei neu eingelesen wird. Mann, ist das übel 

[djr]

Was haltet Ihr von folgendem Ansatz:

Zuerst: (mehr dazu hier)

Code Auswählen Erweitern

class="{PAGE_NAME}"
<!-- oder -->
class="{CATEGORY_NAME}"
<!-- oder -->
class="{CATEGORY_NAME} {PAGE_NAME}"
Dann:
Per JS fragen, ob die Klasse "Startseite" ist.
Wenn ja, Javascript den header-Code austauschen lassen.

[HPdesigner]

@ supercat:
Dein Javascript hat vermutlich nicht funktioniert, weil du an dieser Stelle:

Code Auswählen Erweitern

  var Slide = {CATEGORY_URL};
  if (Slide != Startseite) {nicht {CATEGORY_URL} sondern {CATEGORY_NAME} brauchst. Hat mich djr's Anregung drauf gebracht.

@djr: sollte so funktionieren. Das Problem beim JS könnte sein, dass beim Laden der Seite u.U. ein sichtbarer Delay auftritt, bis der Effekt eintritt...

[supercat]

@HPdesigner: Ich werde es mal mit _NAME versuchen. Aber ich hatte die ganze Zeit das Gefühl, dass die Syntax nicht akzeptiert wird.

@djr: Auf diesen Tipp war ich auch schon gestoßen, hatte ihn aber bis dato wegen des Syntax-Rätsels nicht versucht. Das gehe ich jetzt an.

Trotzdem bleibt es mir ein Rätsel, weshalb der von HPdesigner vorgeschlagene PHP-Code nicht vollständig akzeptiert wird. Als ob im Template die PHP-Anweisung wie normales HTML behandelt wird 

[walross]

und wenn Du den header für die Startseite einfach mit dem html-Tag direkt in der Inhaltsseite definierst?

[supercat]

Das Problem: Die Inhaltsseite befindet sich im {CONTENT}-Bereich. Der Header befindet sich aber darüber, außerhalb vom Main-Div. Darum wird wahrscheinlich auch die Sidebox nicht funktionieren. Sie stellt Inhalte im Content-Bereich dar, nicht aber außerhalb. Ich könnte höchstens mal versuchen, den Header nach dem Maincontent-Div einzubauen. Ein Versuch ist es wert.

Den Header lediglich als HTML-Tag in die Startseite einzubauen, hätte jedoch zur Folge, dass ich auch auf den anderen Seiten den gewünschten Header einbauen müsste. Schnauf.

@djr: Bin noch am Grübeln, wie ich Deine Idee gebacken bekommen. Mein Slide-Header besteht halt nicht nur aus einem DIV. Und es wurmt mich immer noch, dass im Template die Scripte nicht funktionieren 

[stefanbe]

wenn du das Sidebar Plugin verwendest solte das gehen

du baust im template um das statische Bild ein DIV und
zusätzlich noch ein DIV mit {Sidebar}

die beiden DIVs positionierst du mit css "absolute" so das sie genau übereinander liegen
und gibtst dem DIV mit der {Sidebar} einen höheren "z-index"

dann brauchst du nur in der Start Inhaltseite {Sidebar|Content Inhalt} eintragen

lg

[supercat]

Also, die etwas tiefere Positionierung des Headers im Template hat auch nichts gebracht - auch mit Sidebar nicht.

@stefanbe: Das statische Bild ist doch schon ein DIV - "Header" im style.css?

Code Auswählen Erweitern

background-image: url("...jpg");
Noch etwas drumherum? Und wie gesagt: Mein Slide-Banner besteht aus verschachtelten DIVs, die ebenfalls in der CSS hinterlegt sind - eine Art Platzhalterfläche, darin der Silder, darauf ein Text/Logo-Feld. Ich versuch's mal, im Template zu biegen. Danke fürs Erste.

Ohne Kampf kein Sieg. - Manfred von Brauchitsch 

[djr]

in jQuery sähe mein Ansatz von vor zwei Tagen so aus:

Code Auswählen Erweitern


<!-- ::: ACHTUNG: nur eine Code-Skizze ::: -->
<html>
<head>
<!-- hier jQuery einbinden -->

<script type="text/javascript">
// jQuery
$( document ).ready(function() {
var banner = $('.startseite .banner_logo');
var x = '<div class="banner_b"><div id="slideshow"><img class="start" src="http://www.motourist.de/layouts/motourist/bilder/image-001.jpg" /></div><br /></div></div>';
banner.before(x);
});
</script>
<!-- (Dein) Slideshow-Banner -->
<script type="text/javascript" src="slideshow/slideshow.js"></script>
<!-- css -->
<style type="text/css">
div.banner_a {
background-image: url('http://www.motourist.de/layouts/motourist/bilder/image-002.jpg');
}
</style>
</head>
<body class="{CATEGORY_NAME}">
<!-- ... -->
<div class="banner_a">
<div class="banner_logo">Hallo</div>
</div>
<!-- ... -->
</body>
</html>