Gutenverse: Hintergrundbild verschwindet bei Beiträgen mit Beitragsbild – Ursache und Workaround   Vor kurzem aktualisiert!

 in Anleitungen / WebDesign  verschlagwortet CSS / wordpress

Nach einem Update von Gutenverse kann es bei bestehenden WordPress-Websites mit älteren Gutenverse-Templates zu einem ungewöhnlichen Darstellungsfehler kommen:

Ein Template besitzt ein fest eingestelltes Hintergrundbild und wird im WordPress-Site-Editor korrekt dargestellt. Im Frontend fehlt dieses Hintergrundbild jedoch bei bestimmten Beiträgen oder Seiten.

Besonders irritierend: Der Fehler tritt nur auf, wenn ein Beitragsbild (Featured Image) gesetzt ist.

In diesem Beitrag beschreibe ich die Fehlersuche und einen einfachen CSS-Workaround.

Das Fehlerbild

Die Website verwendet ein Block-Theme und einen mit Gutenverse erstellten Template-Teil. Ein äußerer „Flexible Wrapper“ besitzt ein fest definiertes Hintergrundbild.

Im Gutenverse-Editor sind die Einstellungen korrekt:

  • Background Image: festes Hintergrundbild
  • Use Featured Image: OFF
  • Background Size: Cover
  • Background Position: Center Center

Trotzdem zeigte sich im Frontend folgendes Verhalten:

Beitrag ohne Beitragsbild:
Das Hintergrundbild des Templates wird korrekt dargestellt.

Beitrag mit Beitragsbild:
Das Hintergrundbild verschwindet und die Seite wirkt dadurch, als würde ein falsches Template verwendet.

Das Template selbst war dabei in beiden Fällen identisch.

Der entscheidende Test

Um einen Fehler im Template oder in der Kategoriezuordnung auszuschließen, wurde derselbe Beitrag einmal mit und einmal ohne Beitragsbild getestet.

Das Ergebnis war eindeutig:

Beitragsbild entfernen → Hintergrund erscheint wieder.

Beitragsbild setzen → Hintergrund verschwindet wieder.

Damit ließ sich das Problem zuverlässig reproduzieren.

Ursache im erzeugten CSS

Mit den Firefox-Entwicklerwerkzeugen ließ sich anschließend die CSS-Ausgabe von Gutenverse untersuchen.

Der betreffende Gutenverse-Wrapper hatte beispielsweise eine Klasse nach folgendem Muster:

.guten-XXXXXXXX

Auf einer korrekt dargestellten Seite erzeugte Gutenverse für diesen Wrapper sinngemäß:

.guten-XXXXXXXX {
    background-image: url("https://example.org/path/background-image.jpg");
}

Sobald der Beitrag jedoch ein Beitragsbild besaß, wurde zusätzlich CSS für das Featured Image erzeugt. Dabei erschien für denselben Wrapper sinngemäß folgende Regel:

.guten-XXXXXXXX:not(.background-animated) {
    background-image: none !important;
}

Damit war die Ursache gefunden:

Obwohl „Use Featured Image“ im Gutenverse-Block deaktiviert war, setzte die Frontend-Ausgabe bei vorhandenem Beitragsbild das Hintergrundbild des Wrappers auf none !important.

Das ursprünglich konfigurierte Hintergrundbild konnte deshalb nicht mehr angezeigt werden.

CSS-Workaround

Bis der zugrunde liegende Fehler in Gutenverse behoben ist, lässt sich das gewünschte Hintergrundbild mit einer spezifischeren CSS-Regel wiederherstellen.

Beispiel:

.wp-site-blocks .guten-XXXXXXXX:not(.background-animated) {
    background-image: url("https://example.org/path/background-image.jpg") !important;
}

Dabei müssen zwei Werte an die eigene Website angepasst werden:

guten-XXXXXXXX ist die individuelle Klasse des betroffenen Gutenverse-Blocks.

Die URL innerhalb von url(...) muss auf das gewünschte Hintergrundbild der eigenen Website zeigen.

Warum eine einfachere CSS-Regel möglicherweise nicht funktioniert

Zunächst könnte man versucht sein, nur Folgendes einzusetzen:

.guten-XXXXXXXX {
    background-image: url("https://example.org/path/background-image.jpg") !important;
}

Das kann jedoch wirkungslos bleiben.

Der Grund ist die CSS-Spezifität. Gutenverse verwendet beispielsweise:

.guten-XXXXXXXX:not(.background-animated)

Dieser Selektor ist spezifischer als:

.guten-XXXXXXXX

Da beide Regeln zusätzlich !important verwenden, gewinnt die spezifischere Gutenverse-Regel.

Durch den zusätzlichen Selektor .wp-site-blocks wird der Workaround spezifischer:

.wp-site-blocks .guten-XXXXXXXX:not(.background-animated)

Damit konnte das gewünschte Hintergrundbild wieder zuverlässig angezeigt werden.

Die Gutenverse-Block-ID finden

Die benötigte Klasse lässt sich beispielsweise mit Firefox ermitteln:

  1. Betroffene Seite im Frontend öffnen.
  2. Firefox-Entwicklerwerkzeuge öffnen.
  3. Zum Bereich „Inspektor“ wechseln.
  4. Mit Strg + F nach guten- suchen.
  5. Den betreffenden Wrapper identifizieren.
  6. In den CSS-Regeln nach background-image suchen.

Bei dem beschriebenen Fehler war besonders auffällig, dass neben den normalen Gutenverse-Styles zusätzlich ein Style für das Featured Image ausgegeben wurde und anschließend background-image: none !important für den Wrapper galt.

Achtung bei älteren Gutenverse-Blöcken

Bei der Fehlersuche zeigte sich noch eine Besonderheit:

Der betroffene Template-Teil war bereits mit einer älteren Gutenverse-Version erstellt worden. Im Site-Editor stand die Option „Use Featured Image“ auf OFF.

Ein testweises Umschalten von

OFF → ON → OFF

führte jedoch dazu, dass das zuvor hinterlegte Hintergrundbild aus der Blockkonfiguration verschwand.

Solche alten Template-Teile sollte man daher nicht unbedacht neu speichern. Vor Änderungen empfiehlt sich unbedingt ein Backup bzw. eine Testumgebung.

Wenn keine Staging-Umgebung zur Verfügung steht, ist ein gezielter CSS-Workaround unter Umständen die risikoärmere Lösung.

Zusätzliches Problem mit der statischen Startseite

Im selben Zusammenhang trat noch ein zweites, unabhängiges Problem auf.

Die Website verwendete ein eigenes front-page-Template. Trotzdem wurde im Frontend plötzlich die unter Einstellungen → Lesen ausgewählte statische Seite verwendet. Dadurch erschienen unter anderem ein unerwünschter Seitentitel und zusätzliche Inhalte.

In den Gutenverse-Einstellungen war folgende Option aktiviert:

Gutenverse → Settings → Template → Use Reading Homepage Setting

Die Beschreibung der Option weist darauf hin, dass damit die WordPress-Einstellung für die Homepage anstelle des front-page-Templates des Themes verwendet wird.

Nach dem Deaktivieren dieser Option wurde wieder das vorgesehene Startseiten-Template ausgegeben.

Für Websites, die bewusst ein eigenes front-page-Template verwenden, lohnt sich daher auch die Kontrolle dieser Einstellung.

Fazit

Wenn nach einem Gutenverse-Update plötzlich Hintergrundbilder aus bestehenden Templates verschwinden, sollte man nicht sofort das Template neu bauen.

Insbesondere sollte geprüft werden:

  • Tritt der Fehler nur bei Beiträgen mit Beitragsbild auf?
  • Ist im betroffenen Gutenverse-Block „Use Featured Image“ tatsächlich deaktiviert?
  • Erzeugt Gutenverse im Frontend trotzdem eine background-image: none !important-Regel?
  • Lässt sich das Problem mit einer gezielten, spezifischeren CSS-Regel beheben?

In diesem Fall lag der Fehler nicht am Inhalt des Beitrags, nicht an der Kategorie und nicht an einer falschen Template-Zuweisung. Entscheidend war das Zusammenspiel zwischen einem vorhandenen Beitragsbild und der von Gutenverse erzeugten CSS-Regel für einen älteren Template-Wrapper.

Der CSS-Workaround konnte die Darstellung wiederherstellen, ohne Beitragsbilder entfernen oder die bestehenden Templates neu aufbauen zu müssen.

Hinweis: Der Workaround sollte nach zukünftigen Gutenverse-Updates erneut geprüft werden. Wird das zugrunde liegende Verhalten in Gutenverse korrigiert, kann die zusätzliche CSS-Regel möglicherweise wieder entfernt werden.