Hier erfährst du, wie du Image Source Control mit etwas Code an deine Bedürfnisse anpassen kannst.

Bitte konsultiere einen Entwickler mit den entsprechenden Erfahrungen, wenn du dich bei den genannten Anpassungen unsicher fühlst. Du kannst auch bei uns eine Auftragsarbeit anfragen.

Layout

Korrektur der Overlay-Position

Die Position des Bildquellen-Overlays wird ermittelt, nachdem die Seite vollständig geladen ist. Sollten auch danach noch Inhalte nachgeladen werden oder sich das Layout aufgrund von Nutzerinteraktionen verschieben, so kann es notwendig sein, die Overlays neu zu positionieren.

Dies ist mit Hilfe der JavaScript-Funktion isc_update_captions_positions() möglich. Je nach Bedarf findest du hier einige Vorlagen zur Nutzung dieser Funktion.

Overlay-Position erneut eine Sekunde nach dem vollständigen Laden der Seite platzieren:

document.addEventListener( 'DOMContentLoaded', function() {
    setTimeout( isc_update_captions_positions, 1000 );
});Code-Sprache: JavaScript (javascript)

Overlay-Position jede Sekunde neu laden. Für sehr dynamische Websites kann das durchaus sinnvoll sein.

setInterval( isc_update_captions_positions, 1000 );

Aktualisierung der Position, sobald mit einem anderen Element interagiert wird. Hier: Klick auf einen bestimmten Button.

document.querySelector('.submit-button').addEventListener( 'click', isc_update_captions_positions );Code-Sprache: JavaScript (javascript)

Sollte die Neuplatzierung nicht funktionieren so kann es daran liegen, dass dynamische Elemente auf der Seite den Selektor der Bildquellen-Overlays verändert haben. Diese ist normalerweise .isc-source .isc-source-text.

Siehe auch isc_overlay_html_source unten für eigene Overlay-Layouts.

Schriftgrößen ändern

Du kannst die Schrift des Overlays oder der Beitrags-Quellenliste mit Hilfe von CSS anpassen.

Die unten aufgeführten oder weitere CSS-Codes kannst du auf einem der folgenden Wege einbauen:

• in die styles.css deines Themes – idealerweise ein Child-Theme
• über Design > Customizer > Zusätzliches CSS
• bei Block-Themes über Design > Website-Editor > Stile > (Bearbeiten-Icon) > (rechts oben „Stile“ Icon anklicken um die Stile-Einstellungen zu zeigen) > (drei Punkte anklicken) > Zusätzliches CSS. Leider ist das gut versteckt und ändert sich häufiger.

Overlay

Ein Beispiel, um die Schriftgröße zu verringern:

.isc-source-text { font-size: 0.8em !important; }Code-Sprache: CSS (css)

Beitrags-Quellenliste

Ein Beispiel, um die Schriftgröße zu verringern:

.isc_image_list_box { font-size: .8em; }Code-Sprache: CSS (css)

Ein Icon zum Overlay hinzufügen

Du kannst das Overlay entweder mit dem PHP-Filter isc_overlay_html_source oder CSS anpassen. Informationen zum PHP-Filter findest du im Code von Image Source Control.

Für CSS kannst du den Selektor .isc-source .isc-source-text:before nutzen, um ein Element vor dem Text einzublenden. Unten findest du einen Entwurf für eine solche Regel mit einem SVG-Icon. Um ein SVG-Icon in eine Data-URL umzuwandeln nutze bitte eines der verfügbaren Online-Tools.

.isc-source .isc-source-text:before {
    content: url('data:image/svg+xml;base64,...'); /* Ersetze durch deine eigene SVG Data-URL */
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px; /* Platz zwischen Icon und Text */
    vertical-align: middle; /* Für das Alignment von Icon und Text */
}Code-Sprache: CSS (css)

Die Globale Quellenliste stylen

Die Globale Quellenliste kommt ohne eigenes Styling, damit es das Layout deines Themes verwendet und sich damit nahtlos in den Stil deiner Website integriert.

Die Tabelle hat die Klasse isc_all_image_list_box, die du für eigene Anpassungen mit CSS verwenden kannst. Hier ein paar Beispiele:

/* Überschriften linksbündig anordnen und den Abstand zwischen ihnen erhöhen */
.isc_all_image_list_box th {
    text-align: left;
    padding-right: 10px;
}

/* Abstand zwischen Zeilen erhöhen */
.isc_all_image_list_box td, .isc_all_image_list_box th {
    padding-bottom: 20px;
}Code-Sprache: CSS (css)

Filter-Hooks (PHP)

Wir sind mehr als bereit, weitere Hooks hinzuzufügen, um deinen Anforderungen gerecht zu werden – schreib uns einfach an.

Um herauszufinden, wie Filter im Zusammenhang mit ISC genau benutzt werden sollten, empfehlen wir dir einen Blick auf ihre Definition in unserem Quellcode.

Halte dich an die Vorgaben der „WordPress Plugin API“ zur Benutzung von add_filter(), um deine Filter hinzuzufügen.

isc_images_in_posts

Dies erlaubt dir, Bilder für einen Beitrag zu registrieren, bevor die Beitrags-Metadaten isc_post_images gespeichert werden. Zum Beispiel:

add_filter('isc_images_in_posts', 'your_images_in_posts_filter', 10, 2);
function your_images_in_posts_filter($image_ids, $post_id) {
	// betrachte den Quellcode, um die Struktur des Arrays $image_ids zu erkennen
	return $image_ids;
}Code-Sprache: PHP (php)

isc_images_in_posts_simple

Ähnlich wie isc_images_in_posts oben, allerdings dafür gedacht, wenn die Metadaten isc_image_posts gespeichert werden. Registriere hiermit weitere Beiträge, die ein spezifisches Bild nutzen. Zum Beispiel:

$image_urls = apply_filters('isc_images_in_posts_simple', $image_urls, $post_id);Code-Sprache: PHP (php)

isc_overlay_html_source

Benutze isc_overlay_html_source, um eigenes Markup bei der Ausgabe des Overlays hinzuzufügen. Wir empfehlen die Verwendung zusammen mit der Option „Entferne Markup und CSS-Style“. Zum Beispiel:

// ergänze das Overlay mit eigenen Elementen
add_filter('isc_overlay_html_source', function($source = '', $image_id = 0) {
	return "<span class='image-source' style='font-weight: bold;'>$source</span>";
}, 10, 2);Code-Sprache: PHP (php)

Dieses kleine Plugin nutzt den Filter und Beispiel-CSS. Du kannst es zum Experimentieren benutzen.

Du kannst außerdem die Hooks isc_overlay_html_markup_before und isc_overlay_html_markup_after verwenden, um einen Wrapper um das Bild anzulegen, das die Quelle aufweist. Wirf einen Blick in den Plugin-Quellcode, um herauszufinden, wie sie benutzt werden.

isc_public_source_url_html

Du kannst den Filter isc_public_source_url_html verwenden, um den gesamten HTML-Code, der den Quellen-Link erzeugt, zu manipulieren. Zum Beispiel:

Entferne „nofollow“ aus allen Quellen-Links

add_filter('isc_public_source_url_html', function( $source_link_html) {
	return str_replace('rel="nofollow"', '', $source_link_html);
});Code-Sprache: PHP (php)

Entferne „nofollow“ nur von spezifischen Bildern

Bitte berüchsichtige, dass array(12, 123) nur als Beispiel dient und dass du ihn mit deinen eigenen Anhangs-IDs ersetzen musst.

add_filter('isc_public_source_url_html', function($source_link_html, $attachment_id) {
	// dieses Beispiel funktioniert für die Bilder mit den IDs 12 und 123
    if(!in_array($attachment_id, array(12, 123), true)) {
		return $source_link_html;
	}
	return str_replace('rel="nofollow"', '', $source_link_html);
}, 10, 2);Code-Sprache: PHP (php)

isc_public_excluded_post_ids

Du kannst den Filter isc_public_excluded_post_ids verwenden um ISC auf bestimmten Beiträgen und anderen Einzelseiten zu deaktivieren.

Hier ein Beispiel für den Beitrag mit der ID 1323:

add_filter( 'isc_public_excluded_post_ids', function( $excluded_post_ids ){
	$excluded_post_ids[] = 1323;
	return $excluded_post_ids;
});Code-Sprache: PHP (php)

Wenn ISC auf einer Seite deaktiviert ist, dann werden auch die Bilder, die auf dieser Seite aufgeführt sind, nicht erfasst. Das führt dazu, dass sie in der Globalen Quellenliste nicht enthalten sind.

Sonstige Anpassungen

• Bildquellen für Hintergrundbilder anzeigen
• Plugin-Labels im Frontend ändern
• Quellenangaben für Hintergrundbilder beim Gruppen-Block anzeigen

ISC auf einzelnen Seiten deaktivieren

Du kannst Image Source Control auf einzelnen Seiten komplett deaktivieren. Nutze dafür den Hook isc_public_excluded_post_ids. In der Dokumentation findest du dazu auch ein Beispiel.

Weitere Möglichkeiten, Image Source Control oder einzelne Overlays zu deaktivieren findest du unter Bildquellen deaktivieren.

ISC-Felder in Blöcken und im Media-Overlay aktivieren

Standardmäßig sind die Optionen von Image Source Control auf Beitragsbearbeitungsseiten entweder nur in Bildblöcken oder im Mediathek-Overlay sichtbar. Eine gleichzeitige Aktivierung kann in ungünstigen Fällen dazu führen, dass die Informationen überschrieben werden.

Dennoch kannst du die Felder an beiden Stellen aktivieren, indem du folgenden PHP-Code auf deiner Seite einfügst.

add_filter( 'isc_force_block_options', '__return_true' );Code-Sprache: JavaScript (javascript)

Sobald dieser Filter genutzt wird, ist die Block-Optionen Plugin-Einstellung ausgegraut.