Bildquellen für Hintergrundbilder anzeigen

Hintergrundbilder stellen für Image Source Control die größte Schwierigkeit dar, wenn es darum geht, Quellenangabe als Caption direkt am Bild anzuzeigen. Das liegt insbesondere daran, dass ein unbedachtes Einfügen von neuem HTML, den Code der kompletten Seite zerstören kann.

Bisher bestand die einzige offizielle Lösung darin, die Bildquellen über die Beitrags-Quellenliste unterhalb von Beiträgen oder in der Globalen Quellenliste auf einer dedizierten Seite einzubinden. Doch jetzt ist es mir gelungen, diese auch direkt am Element mit dem Hintergrundbild darzustellen.

Neben einer schon bestehenden Lösung für Bildquellen in Elementor, habe ich jetzt zwei weitere Lösungen für folgende Szenarien entwickelt.

• style Attribute innerhalb von HTML Tags, z.B. <div style"…">
• Inhalte von <style> Tags.

Konkret habe ich diese Features für die Kompatibilität mit Kadence Blocks entwickelt, insbesondere Kadence Galleries und Kadence Related Content Carousel.

Im folgenden erläutere ich, wie diese Optionen genutzt werden können, um Bildquellen für Hintergrundbilder anzuzeigen. Die hier beschriebenen Optionen und der aufgeführte Code sollten am besten nur von Entwicklern genutzt werden, die die Nebeneffekte verstehen. Kunden des “Kleine Agentur”-Pakets können ebenfalls Unterstützung bei der Anpassung bei unserem Support erfragen.

Einstellungen

Die Einstellungen für die hier genannten Optionen findet ihr unter Einstellungen > Bildquellen^(?) > Overlay > Enthaltene Bilder > Entwickleroptionen.

Die Optionen sind standardmäßig deaktiviert. Im Folgenden erfährst du, wann und wie du welche Einstellung nutzen kannst.

Du kannst genau jene Funktionen wählen, die dir passen. Sie beeinflussen sich untereinander nicht.

Einschränkungen

Es werden Bilder gefunden, die im unter Overlay > Enthaltene Bilder ausgewählten Bereich enthalten sind, also im Beitragsinhalt oder im gesamten Quellcode.

Beide Lösungen funktionieren aktuell nur mit jeweils einer Bild-URL pro Attribut oder Tag.

Die Bild-URL muss von url() umgeben sein. Dabei spielt es jedoch keine Rolle, ob und welche Anführungszeichen verwendet werden.

Die URL muss eine gültige Bilddateierweiterung enthalten.

Zeilenumbrüche und zusätzliche Leerzeichen im Code können die Erkennung der URLs beeinträchtigen. Zur Anpassung der Erkennung benötigen wir mehr konkrete Beispiele. Diese kannst du uns über den Support schicken.

Prüfe die Ausgabe der Quellen immer sorgfältig. Schaue auch in den Quellcode, ob sie dort nicht an einer falschen Stelle erscheint. Das dynamische Hinzufügen von HTML in eine bestehende Seite kann immer zu Problemen führen, weshalb wir die hier genannten Funktionen nur Entwicklern empfehlen.

Hinweise zum Styling

Die Ausgabe des Codes mit der Quellenangabe im Frontend erfolgt zunächst ungestylt. Du kannst die Position und das Layout dann mit eigenem CSS anpassen.

Eine instabile Möglichkeit, die Quellenangabe bei Inline Styles und Style Blöcken wie bei normalen Bildern zu stylen und zu platzieren ist, dem übergeordneten Element die Klasse isc-source zu geben. Also bei Inline Styles dem gestylten HTML-Tag und ansonsten immer dem Elternelement des .isc-source-text Elements.

In den meisten Fällen, führt unser Script zur automatischen Platzierung der Quelle an dieser Stelle zu Layoutverschiebungen. Daher haben wir uns gegen das automatische Styling entschieden.

Manchmal hilft es, dem Element mit der isc-source Klasse, ein display: block; zu geben.

Hintergrundbilder für den Gruppen-Block

Mit WordPress 6.4 ist es möglich, dem Gruppen-Block ein Hintergrundbild zu geben.

Wie du über diesem Bild eine Bildquelle anzeigst erfährst du in Quellenangaben für Hintergrundbilder beim Gruppen-Block anzeigen.

Avada Builder

Image Source Control unterstützt Hintergrundbilder für den Avada Builder. Die Einblendung und Gestaltung funktionieren ähnlich wie die Optionen die auf dieser Seite genannt werden.

Spezifische Informationen findest du auch unter Avada Builder (Compatibility, englisch).

Inline Styles

“Inline Styles” sind CSS-Stile, die direkt in das HTML-Tag eingebettet werden. Ein Beispiel für einen Inline Style mit einem Hintergrundbild wäre:

<div style="background-image: url('hintergrundbild.jpg');">
    …
</div>Code-Sprache: HTML, XML (xml)

Standardmäßig zeigt Image Source Control die Bildquelle für hintergrundbild.jpg in der Beitrags-Bildquelle unterhalb des Inhalts an, wenn du in den Einstellungen die Option Beitrags-Quellenliste > Enthaltene Bilder > Jede Bild-URL aktiviert hast. Ein Overlay wird nicht angezeigt, auch wenn du das Overlay allgemein aktiviert hast. Dies ist aber mit Hilfe von folgenden zwei Optionen möglich:

• Lade den Overlay-Text für Inline Styles
• Zeige das Overlay innerhalb von HTML-Tags mit Inline Styles

Lade den Overlay-Text für Inline Styles

Diese Option lädt den Text für das Overlay in das data-isc-source-text Attribut des HTML-Tags. Unser oben aufgeführtes Beispiel würde dann so aussehen:

<div style="background-image: url('hintergrundbild.jpg');"
  data-isc-source-text="(c) Name des Autors">
    …
</div>Code-Sprache: HTML, XML (xml)

Der Inhalt von data-isc-source-text entspricht der Quellenangabe, wie sie auch in der Beitrags-Quellenliste auftauchen würde, inklusive escaptem HTML für die Links.

Du kannst jetzt selbst entscheiden, wo und wie du diese Quelle erscheinen lässt. Der folgende JavaScript-Code legt einen neuen <span> Tag innerhalb unseres <div> Containers an und schreibt die Quelle dann dort hinein.

<script>
  window.onload = function() {
    // Select all div elements with data-isc-source-text attribute
    var elements = document.querySelectorAll('div[data-isc-source-text]');

    elements.forEach(function(el) {
      // Create a new span element
      var span = document.createElement('span');

      // Add class to the span
      span.classList.add('isc-source-text');

      // Get the text from the data-isc-source-text attribute
      var text = el.getAttribute('data-isc-source-text');

      // Set the text of the span element
      span.innerHTML = text;

      // Append the span element to the div
      el.appendChild(span);
    });
  };
</script>
Code-Sprache: HTML, XML (xml)

Das Ergebnis sieht dann wie im nächsten Abschnitt aus.

In Zeile 4 kannst du den Selector anpassen, wenn du keine <div> Tags nutzt, oder ihn so verfeinern, dass er nur bestimmte Elemente anspricht. In Zeile 11 kannst du eine andere, als die Standard-Class vergeben.

Zeige das Overlay innerhalb von HTML-Tags mit Inline Styles

Diese Option geht noch einen Schritt weiter als die obere und erzwingt die Ausgabe der Quellenangabe im Container mit Hilfe von PHP. Das Ergebnis sieht dann wie folgt aus.

<div style="background-image: url('hintergrundbild.jpg');" data-isc-images="123">
    <span class="isc-source-text">(c) Name des Autors</span>
    …
</div>Code-Sprache: HTML, XML (xml)

Außerdem kann es sein, dass die Ausgabe des Quellentextes im HTML-Element eine dynamische Funktion kaputt macht. Das ist zum Beispiel bei Slidern möglich.

Das data-isc-images Attribut enthält die ID des gefundenen Bildes. Sie ist für den technischen Ablauf wichtig und kann von dir ignoriert werden.

Style-Blöcke

Mit “Style-Blöcken” meine ich <style> Tags mit enthaltenen CSS Regeln. Hier ein Beispiel mit einer CSS-Regel, die ein Hintergrundbild für einen Container festlegt.

<style>
    .styled-container { background-image: url('hintergrundbild.jpg'); }
</style>
<div class="styled-container"></div>Code-Sprache: HTML, XML (xml)

Auch hier würde Image Source Control die Bildquelle für hintergrundbild.jpg in der Beitrags-Bildquelle unterhalb des Inhalts anzeigen, aber nicht als Overlay direkt am Bild.

Dies ist mit Hilfe von folgenden zwei Optionen möglich:

• Lade den Bildquellentext für style Tags.
• Zeige das Overlay für style Tags

Lade den Bildquellentext für <style> Tags

Diese Option lädt den Text für das Overlay in das data-isc-source-text Attribut des <style> Tags. Unser oben aufgeführtes Beispiel würde dann so aussehen:

<style data-isc-source-text="(c) Name des Autors">
    .styled-container { background-image: url('hintergrundbild.jpg'); }
</style>
<div class="styled-container"></div>Code-Sprache: HTML, XML (xml)

Der Inhalt von data-isc-source-text entspricht der Quellenangabe, wie sie auch in der Beitrags-Quellenliste auftauchen würde, inklusive escaptem HTML für die Links.

Du kannst jetzt selbst entscheiden, wo und wie du diese Quelle erscheinen lässt. Der folgende JavaScript-Code legt einen neuen <span> Tag unterhalb unseres <style> Tags an und schreibt die Quelle dann dort hinein.

<script>
  window.onload = function() {
    // Select all div elements with data-isc-source-text attribute
    var elements = document.querySelectorAll('style[data-isc-source-text]');

    elements.forEach(function(el) {
      // Create a new span element
      var span = document.createElement('span');

      // Get the text from the data-isc-source-text attribute
      var text = el.getAttribute('data-isc-source-text');

      // Set the text of the span element
      span.innerHTML = text;
      // Set the class of the span element
      span.classList.add('isc-source-text');

      // Add the span element after the style tag
      if (el.nextSibling) {
        el.parentNode.insertBefore(span, el.nextSibling);
      } else {
        el.parentNode.appendChild(span);
      }
    });
  };
</script>
Code-Sprache: HTML, XML (xml)

Das Ergebnis sieht dann wie im nächsten Abschnitt aus.

In Zeile 4 kannst du den Selector anpassen, wenn du nur bestimmte <style> Tags anvisieren möchtest. In Zeile 16 kannst du eine andere, als die Standard-Class vergeben.

Zeige das Overlay für <style> Tags

Diese Option erzwingt die Ausgabe der Quellenangabe nach dem <style> Tag mit Hilfe von PHP. Das Ergebnis sieht dann wie folgt aus.

<style>
    .styled-container { background-image: url('hintergrundbild.jpg'); }
</style>
<span class="isc-source-text">(c) Name des Autors</span>
<div class="styled-container"></div>Code-Sprache: HTML, XML (xml)

In unserem Beispiel folgt der gestylte <div> Container direkt auf den Style-Block. Wenn das so ist, dann sollte ein bisschen CSS helfen, die Quellenangabe gut über das gestylte Element zu legen. So etwa der Fall beim Kadence-Theme, für welches wir diese Lösung ursprünglich entwickelt haben.

In der Realität wirst du aber auch viele Style-Blöcke finden, die sich auf ein Element an einer ganz anderen Stelle im Quellcode beziehen. In diesem Fall musst du die obere Methode verwenden um die Quelle als Attribut in den Tag zu laden und dann mit Hilfe von JavaScript an die richtige Stelle verschieben.

(?) Navigation links lead back to the site you came from. No data is stored.