Anleitung

Auf dieser Seite findest du eine Anleitung fĂŒr unser Plugin Image Source Control fĂŒr WordPress (ISC). Das Plugin hilft dir nie mehr zu vergessen, den Bildern auf deinem Blog eine Bildquelle hinzuzufĂŒgen.

1. Wie das Plugin funktioniert

Image Source Control ermöglicht es dir die Quellen fĂŒr alle Bilder auf deinem Blog zu verwalten.

Das Eingabefeld fĂŒr den Rechteinhaber, die Links zu deren Webseiten und andere Optionen, findest du in der MedienĂŒbersicht oder in den Einstellungen des Bild-Blocks beim Bearbeiten einer Seite.

Du kannst eine oder mehrere der folgenden Methoden auswÀhlen um die Bildquellen anzuzeigen:

  • Alle Quellen der aktuellen Seite auflisten (Image source list)
  • Ein Overlay der Quelle ĂŒber den entsprechenden Bildern anzeigen (Overlay)
  • Eine Quellenliste aller Bilder einer Webseite auf einer dedizierten Seite anzeigen (List with all sources)

ISC erstellt einen Index aller Seiten und Bilder, die auf der Webseite enthalten sind. Dieser Index wird verwendet, wenn das Plugin vor fehlenden Bildquellen warnt oder eine komplette Liste der Bildquellen erstellt wird.

Der Seiten-Bilder-Index wird erstellt, wenn jemand die Seite zum ersten Mal besucht nachdem der Index-Prozess gestartet wurde. AbhÀngig von der Anzahl der Posts und Besucher, kann es einige Zeit in Anspruch nehmen bis der komplette Index erstellt wurde.

2. Erste Schritte

Nachdem du Image Source Control installiert und aktiviert hast, folge bitte diesen Schritten um zu sehen, wie und ob das Plugin richtig funktioniert.

  1. Gehe zu Einstellungen > Bildquellen und wÀhle aus wie und wo die Bildquellen angezeigt werden sollen.
  2. WĂ€hle unter Medien > MedienĂŒbersicht ein Bild aus und trage die Bildquelle in das entsprechende Feld ein.
  3. Gehe zu einem Beitrag, in welchem du das Bild verwendst.
  4. Wenn du Image source list oder Overlay als Methode ausgewÀhlt hast, sollte die Bildquelle auf der Seite sichtbar sein. Ist dies nicht der Fall, leere bitte den Cache.
  5. Wenn du List with all sources als Methode ausgewÀhlt hast, dann platziere bitte den unter 3.1.1 genannten Shortcode auf einer entsprechenden Seite.
  6. Lies bitte die anderen Informationen und insbesondere die Issues and Debugging-Sektion, solltest du auf Probleme stoßen.
  7. Kontaktiere uns, wenn du weitere Hilfe benötigst.

3. Einstellungen

Die Plugin-Einstellungen findest du unter Settings > Image Sources.

3.1 Position der Bildquellen

Hier bestimmst du, wie und wo ISC die Quellen der Bilder anzeigen soll. Wir empfehlen dir nur eine Methode zu verwenden oder sie mit einer dedizierten Seite, die die Bildquellen der gesamten Webseite anzeigt, zu kombinieren.

Jede der Möglichkeiten die Quellen anzuzeigen, kann mit weiteren Optionen angepasst werden.

3.1.1 Bildquellenliste

Zeigt eine Bildquellenliste (image source list) auf der aktuellen Seite an. Du kannst dich entscheiden, die Liste entweder mit Hilfe des Shortcodes

Bildquellen

  • Features_Icons_Overlay: Eigene Quelle ISC
manuell zu platzieren oder sie automatisch an das Ende jeder Seite und jedes Beitrages hinzufĂŒgen zu lassen.

Fortgeschrittene Frontend-Entwickler können auch folgende PHP-Funktion in den Template-Dateien verwenden um die Quellenliste zu platzieren:

<?php if( function_exists('isc_list') ) { isc_list(); } ?>
Code-Sprache: HTML, XML (xml)
Archivseiten

Du kannst weiterhin bestimmen, ob und wie du die Bildquellen in Archivseiten wie dem Kategorie-Feed anzeigen lassen willst.

Behalte dabei die folgenden Punkte im Hinterkopf:

  • Auch wenn dein WordPress-Theme keine Thumbnails auf Archivseiten anzeigt, wird die Quelle gegebenenfalls dennoch gezeigt.
  • Wenn andere Teile deiner Webseite das Exzerpt abfragen, wird der Source String möglicherweise ebenfalls eingefĂŒgt. Der beste Weg dies zu umgehen, ist es die Funktion isc_thumbnail_source() in deinem Template zu verwenden.

3.1.2 Overlay

Zeigt die Bildquelle als Overlay an. Dieses Feature funktioniert nur fĂŒr die Bilder im Seiteninhalt und sollte immer mit einer kompletten Bildquellenliste verwendet werden, da ein Konflikt mit einem anderen Script immer dazu fĂŒhren kann, es es nicht angezeigt wird.

3.1.3 VollstÀndiges Quellenverzeichnis

Um ein vollstÀndiges Quellenverzeichnis (list with all sources) verwenden zu können, ist es notwendig eine neue statische Seite auf deiner Webseite anzulegen und einen der folgenden Shortcodes einzupflegen.

Verwende diesen Shortcode um die Bildquellen einzublenden, die zu bestimmten BeitrÀgen und Seiten gehören:

[isc_list_all]
Code-Sprache: JSON / JSON mit Kommentaren (json)

Benutze diesen Parameter um alle Bilder aus der MedienĂŒbersicht anzuzeigen, inklusive den derzeit nicht aktiv verwendeten:

[isc_list_all included="all"]
Code-Sprache: JSON / JSON mit Kommentaren (json)

Verwende das Attribut per_page um nur eine bestimmte Anzahl an Bildquellen pro Seite anzeigen zu lassen (hier: 25).

[isc_list_all per_page="25"]
Code-Sprache: JSON / JSON mit Kommentaren (json)

Du kannst diese Attribute auch verbinden, wie zum Beispiel:

[isc_list_all per_page="25" included="all"]
Code-Sprache: JSON / JSON mit Kommentaren (json)

3.1.4 Weitere Möglichkeiten

Um nur eine einzige Bildquelle im Frontend/Template aufzulisten, verwende diese Funktion:

<?php if( function_exists('isc_image_source') ) { isc_image_source($att_id); } ?>
Code-Sprache: HTML, XML (xml)

$att_id ist die ID des Bildes in der MedienĂŒbersicht.

Benutze die folgende Funktion, um die Bildquelle des Feature- oder Vorschaubildes eines Beitrags in deinem Template zu verwenden (Einzelseite oder Archivseiten innerhalb des Loops):

<?php if( function_exists('isc_thumbnail_source') ) { isc_thumbnail_source($post_id); } ?>
Code-Sprache: HTML, XML (xml)

$post_id ist die ID des Beitrags oder der Seite. Du kannst die ID weglassen, wenn du die Funktion innerhalb eines Loops verwenden.

3.2 Overlay

Diese Optionen werden verfĂŒgbar, sobald das Overlay / Bildbeschriftung zur Anzeige von Bildquellen ausgewĂ€hlt ist.

Die Layout-Option erlaubt es dir, das vordefinierte Layout, inklusive Markup, CSS und JavaScript, zu deaktivieren. Die Bildquelle wird nun im Rohformat ausgegeben. Du kannst sie mit Hilfe des isc_overlay_html_source Filters anpassen. Weitere Informationen dazu findest du unten auf dieser Seite.

Zwei Einstellungen fĂŒr das Layout der Bild-Overlay-Option
Layout-Einstellungen fĂŒr das Bild-Overlay.

Die Einstellung fĂŒr die Overlay-Position ist nur verfĂŒgbar, wenn das Standardlayout nicht deaktiviert ist.

3.3 Standardquelle

Anstatt jede Bildquelle einzeln zu benennen, kannst du eine Standardquelle definieren, die fĂŒr mehrere Bilder gleichzeitig verwendet werden kann. Dies ist insbesondere sinnvoll, wenn eine große Anzahl deiner Bilder von einem bestimmten Anbieter oder von dir selbst stammt.

WĂ€hle die Standard source-Einstellungen in der Miscellaneous settings-Box aus um das Verhalten der Standardquellen festzulegen.

Du kannst die Bildquelle in der MedienĂŒbersicht editieren oder wenn du das Bild hochlĂ€dst.

4. Bildquellen bearbeiten

Bild-Block

Wenn du mithilfe des Bild-Blocks im Block-Editor ein Bild hochlĂ€dst oder editierst, findest du die Eingabefelder fĂŒr die Bildquellen in den Block-Einstellungen auf der rechten Seite.

Controls for the image sources in the block editor.

MedienĂŒbersicht

Du kannst die Bildquellen auch in der MedienĂŒbersicht bearbeiten.

  1. Gehe zu Medien > MedienĂŒbersicht.
  2. Klicke auf das Vorschaubild.
  3. Die Eingabefelder befinden sich rechter Hand.
Ansicht der Optionen fĂŒr Bildquellen in der WordPress Mediathek.
Ansicht der Bildquellenoptionen in der Mediathek

Fehlende Bildquellen

Gehe zu Medien > Bildquellen.

Hier sind alle Bilder aufgelistet, die noch keine Quelle zugewiesen bekommen haben. Klicke einfach auf den Bildnamen um zu der Bildbearbeitungsseite mit den Eingabefeldern zu gelangen.

5. Probleme und Debugging

Bekannte Limitierungen

  • Das Overlay funktioniert nicht fĂŒr Bilder, die dynamisch (= per JavaScript, z.B. bei manchen Page Buildern oder Slidern) oder im Layout (= CSS) der Seite hinzugefĂŒgt werden.
  • Das Overlay wird auf AMP-Seiten unterhalb der Bilder angezeigt. Wir haben das JavaScript, das fĂŒr das Verschieben oberhalb der Bilder verantwortlich war, entfernt, da es nicht mit dem AMP-Standard kompatibel sein kann.

Allgemeine Probleme

  • Deine Webseite ist gecached: ISC kann fĂŒr Seitenansichten, die gechached wurden, keinen Seiten-Bilder-Index erstellen. Du kannst entweder warten bis der Cache automatisch geupdated wird oder ihn manuell löschen um die Indexierung zu starten.
  • Deine Bilder sind außerhalb von WordPress gehostet: ISC kann nur auf die Bilder aus der MedienĂŒbersicht zugreifen.

Wenn die Quellen nicht auf den Beitragsseiten oder in der gesamten Bildquellenliste angezeigt werden, liegt dies möglicherweise an einem dieser GrĂŒnde:

Fehlende Quellen

Alle Bilder, die noch keine Quelle zugewiesen bekommen haben, findest du unter Medien > Bildquellen.

Warnings about missing image sources.
ISC informiert dich ĂŒber potentielle Probleme.

Bilder mit leeren Quellenangaben

Schau bitte in der Übersicht der Bilder ohne Quellen nach.

Klicke auf den Bildnamen um zu der Seite zu gelangen, auf der du die Bilder bearbeiten kannst.

Bilder mit unbekannten Positionen

Du siehst möglicherweise eine Liste von Bilder mit unbekannten Positionen. Diese Liste enthÀlt Bilder, die ISC nicht in den Inhalten der Seiten und BeitrÀge finden konnte. Das ist kein Problem, wenn die Bilder nicht dazu bestimmt sind eine Quelle anzuzeigen, wie etwa das Logo diener Webseite.

Mit jedem besuchten Beitrag und jeder besuchten Seite auf deiner Webseite, wird der Seiten-Bilder-Index aktualisiert und die Liste wird kĂŒrzer. Bilder aus der MedienĂŒbersicht, die nicht in Inhalten verwendet werden, werden weiterhin in der Liste angezeigt werden.

Bild-Beitrag Index

Du findest weitere Debug-Optionen unter Medien > Bildquellen > Debug.

Beitrag-Bild VerknĂŒpfungen auflisten and Bild-Beitrag VerknĂŒpfungen auflisten lĂ€dt die Indizes die ISC erstellt. Wenn du eine Seite aufrufst und die Quelle nicht geladen wird, dann findest du die Lösung vielleicht weiter oben unter Allgemeine Probleme.

Index neu laden

Klicke auf den Bild-Beitrag-Index löschen -Button um den aktuellen Index zu löschen. Dies kann hilfreich sein, wenn es grĂ¶ĂŸere Änderungen bei ISC gab, die das Speichern deiner Bilder oder Quellen betreffen.

Nachdem der Index bereinigt wurde, wird ISC die Informationen jeder Seite und jedes Beitrages deiner Webseite aktualisieren, wenn diese das erste Mal besucht werden. Gegebenenfalls musst du deinen Cache leeren, wenn die Seite Caching verwendet.

Seiten vom Index ausschließen

Der Bild-Seiten-Index wird automatisch fĂŒr alle öffentlichen Seiten erstellt. HierfĂŒr gibt es aktuell keine Anpassungsmöglichkeit.

Solltest du feststellen, dass das vollstĂ€ndige Quellenverzeichnis Seiten auflistet, die nicht (mehr) öffentlich sichtbar sind, z.B. weil du Anhangseiten deaktiviert hast, dann nutze unter „Index neu laden“ beschriebene Funktion, um diesen neu zu erstellen.

Debug mode

Aktiviere den Debug mode unter Einstellungen> Bildquellen > Verschiedene Einstellungen um zu sehen, wie sich ISC verhÀlt, wenn du eine Seite im Frontend besuchst.

Wenn du die Option aktiviert hast, besuche eine beliebige Seite im Frontend und hÀnge ?isc-log an die URL. Das Plugin schreibt nun jede AktivitÀt in die Datei isc.log im ISC Pluginverzeichnis. Der vollstÀndigen Pfad ist neben der Debug-Option verlinkt.

Die Datei wird gelöscht, wenn du die Option debug mode deaktivierst.

6. Filter and Action Hooks

Erfahrene Entwickler können ISC mit Hilfe von Hooks anpassen. Meldet euch bitte bei uns wenn wir weitere, fĂŒr euch hilfreiche Hooks einbauen können.

Verwende add_filter() wie im WordPress Plugin API beschrieben um eigene Filterfunktionen einzuhÀngen.

Wir empfehlen euch einen Blick in den Quellcode zu werfen um zu sehen, wie die genannten Hooks jeweils arbeiten.

isc_images_in_posts

Erweitert den Index, der speichert, welche Bilder sich in einem bestimmten Beitrag befinden.

Beispiel:

add_filter( 'isc_images_in_posts', 'your_images_in_posts_filter', 10, 2 ); function your_images_in_posts_filter( $image_ids, $post_id ) { // look at the source code to see how the $image_ids array is structured return $image_ids; }
Code-Sprache: PHP (php)

isc_images_in_posts_simple

Erweitert den Index, der speichert, welche BeitrÀge ein bestimmtes Bild beinhalten.

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

isc_overlay_html_source

Du kannst den Filter isc_overlay_html_source benutzen um das vorhandene Markup der Bildquelle unterhalb von Bildern zu manipulieren. Am besten benutzt du den Filter in Kombination mit der Option „Entferne Markup und CSS-Style“ um das Standard-Layout vom Plugin vollstĂ€ndig zu deaktivieren.

// Add custom output to the overlay 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)

Du kannst auch die Filter isc_overlay_html_markup_before und isc_overlay_html_markup_after nutzen um einen Wrapper um das Bild und die Quelle zu packen. Schau dir am besten im Plugincode an, wie die Filter aktuell verwendet werden.

Bildquellen

  • Features_Icons_Overlay: Eigene Quelle ISC