Quellenangaben für Hintergrundbilder beim Gruppen-Block anzeigen
So zeigst du eine Bildunterschrift oder Quelle für ein Hintergrundbild von Gruppen als Overlay in WordPress an.
Seit WordPress 6.4 kannst du einem Gruppen-Block ein Hintergrundbild hinzuzufügen. Das eröffnet viele neue Designvarianten.
Wie bei jedem anderen Bildtyp kann auch hier Image Source Control verwendet werden, um die Quelle und den Autor eines solchen Bildes als Overlay über dem Bild, unter dem Beitrag oder in einem globalen Liste mit Bildquellen anzugeben.
In diesem Tutorial zeige ich dir, wie du die Informationen des Autors als Overlay über der Gruppe anzeigst.
Schau dir den folgenden Screenshot mit einem Beispielbild und Text an, die ich mit ChatGPT und DALL·E 3 erstellt habe. Oben rechts findest du die Bildunterschrift, die Image Source Control automatisch hinzugefügt hat.
Hintergrundbilder für Gruppen
Falls du die Hintergrundbildoption für Gruppen noch nicht verwendet hast, hier ist eine Übersicht, wo du sie findest.
- In der Listenansicht links siehst du die Gruppe mit einer Überschrift und Absatz.
- Wähle die Gruppe in der Listenansicht oder im Editor aus, um ihre Optionen rechts zu sehen.
- Wähle den Bereich „Stile“ aus.
- Finde die Option „Hintergrund“, um das Hintergrundbild für die Gruppe auszuwählen.
Wie man die Bildzuschreibung hinzufügt
Du kannst die Bildzuschreibung über die Mediathek verwalten. Dazu gehören Autor, der Quell-URL und zusätzliche Lizenzinformationen.
Lade zuerst Image Source Control herunter und installiere es.
Gehe jetzt zu Medien > Medienübersicht und wähle das Bild aus. Du solltest die Bildquellenfelder wie im folgenden Beispiel sehen.
Speichere die Änderungen, nachdem du die erforderlichen Informationen hinzugefügt hast.
Die Bildquelle als Overlay anzeigen
Da der WordPress-Core oft nachträgliche Änderungen an neuen Funktionen vornimmt und um zu sehen, wie diese Funktion tatsächlich genutzt wird, habe ich mich entschieden, Overlays für Hintergrundbilder in Gruppenblöcken standardmäßig nicht anzuzeigen.
Du musst diese Unterstützung zuerst aktivieren und vielleicht das Styling anpassen.
1. Unterstützung für Inline-Styles aktivieren
Technisch gesehen wird das Hintergrundbild der Gruppe als Inline-CSS-Style in den Gruppencontainer eingefügt.
Image Source Control unterstützt solche Bilder schon seit einiger Zeit und wurde mit kleinen Anpassungen aktualisiert, um auch mit Hintergrundbildern in Gruppen zu funktionieren.
Geh zu Einstellungen > Bildquellen(?) > Overlay > Enthaltene Bilder > Entwickleroptionen und aktiviere „Zeige das Overlay innerhalb von HTML-Tags mit Inline Styles“.
Mehr über den technischen Hintergrund der Entwickleroptionen erfährst du unter Bildquellen für Hintergrundbilder anzeigen.
2. Den Overlay-Stil anpassen
Standardmäßig erscheint das Quellen-Overlay als neues HTML-Element innerhalb der Gruppe.
Du kannst die Beschriftung nach deinen Vorlieben mit benutzerdefiniertem CSS gestalten.
Die CSS-Regel, die ich in meinem Beispiel unten verwendet habe, lautet:
.wp-block-group > .isc-source-text {
font-size: 0.8em;
background-color: #333;
color: #fff;
opacity: 0.70;
padding: 0.15em;
float: right;
}Code-Sprache: CSS (css)Dieses CSS platziert die Bildunterschrift als Overlay am rechten oberen Rand der Gruppe und drückt den restlichen Inhalt damit nicht weiter nach unten.
Du kannst mit den Angaben spielen, um eine andere Positionierung zu erreichen.
Zeig mir deine Umsetzung
Ich schreibe dieses Tutorial kurz vor der Veröffentlichung von WordPress 6.4. Es könnte also noch letzte Änderungen in deren Umsetzung geben. Ich möchte auch sehen, wie du Hintergrundbilder für Gruppenblöcke konkret verwendest, um zu sehen, welche zusätzlichen Optionen du zu den oben genannten benötigst.
Wenn du Quellenangaben für Hintergrundbilder in Gruppenblöcken verwendest, dann zeig mir bitte deine Umsetzung. Das würde mir helfen, die native Unterstützung in Image Source Control zu entwickeln.
Fragen? Wie kann ich helfen?
Schreib mir direkt über unser Kontaktformular.