Tipps zur Fehlerbehebung, wenn Bilder oder das CSS im Frontend fehlen

Problembeschreibung:

Die Bilder oder das CSS werden im Frontend nicht geladen? Die Darstellung passt nicht? Gerade bei einem Serverumzug einer Contao-Installation kann dieses Problem auftreten. Hier einige Punkte, wie du systematisch die Fehlerquelle finden kannst.

1. Prüfe die Fehlermeldung in den Browser DevTools

Öffne die DevTool deines Browsers (Firefox DevTools, Chrome DevTools). Oft findest es hier in der Console bereits Fehlermeldungen, die dir einen konkreten Hinweis zur Fehlerursache geben.

2. Sind alle Ordner öffentlich geschaltet?

Unter System > Dateiverwaltung rufst du den Ordner auf, unter dem du deine Dateien liegen hast. Dieser könnte z. B. "content" lauten. Öffne diesen und prüfe, ob dort das Häkchen unter Öffentlich gesetzt wurde. Wenn nicht, dann aktivierst du das nun und prüfst jetzt das Frontend erneut. Wiederhole dies für alle Ordner, die öffentliche Dateien enthalten.

Hinweis: Bitte beachte, dass Dateien auf oberster Ebene im Ordner /files nicht öffentlich geschaltet werden können. Du musst zwingend einen Unterordner erstellen und dort die Dateien ablegen. Sollten die Probleme im Frontend immer noch bestehen, so gehst du zum nächsten Schritt.

3. Sind alle Dateien mit der Datenbank synchronisiert worden?

Öffne die Dateiverwaltung und synchronisiere noch einmal alle Ordner mit der Datenbank. Klicke dazu auf den Button Synchronisieren.

4. Caches leeren und Symlinks neu erstellen

Gehe dazu unter System > Systemwartung > Daten bereinigen und setzt ein Haken bei Bildercache leeren, Skriptcache leeren, Shared-Cache leeren und Symlinks neu erstellen. Anschließend klickst du auf den Button Daten bereinigen.

5. Sind alle CSS-Dateien vorhanden und korrekt ins Layout eingebunden?

Prüfe zunächst, ob die CSS-Dateien in der Dateiverwaltung vorhanden sind. Anschließend unter Layout > Themes > Layout, ob alle CSS-Dateien korrekt eingebunden wurden. Es kann vorkommen, dass du beim Upload mittels FTP-Programm oder per SSH die CSS-Dateien umbenannt hast und diese erneut ins Layout einbinden musst. Wähle dazu das entsprechende externe CSS im Layout aus.

Hinweis: Bei gekauften Themes werden CSS-Dateien teilweise direkt über das Template oder andere Techniken eingebunden. Bitte wende dich dazu an den Support der Theme-Hersteller.

6. Gibt es Fehler in den CSS-Dateien?

Wenn das CSS nicht korrekt angezeigt wird, kann dies auch an einer fehlerhaften Anweisung in einer CSS-Datei liegen. Am besten öffnest du die CSS-Datei in einem externen CSS-Editor mit Syntaxprüfung. Moderne Editoren wie PHP-Storm oder Visual Studio Code zeigen dir Fehler übersichtlich an. So kann es etwa sein, dass nur eine geschweifte Klammer fehlt oder zu viel gesetzt wurde.

7. Sind die Dateiberechtigungen auf dem Server korrekt?

Prüfe per SFTP-Programm oder direkt per SSH, ob die Berechtigungen für die Ordner korrekt gesetzt wurden. Auf der Konsole könntest du die Berechtigungen für Dateien und Ordner mit diesen Befehlen setzen:

find . -type f -exec chmod 644 {} \;
find . -type d -exec chmod 755 {} \;

Wichtige Warnung!
Bevor du diesen Schritt unternimmst, solltet du unbedingt alle vorherigen Schritte durchgeführt haben! Wenn dir das technische Verständnis dazu fehlt, dann lass dies bitte vom Support des Hosters durchführen oder frage einen entsprechenden Experten. Bei einer Fehlkonfiguration funktioniert Contao nicht mehr oder es kann zu kritischen Sicherheitsproblemen führen, da auf Systemdateien zugegriffen werden kann.

Immer noch kein Erfolg?

Hier noch ein paar weitere Punkte, die du prüfen kannst:

• Nutzt du einen Ad-Blocker oder ähnliche Erweiterung bei deinem Browser?
• Wurden Dateien versehentlich gelöscht oder umbenannt?
• Wurden Dateien in andere Ordner verschoben?
• Sind die Pfade und Dateinamen in der CSS-Datei korrekt?
• Lassen sich die Dateien über die Dateiverwaltung anzeigen?
• Sind alle Dateien beim Serverumzug fehlerfrei übertragen worden?
• Gibt es Fehlermeldungen in der den Logfiles des Servers?
• Liegt ein Problem bei der Serverkonfiguration vor und es fehlt eine Bildverarbeitungsbibliothek (GD, Imagick oder Gmagick)