Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Magento Grundkurs (2012)

Grafiken austauschen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Magento ermöglicht es, durch die Erstellung eines neuen Themes eine Grafik wie gewünscht auszutauschen. Wichtig ist dabei, dass die Ordnerstruktur im eigenen Theme identisch mit der des Originals ist.
07:26

Transkript

Durch Austauschen einer einzigen Datei, können wir in Magento bereits ein eigenes Theme anlegen. Aufgrund des Fallback-Models sorgt Magento dann selbständig dafür, dass alle anderen fehlenden Dateien, die in unserem eigenen Theme nicht enthalten sind, von den höherrangigen Ordnern geladen werden. Versuchen wir nun, mit Hilfe des Fallback-Models unser Logo auszutauschen, indem wir ein eigenes Theme anlegen und dieses Theme für uns eine neue Grafikdatei enthält. Dazu sind insgesamt drei Schritte notwendig. Zum Einen müssen wir Magento im Backend konfigurieren. Wir finden die Konfiguration im Bereich "System Konfiguration Design". Zum anderen müssen wir einen Ordner anlegen, der den Namen unseres Themes trägt. Und am Ende dort als dritten Schritt, natürlich auch die Grafik hinterlegen die im Frontend angezeigt werden soll. Finden wir also zunächst einmal heraus, wo sich die Datei momentan befindet. Dazu gibt es verschiedene Wege. Ich benutze hier die Extension "Firebug" für den Firefox. Sie können aber genauso gut mit anderen Inspektoren der Developer Toolbar bei Microsoft oder dem Inspector im Safari herausfinden, wo sich diese Grafik befindet. Wenn ich nun einmal den Imagetag dieser Grafik hier anschaue, sehe ich hier einen Pfad. Ich übernehme den Pfad jetzt mal in ein neues Fenster und wir sehen, die Datei liegt im Ordner "skin/frontend" und dann im "default" Paket und dort in unserem "default" Theme. Und da ist ein Ordner angelegt "images" mit einer Grafik "logo.gif". Das ist diese Grafik hier. Schauen wir uns das ganze mal auf dem Server selbst an. Starten wir im Hauptverzeichnis unserer Magento-Instanz im Ordner "Skin Frontend Default", dann im "Default" Theme. Wir sehen hier an diesem Beispiel schon, wir haben verschiedene Themes in Magento installiert. Dann gibt es einen Unterordner "images" und hier eine "logo.gif". Das hier ist die Grafik, die wir auch hier im Hintergrund sehen können. Damit Magento nun anstatt dieser Grafik mit dem Original Magento-Logo ohne Zusatztext, unsere neue Grafik lädt, müssen wir dafür sorgen, dass in unserem eigenen Theme die Ordnerstruktur identisch ist. Beginnen wir also mit dem Anlegen des Ordners. Und als kleiner Tipp: Sie machen sich das Leben etwas einfacher, wenn Sie mit zwei Fenstern arbeiten. Im einen Fenster sehen Sie das Original Theme und im zweiten Fenster sehen Sie dann Ihren eigenen Ordner. Wenn Sie beide Fenster nebeneinander öffnen, haben Sie den Vorteil, dass Sie die Struktur immer direkt vergleichen können. Ich lege also nun ein neues Theme an, indem ich einen Ordner anlege, und diesen Ordner benenne. Mein Theme soll "training" heißen. Und innerhalb des Training Themes brauche ich nun einen Ordner "images". Innerhalb dieses Ordners "images" kopiere ich mir jetzt einfach mal die bestehende Datei "logo.gif". Und wir können nun bereits testen, ob dieser Aufruf funktioniert, indem wir hier in unserem Pfad den Anteil ändern, der das Theme betrifft, und siehe da, die Grafik lädt. Das bedeutet, die Datei liegt schon mal auf dem Server in der Art bereit, dass wir sie im Frontend aufrufen können. Versuchen wir als nächstes, die Konfiguration von Magento anzupassen, damit die Grafik hier bereits aus unserem neuen Theme geladen wird. Wir haben dazu zwei Möglichkeiten. Es handelt sich bei der Datei, die wir angelegt haben, um eine "Skin"-Datei. Sie gehört also zum Bereich "Skin, Bilder und CSS". Wir finden eine Einstellung dafür hier in der Mitte. Wir können Magento aber auch so konfigurieren, dass es nicht ausschließlich die Skin-Dateien aus unserem Theme "Training" ziehen soll, sondern alle anderen Dateien ebenfalls, also auch Übersetzungen, Vorlagen und Layout-Dateien. Dazu trage ich das neue Theme unten im Standardeingabefeld ein. Damit sind wir anhand des Fallback-Models in der Lage, unsere Skin-Bilder gegebenenfalls noch von einem anderen Ordner zu beziehen. Beispielsweise gibt es eine Übersetzung für unser Logo und da wird dann später im Ordner "training.de" abgelegt. Und somit werden alle Grafiken mit deutschem Text aus dem Skin-Bereich "training.de" geholt und alle anderen Dateien wie Übersetzungen, Vorlagendateien und Layout-Dateien aus dem Standard. Ich möchte ganz kurz auf einen sehr typischen Fehler hinweisen. In vielen Konfigurationen sehe ich oft das: Eine solche Eingabe im Backend ist überhaupt nicht notwendig, denn Magento bezieht automatisch alle Dateien aus dem konfigurierten Standard hier unten, solange hier oben in den Eingabefeldern für die einzelnen Teilbereiche eines Themes nichts eingetragen ist. Benutzen Sie also, wenn Sie generell ein eigenes neues Theme verwenden wollen, die Eingabe für den Standard und halten Sie sich die davor liegende Ebene des Fallback-Models für weitere Änderungen frei. Wenn ich jetzt die Konfiguration speichere, kann ich unter Umständen im Frontend bereits das Ergebnis sehen. Überprüfen wir mal, ob das bereits funktioniert hat. Ich rufe also wieder meinen Firebug auf und sehe hier den Pfad der Grafik. Die Grafik wird nun aus meinem Training-Theme geholt. Sollte das beim allerersten Anlauf nicht funktionieren, könnte es daran liegen, dass Magento die Ausgabe ge-cached hat. Dazu gehen Sie im Backend in den Bereich "System Cacheverwaltung" und sorgen dafür, dass alle Caches neu aufgebaut werden oder am besten während Ihrer Arbeit deaktiviert sind. Wählen Sie über die Kurzauswahl "Alle wählen", die Checkboxen für alle Cache-Arten und in unserem Stapelverarbeitungs-Dropdown einfach "deaktivieren" und "absenden". Magento schaltet dann für Sie alle Caches aus. Ihr System wird spürbar langsamer, aber Sie haben den Vorteil, dass Sie immer die aktuellen Grafiken sehen. Nun wollen wir dafür sorgen, dass hier eine neue Grafik angezeigt wird, in unserem Logobereich. Und ich habe eine Grafik dafür bereits vorbereitet. Dies sieht am Ende so aus. D.h. es kommt unter dem Magento-Logo noch der Text "Community" dazu. Es gibt nun zwei Möglichkeiten, wie ich diese Einstellung vornehmen kann. Möglichkeit Eins ist: Ich lösche die Original "logo.gif", die wir in unser eigenes Theme kopiert haben und benenne meine neue Grafik um. Wenn wir uns das im Frontend anschauen, sehen wir, dass sich die Änderung bereits zeigt. Ein anderer Weg wäre theoretisch, im Bereich Systemkonfiguration unter dem Abschnitt "Design" den sichtbaren Kopfbereich anzupassen. Dazu haben wir hier einen Konfigurationsbereich und dort steht auch der Dateiname unserer Logo-Grafik. Ich könnte also genauso gut den Dateinamen hier anpassen, die Konfiguration speichern, die Änderung hier rückgängig machen und würde im Frontend immer noch das richtige Ergebnis sehen, denn Magento sucht nun nach einem neuen Dateinamen und zwar "magento-ce.gif". Sie sehen also, das Austauschen einer Grafik in Magento ist sehr einfach, und Sie können den Weg, den ich jetzt eben aufgezeigt habe, für viele andere Grafiken auch verwenden. Beispielsweise hier für die Callout-Dateien. Überprüfen Sie einfach, wo sich die Original-Grafik befindet. Achten Sie darauf, dass die Unterordner in Ihrem eigenen Theme immer den Unterordnern des Original-Themes entsprechen und natürlich, dass auch der Dateiname dem Original-Dateinamen entspricht.

Magento Grundkurs (2012)

Lernen Sie als Einsteiger in die E-Commerce-Plattform Magento die Grundlagen kennen und lassen Sie sich als versierter Anwender neue Möglichkeiten und wichtige Tricks erklären.

10 Std. 14 min (135 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!