Wie du Overlays bei Nicht-Standard-Bildern platzierst

Viele Anpassungen und erweiterte Funktionen in Image Source Control bestehen aus Anpassungen für Page Builder, Plugins und Themes, um mit nicht standardmäßigen Methoden zur Anzeige von Bildern zu arbeiten, wie zum Beispiel Elementor oder WP Bakery.

Da es theoretisch unbegrenzte Möglichkeiten gibt, dies zu tun, kann ich nicht alle innerhalb des Plugins lösen. Ich habe es jedoch so einfach wie möglich gemacht, dass andere Entwickler Regeln für benutzerdefinierte HTML-Strukturen hinzufügen können. Wenn du Schwierigkeiten damit hast, kannst du mich auch beauftragen.

Je nach deinen Einstellungen erkennt Image Source Control jede Bild-URL und listet sie in den Post- und globalen Listen auf. In diesem Tutorial geht es dagegen darum, wie man eine Bildunterschrift über oder neben einem Bild hinzufügt.

Bitte beachte, dass alle Code-Beispiele aus dem Quellcode deines Servers stammen, nicht aus der Interpretation des Browsers. Wenn du diese Unterschiede nicht verstehst, bitte einen Entwickler um Hilfe.

Standard vs. Nicht-Standard Bilder

Das grundlegende HTML zum Laden eines Bildes ist das img-Tag mit einem src-Attribut für die URL des Bildes.

<img src="https://beispiel.de/wp-content/uploads/garten.jpg">Code-Sprache: HTML, XML (xml)

Image Source Control erkennt auch Bilder in style-Attributen. Wie du diese steuern und anpassen kannst erfährst du in Bildunterschriften für Hintergrundbilder anzeigen.

<div style="background: url(https://beispiel.de/wp-content/uploads/garten.jpg)">Code-Sprache: HTML, XML (xml)

Das Plugin erkennt auch Hintergrundbilder im Format des Avada Builders:

<div data-bg="https://beispiel.de/wp-content/uploads/garten.jpg">Code-Sprache: HTML, XML (xml)

Das letzte Beispiel zeigt normalerweise kein Bild an, weil Browser das data-bg-Attribut nicht verstehen. Stattdessen werden diese nicht-standardmäßigen HTML-Codes oft mit zusätzlichem JavaScript geliefert, das es in Code umwandelt, den der Browser versteht. Leider ist es dann für Image Source Control zu spät, um den Unterschriften-Code hinzuzufügen.

ISC mitteilen, wo sich die Bild-URL befindet

Als Lösung kannst du einen Filter verwenden, um Image Source Control mitzuteilen, wo sich die Bild-URL befindet und wie sie verarbeitet werden soll.

Dies erfordert ein wenig Code und Kenntnisse über reguläre Ausdrücke.

Der zu verwendende Filter ist isc_pro_public_custom_attribute_processors. Er akzeptiert ein mehrdimensionales Array mit bis zu vier Attributen in jedem Unterarray. Schauen wir uns ein Beispiel an, das ich für einen Kunden erstellt habe.

add_filter(
    'isc_pro_public_custom_attribute_processors',
    function ( $filters ) {
        // SPAN tag mit data-bgsrc
        $filters[] = [
            'regex_pattern'        => '#<span[\x20|\x9|\xD|\xA]+[^>]*((data-bgsrc)="(.+)").*\/?>#isU',
            'replaced_match_index' => 1,  // Index der zu ersetzenden Zeichenfolge innerhalb des Tags
            'url_match_index'      => 3,  // Index der Bild-URL
            'enable_overlay'       => false,
        ];

        // IMG tags mit data-img
        $filters[] = [
            'regex_pattern'        => '#<img[\x20|\x9|\xD|\xA]+[^>]*((data-img)="(.+)").*\/?>#isU',
            'replaced_match_index' => 1,
            'url_match_index'      => 3,
            'enable_overlay'       => true,
        ];

        return $filters;
    },
    10,
    1
);
Code-Sprache: PHP (php)

Das Beispiel fügt zwei benutzerdefinierte Regeln hinzu. Jede Regel hat vier Attribute:

regex_pattern ist der reguläre Ausdruck, um das HTML-Element und das Attribut zu finden, das die Bild-URL enthält. Ich persönlich teste reguläre Ausdrücke gerne auf regex.com.
replaced_match_index ist der Index der Gruppe, die das Attribut und die Bild-URL enthält. Technisch gesehen sollte es sich innerhalb des HTML-Elements befinden und an einer Stelle enden, an der ein weiteres HTML-Attribut leicht hinzugefügt werden kann.
url_match_index ist der Gruppenindex mit der Bild-URL ohne umgebende Zeichen. Image Source Control wird die Quelle dieses Bildes in der Mediathek suchen.
enable_overlay ist auf true gesetzt, wenn die Bildunterschrift dem HTML-Element hinzugefügt und damit sichtbar werden soll.

Mit dem obigen Code werden diese Beispiele

<span data-bg="https://beispiel.de/wp-content/uploads/garten.jpg"></span>

<img data-img="https://beispiel.de/wp-content/uploads/garten.jpg"/>Code-Sprache: HTML, XML (xml)

schließlich zu

<span data-bg="https://beispiel.de/wp-content/uploads/garten.jpg" data-isc-source-text="©: Name des Bildautors" data-isc-images="123" />
  <span class="isc-source-text">©: Name des Bildautors</span>

<img data-img="https://beispiel.de/wp-content/uploads/garten.jpg" data-isc-source-text="©: Name des Bildautors"/>Code-Sprache: HTML, XML (xml)

Wie durch den enable_overlay-Schlüssel im Array gesteuert, wird die Quelle des Bildes im span-Element ausgegeben, während das zweite Beispiel es nur als Attribut im ursprünglichen HTML lädt.

Bildunterschrift stylen

Bildunterschriften, die auf diese Weise hinzugefügt werden, sind standardmäßig ungestylt. Du kannst einen benutzerdefinierten CSS-Selektor verwenden, um sie zu stylen. Ein passender Selektor für diese Elemente und ein grundlegendes Styling ist das folgende Beispiel:

*[data-isc-images] .isc-source-text {
    position: absolute;
    font-size: 0.9em;
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    opacity: 0.7;
    padding: 0 0.15em;
    text-shadow: none;
    display: inline-block;
    right: 5px;
    bottom: 5px;
    z-index: 9999;
}Code-Sprache: CSS (css)

Verwendung eines benutzerdefinierten Plugins

Du kannst den obigen Code in ein neues Plugin, einen benutzerdefinierten Code-Snippet-Manager oder die functions.php deines Themes einfügen.

Zur Vereinfachung habe ich dir unten den vollständigen Code für ein eigenes Plugin aufgeführt. Erstelle dazu eine neue PHP-Datei unter wp-content/plugins und füge den folgenden Code dort ein. Passe anschließend die Regeln nach deinen Bedürfnissen an.

&lt;?php
/**
 * Plugin Name: Image Source Control – Beispiel.de
 * Description: Anpassungen für https://beispiel.de/
 * Version: 1.0
 * Author: Thomas Maier, Image Source Control
 * Author URI: https://imagesourcecontrol.de/
 */

class ISC_Custom_Image_Elements {
    /**
     * Konstruktor-Methode für die Klasse.
     */
    public function __construct() {
        add_action( 'plugins_loaded', [ $this, 'plugins_loaded' ] );
    }

    /**
     * Wird nach dem Laden aller Plugins ausgelöst.
     */
    public function plugins_loaded() {
        // Überprüfen, ob ISC aktiviert ist
        if ( ! defined( 'ISCPRO' ) ) {
            return;
        }

        add_filter(
            'isc_pro_public_custom_attribute_processors',
            function ( $filters ) {
                $filters[] = [
                    'regex_pattern'        => '#<span[\x20|\x9|\xD|\xA]+[^>]*((data-bgsrc)="(.+)").*\/?>#isU',
                    'replaced_match_index' => 1,  // Index der zu ersetzenden Zeichenfolge innerhalb des Tags
                    'url_match_index'      => 3,  // Index der Bild-URL
                    'enable_overlay'       => false,
                ];

                $filters[] = [
                    'regex_pattern'        => '#<img[\x20|\x9|\xD|\xA]+[^>]*((data-img)="(.+)").*\/?>#isU',
                    'replaced_match_index' => 1,
                    'url_match_index'      => 3,
                    'enable_overlay'       => false,
                ];

                return $filters;
            },
            10,
            1
        );

        add_action( 'wp_head', [ $this, 'add_custom_css' ] );
    }

    /**
     * Fügt benutzerdefiniertes CSS in den Kopf der Seite ein.
     */
    public function add_custom_css() {
        ?>
        <style>
            *[data-isc-images] .isc-source-text {
                position: absolute;
                font-size: 0.9em;
                background-color: rgb(51, 51, 51);
                color: rgb(255, 255, 255);
                opacity: 0.7;
                padding: 0 0.15em;
                text-shadow: none;
                display: inline-block;
                right: 5px;
                bottom: 5px;
                z-index: 9999;
            }
        </style>
        <?php
    }
}

// Plugin initialisieren
new ISC_Custom_Image_Elements();
Code-Sprache: JavaScript (javascript)

Weitere Hinweise

Beachte bitte noch Folgendes:

Die hier gezeigten Code-Beispiele stammen aus dem Quellcode, der von deinem Server geliefert wird, nicht aus der Interpretation deines Browsers.
Das Layout kann möglicherweise umbrechen, wenn du eine Bildquelle mit einem Link in ein HTML-Element einfügst, das in einen Link eingebettet ist, oder selbst ein Link ist. Die einzige Lösung besteht darin, einen dieser Links zu entfernen.

Wenn du Hilfe beim Coding benötigst, überlege, mich zu beauftragen.

Du könntest dieses Tutorial auch in ChatGPT oder andere KI-Tools einspeisen, um dir bei Beispielen für dein Problem zu helfen.

Porträt von Thomas Maier, Gründer und Geschäftsführer von Image Source Control

Fragen? Wie kann ich helfen?

Schreib mir direkt über unser Kontaktformular.