Suche

[reddragon]

Hallo zusammen,

Da die Frage nach den wechselnden Bildern im Header-Bereich immer wieder auftaucht, schreibe ich hier mal extra dieses Tool:

Ich hätte eigentlich gedacht, dass dem Problem Hier schon der schrecken genommen wurde, aber es wurde Hier nochmals angefragt, und vor einigen Tagen habe ich eine PN bekommen, mit der Bitte diese Anleitung zu schreiben:

Hallo reddragon!

erstmal sorry, das ich vermutlich störe... 

Ich habe hier im Forum gesehen das du einmal bei dem brightsideoflife-theme einen Fotowechsel eingebaut hast http://www.pragmamx.org/Forum-topic-28171.html.

Nun bin ich schon seid längerem auf der Suche nach so einen Fotowechsel  für das stylevantyge-theme. Andi hatte soetwas ja auch schonmal als "Schulung" versprochen bzw. angeregt. Leider wurden beide Beiträge aber geschlossen und ich denke in der Richtung wird auch nichts mehr kommen.

http://www.pragmamx.org/Forum-topic-26045-start-msg172907.html#msg172907
http://www.pragmamx.org/Forum-topic-28241-start-msg182486.html#msg182486

Da ich bei so einem großen Eingriff wahrscheinlich mehr kaputt machen würde und ehrlich gesagt auch nicht die Ahnung habe, dachte ich das ich vielleicht dich mal ganz freundlich um Hilfe fragen kann. Das du es kannst, hat man ja schließlich beim brightsideoflife-theme gesehen.

Vielleicht hast du ja Zeit und Lust so eine kleine "Schulung" hier zu machen? Ich denke auch andere Mitglieder dieses Forums würden sich sehr darüber freuen.

Mit freundlichen Grüßen,
*********   

Auch wenn der Code im dem Theme "mx-rainbow" veraltet, oder unnötig kompliziert ist, halte ich mal daran fest, da er im funktioniert, und da ich mich mit den Strukturen aus den neuen Themes noch nicht befasst habe. (Bei Gelegenheit kann man diese Anleitung ja "updaten", aber jetzt erstmal gilt es das Ziel zu erreichen )

Los gehts...


Vorraussetzungen:

• Backup von der eigenen Seite
• Grundlagenkenntnisse von HTML
• Fähigkeit einer Anleitung zu folgen

Schritt 1:
Da Ihr ein Backup von eurem Theme habt, kann man an der Seite eigentlich nichts kaputt machen.

Als erstes öffent ihr die Datei, in der eurer Theme dargestellt wird. Meist ist das die theme.html oder die index.html in eurem Themeverzeichnis. Beim Theme "mx-rainbow" ist das die theme.html, und diese schaut SO aus.

Dann sucht Ihr die Stelle, wo die Grafik hin soll.
Normalerweise sieht das ganze dann so aus:
<img src="images/logo.gif" alt="">
Aber Ihr macht folgendes draus:
<img src="images/{PHOTOS}" alt="">
Soll die Grafik in den Hintergrund, kann es so aussehen:
<div id="content-header" style="background-image: url(images/{PHOTOS});"></div>

Der Trick hierbei ist, dass "{PHOTOS}" eine Variabel ist, mit der die Grafik definiert wird. 
Damit seit Ihr in der theme.html schon fertig.




Schritt 2:

Ihr habt nun eine neue Variabel in eurem Theme eingebaut, dies muss logischerweise angesteuert werden. Dazu nehmen wir die funktions.php und sucht die anderen Variabeln. Die Variabeln für Inhalte meine ich nun nicht, sondern die, die euer Theme von den anderen unterscheiden: z.B. {FOOTMESSAGE} oder {PAGE_TITLE}

Ihr solltet in eurem Theme dann solche Zeilen finden:

Code Auswählen Erweitern

    $part[] = array("{PAGE_TITLE}", $themesetting['title']);
    $part[] = array("{FOOTMESSAGE}", theme_show_footmsg());
Hier wird nun für die Variabel {PAGE_TITLE} eine andere Variabel eingesetzt, namens $themesetting['title'].

dort ergänzt ihr wie folgt:

Code Auswählen Erweitern

$part[] = array("{PHOTOS}", photos($GLOBALS['im'], $GLOBALS['imcontent']));   
Jetzt wird also die Variabel {PHOTOS} der Funktion "photos" zugeordnet, und es werden weitere Parameter Übergeben. An dieser Stelle verstehe ich auch nur noch Bahnhof....




Schritt 3:

Ihr habt nun eine Funktion namens "photos" definiert, die muss natürlich auch eingebaut werden. In der funktions.php  habt ihr mehrfach den Begriff function vorhanden.

Ein Beispiel könnte so aussehen:

Code Auswählen Erweitern

/**
* Definition der einzelnen Blockbereiche
*/
function theme_define_blocks()
{
          *irgendwelcher Code
}

Hiermit /** wird nun ein Kommentar eingeleitet, und mit */ beendet. In dem Komentar ist oft die Erklärung drin, was die darauf folgende Funktion macht. Danach kommt halt der Begriff function und ein Wort. in der drauf folgende Zeile kommt eine Klammer, und dahinter befindet sich einiges an Code. Die ganze Funktion wird wieder mit einer geschweiften Klammer beendet.

Hinter einer solchen Klammer kann nun unsere benötigte Funktion eingebaut werden. Aber um sicher zu gehen, dass wir die richtige geschweifte Klammer nehmen, schlage ich vor, dass wir unseren Code vor dem Wort function einfügen. (Oder dem Komentar davor)

Folgender Code muss eingefügt werden (aber ich habe nicht die leiseste Ahnung, was der genau macht):

Code Auswählen Erweitern

/**
* wechselnde Photos
*/
function photos ($im, $imcontent)
{
    if (isset($GLOBALS['home'])) {
        return $im['Home'];
    } else if (defined('MX_MODULE') && isset($im[MX_MODULE])) {
        if (MX_MODULE == "Content") {
            if (!empty($_GET['pid']) && isset ($imcontent[$_GET['pid']])) {
                return $imcontent[$_GET['pid']];
            } else {
                return $im[MX_MODULE];
            }
        } else {
            return $im[MX_MODULE];
        }
    } else if (defined("mxAdminFileLoaded") && isset($navimpath['AdminLoaded'])) {
        return $im['AdminLoaded'];
    } else {
        return $im['Default'];
    }
}


Das Ganze könnte dann so aussehen:

Code Auswählen Erweitern

/**
* Definition der einzelnen Blockbereiche
*/
function theme_define_blocks()
{
          *irgendwelcher Code
}
/**
* wechselnde Photos
*/
function photos ($im, $imcontent)
{
          *unser Code
}
/**
* Definition von irgendwas
*/
function blabla()
{
          *irgendwelcher Code
}


Das war es in der funktions.php




Schritt 4:

Nun müssen wir noch die Bilder den Modulen zuordnen. Das machen wir in der settings.php
Die PHP-Datei endet mit folgender Zeile:

Code Auswählen Erweitern

?>   

Davor fügt ihr nun folgende Variabeln ein:

Code Auswählen Erweitern

// hier werden die Photos je Modul definiert
$im['Default'] = "defaultphoto.jpg";
$im['AdminLoaded'] = "adminphoto.jpg";

$im['News'] = "newsphoto.jpg";
$im['Home'] = "homephoto.jpg";
$im['Submit_News'] = "newsphoto.jpg";
$im['Topics'] = "newsphoto.jpg";
$im['Stories_Archive'] = "newsphoto.jpg";
$im['Forum'] = "forumphoto.jpg";
$im['Modul_Name'] = "Datei_Name";

Die Anzahl ist hier beliebig zu wählen. Für jedes Modul könnt Ihr eine eigene Grafik aussuchen. habt Ihr ein Modul vergessen, wird die Standartgrafik "Default" gewählt.

Das war´s



Schritt 5:

Das Theme hochladen. Den Ort für die Bilder habet ihr in der html definiert:
(images/{PHOTOS})
und den Dateinamen in der settings.php:
newsphoto.jpg

Viel Spaß

[Centurio]

Herzlichen Dank für diese tolle Anleitung. Ich selbst brauche sie zwar momentan nicht, da ich schon mit der Anleitung für das Bright Side of Live-Theme meine Wünsche erfüllt sah, aber es wird sicher zahlreiche pMx-Anwender geben, die dieses Tut hier verzweifelt suchen