logo
Suche:

Anmeldung:


Haben Sie Ihre persönlichen Daten vergessen? Registrierung

Wechselnde Headergrafiken

 

Variante 1

1. Vorbereitung

 

Und nun gibt es zwei Arten den benötigten Code in das Template zu integrieren.

Einmal durch direkten Eintrag in die index.php:
dadurch hat man einige Zeilen mehr in dieser Datei.
(siehe Punkt 2. index.php bearbeiten)

und einmal durch ein Droplet:
wobei nur ein Aufruf in Form von [[Headergrafik]] in die index.php eingefügt wird. Das Droplet wird dann noch unter Admin-Tools hinzugefügt und mit entsprechendem Code gefüllt.
(siehe Punkt Droplet)

2. index.php bearbeiten (Template-Ordner)

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

Also aus z.B. diesem:

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

wird dieses:

01 <div id="deine_headergrafik">
02     <?php
03     $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";    
04     $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";      
05     $palt = PAGE_TITLE;
06  
07     if (!file_exists($ppath)) {        
08       $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
09       $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
10       $palt = PAGE_TITLE;
11     }
12         if (!file_exists($ppath)) {        
13       $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
14       $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
15       $palt = PAGE_TITLE;
16     }
17     if (!file_exists($ppath)) {        
18       $purl = TEMPLATE_DIR."/images/alleseiten.gif";
19       $palt = 'headergrafik'.$page_id;
20     }
21     echo  '<img src="'.$purl.'" width="900" height="100" alt="'.$palt.'" title="'.$palt.'" />';
22     ?>
23

</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:

01 $page_id = PAGE_ID;
02  
03 $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";    
04 $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".jpg";      
05 $palt = PAGE_TITLE;
06  
07 if (!file_exists($ppath)) {        
08 $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
09 $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".gif";
10 $palt = PAGE_TITLE;
11 }
12 if (!file_exists($ppath)) {        
13 $purl = WB_URL . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
14 $ppath = WB_PATH . MEDIA_DIRECTORY. "/headergrafiken/headergrafik".$page_id . ".png";
15 $palt = PAGE_TITLE;
16 }
17 if (!file_exists($ppath)) {        
18 $purl = TEMPLATE_DIR."/images/alleseiten.gif";
19 $palt = 'headergrafik'.$page_id;
20 }
21 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:

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

wird dieses:

1 <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!

 

 

Vorteil: extrem einfach ein neues Headerbild auf jeder beliebigen Seite durch Bild-Upload bereitzustellen.

Nachteil: das gleiche Bild für mehrere Seiten(z.B. Menüpunkt und seine Untermenüpunkte) muss genauso oft hochgeladen/vorhanden sein.

 

 

 

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

 

 

 

Variante 2

 

1. Vorbereitung

 

 

 

 

2. index.php bearbeiten (Template-Ordner)

 

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

Also aus z.B. diesem:

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

wird dieses:

1 <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:

01 /* Wechselnde Headerbilder ****************************************/
02 .headerbild {
03      height:100px;
04      width: 900px;
05      background:#ccc url("headergrafiken/deinBild.jpg"); /* alle Seiten */
06 }
07 #headergrafik2{background: url(headergrafiken/polo.jpg);}
08 #headergrafik16{background: url(headergrafiken/rennen.jpg);}
09 #headergrafik4, #headergrafik12{background: url(headergrafiken/wandern.jpg);}
10 /*******************************************************************/

 

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.

 

Vorteil:

  • die Grafiken müssen nicht umbenannt werden wie in Variante1
  • eine Grafik kann für mehrere Seiten genutzt werden
  • nur der Admin legt die Headerbilder fest

 

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.