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