Wechselnde Headergrafiken Frank (dbs)

Hier geht es darum ZWEI von VIELEN Möglichkeiten vorzustellen, für bestimmte Seiten ein anderes Headerbild festzulegen.

Variante 1

1. Vorbereitung

• Einen Ordner "headergrafiken" im Media-Verzeichnis erstellen
• gewünschte Headergrafiken dort bereitstellen (darauf achten, dass sie die gleiche Größe haben wie die jetzige Grafik)
• die allgemeine Headergrafik im Template-Ordner "images" bereitstellen und in "alleseiten.gif" umbenennen

2. index.php bearbeiten (Template-Ordner)

Mit dem folgenden Aufruf ersetzt man den jetzigen Aufruf für das Headerbild.

Also aus z.B. diesem:

<div id="deine_headergrafik">
    <img src="<?php echo TEMPLATE_DIR; ?>/images/header.png" width="900" height="100">
</div>

wird dieses:

<div id="deine_headergrafik">
    <?php 
	$purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";		
	$ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";		
	$palt = PAGE_TITLE;

	if (!file_exists($ppath)) {			
	  $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif"; 
	  $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
	  $palt = PAGE_TITLE;
	}
        if (!file_exists($ppath)) {			
	  $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png"; 
	  $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
	  $palt = PAGE_TITLE;
	}
	if (!file_exists($ppath)) {			
	  $purl = TEMPLATE_DIR."/images/alleseiten.gif"; 
	  $palt = 'headergrafik'.$page_id;
	}
	echo  '<img src="'.$purl.'" width="900" height="100" alt="'.$palt.'" title="'.$palt.'" />'; 
	?>
</div>

Droplet

Wer 2. nicht so optimal findet, erstellt sich ein Droplet.
Im Backend, in den Admin-Tool, findet man die Droplets.
Dort fügt man sich nun ein Neues in dieser Form hinzu:

Name: Headergrafik

Beschreibung: Wechselnde Headergrafiken

Code:

$page_id = PAGE_ID;

$purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";		
$ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";		
$palt = PAGE_TITLE;

if (!file_exists($ppath)) {			
$purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif"; 
$ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
$palt = PAGE_TITLE;
}
if (!file_exists($ppath)) {			
$purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png"; 
$ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
$palt = PAGE_TITLE;
}
if (!file_exists($ppath)) {			
$purl = TEMPLATE_DIR."/images/alleseiten.gif"; 
$palt = 'headergrafik'.$page_id;
}
return  '<img src="'.$purl.'" width="900" height="100" alt="'.$palt.'" title="'.$palt.'" />'; 

Kommentar: je nach Geschmack

fertig

Eintrag in die index.php, aus z.B. diesem:

<div id="deine_headergrafik">
    <img src="<?php echo TEMPLATE_DIR; ?>/images/header.png" width="900" height="100">
</div>

wird dieses:

<div id="deine_headergrafik">[[Headergrafik]]</div>

Was passiert? Auf der aktuellen Seite wird geschaut ob sich im Ordner 'media/headergrafiken' eine Grafik namens 'headergrafik' inklusive aktueller Seiten-ID (page_id) befindet (z.B. 'headergrafik2') und vom Typ jpg/gif/png ist. Wenn nicht wird die Grafik 'alleseiten.gif' aus dem Templateordner angezeigt.

Zusätzlich kann man sich nun mit der Maus im Frontend anzeigen lassen wie der Titel der Headergrafik ist. Ist er = dem Seitentitel, dann  funktioniert das Laden aus dem Ordner 'media/headergrafiken'. Ist der Titel beispielsweise = 'headergrafik7', dann weiß man, dass das Standardbild geladen wurde und könnte nun für die Seite mit Page_ID 7 ein Bild erstellen, benennen als 'headergrafik7.jpg' oder 'headergrafik7.gif' und in den Media-Ordner 'headergrafiken' hochladen. Somit hätte Seite 7 ein anderes Bild im Header.

Immer auf die richtige Größe der Headergrafiken achten, eine für alle!

(Original-Code von Vyni, Droplet-Idee von Martin (mr-fan))

Variante 2

1. Vorbereitung

• Einen Ordner "headergrafiken" im Template-Verzeichnis erstellen
• gewünschte Headergrafiken dort bereitstellen (darauf achten, dass sie die gleiche Größe haben wie die jetzige Grafik)
• die jetzige bzw. allgemeine Headergrafik dort auch bereitstellen

2. index.php bearbeiten (Template-Ordner)

Mit dem folgenden Aufruf ersetzt man den jetzigen Aufruf für das Headerbild.

Also aus z.B. diesem:

<div id="headergrafik">
    <img src="<?php echo TEMPLATE_DIR; ?>/images/deinBild.jpg" width="900" height="100">
</div>

wird dieses:

<div class="headerbild" id="headergrafik<?php echo $page_id; ?>"></div>

3. template.css bearbeiten (Template-Ordner)

In die CSS trägt man an irgendeiner Stelle (passend wäre natürlich weiter oben)
folgendes ein:

/* Wechselnde Headerbilder ****************************************/
.headerbild {
     height:100px;
     width: 900px;
     background:#ccc url("headergrafiken/deinBild.jpg"); /* alle Seiten */
}
#headergrafik2{background: url(headergrafiken/polo.jpg);}
#headergrafik16{background: url(headergrafiken/rennen.jpg);}
#headergrafik4, #headergrafik12{background: url(headergrafiken/wandern.jpg);}
/*******************************************************************/

Was passiert? Automatisch wird auf jeder Seite der id=headergrafik noch die aktuelle
Seiten-ID (page_id) angehangen.

Auf z.B. Seite 2:  id=headergrafik2

In der CSS steht, dass die class=headerbild die Grafik "deinBild.jpg" laden soll.
Danach kommt, dass wenn für id=headergrafik2 eine Grafik hinterlegt ist
(hier polo.jpg), soll diese geladen werden.

Der Code stammt von "egnal" aus dem Forum (Link unten) .
Jeder kann das für sich selbst noch anpassen, gegebenenfalls erweitern oder mit Variante 1 kombinieren.

Hinweise und Fragen sind im Forum gern gesehen.

Link zum Thema im WebsiteBaker Forum

Zurück zur Übersicht