Anleitung

Inhaltsverzeichnis

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.2 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.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.
Image source fields in the Media Library

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

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.

Index überprüfen

Du findest weitere Debug-Optionen unter Medien > Fehlende 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 clear image-post index -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.

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 besuchen.

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 wp-content/plugins/image-source-control-isc/isc.log.

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)

Bildquellen

  • Features_Icons_Overlay: Eigene Quelle ISC