Beschreibung

Vor einigen Wochen schrieb mich der Herr Wichmann an und legte mir die Idee für ein WordPress-Plugin auf den Tisch, dass es möglich machen soll Bildern Notizen anzuheften, wie man es von flickr kennt. Klicken, Boxen ziehen, Anmerkung schreiben fertig. Diese Anmerkungen können die Leser dann sehen und lesen. Nach ein wenig rumgefriemel mit der WordPress-Plugin-API gelang es mir dann auch das Plugin fertig zu bekommen, hier ist es nun.

For english explanations please consult the WordPress plugin repository page!

Download

Download der jeweils aktuellsten Version gibt’s im WordPress-Plugin-Repository!

Wenn ihr das Plugin für gut befindet und einsetzt, wäre es ziemlich cool es vielleicht kurz zu erwähnen und auf diese Projektseite zu verlinken und so. Highfive!

Aktuelle Version: 1.0-final. Probleme? Support-Forum

Technisches/Danksagungen

Vielen dank an Marcel für die Idee. Das Plugin verwendet das imgAreaSelect jQuery-Plugin von Michal Wojciechowski und basiert teilweise auf dem imgnotes jQuery-Plugin von Dr. Tarique Sani. Vielen dank an Marcel, Martin und Jan für’s Testen.

Features

  • Hinzufügen, Editieren, Löschen von Notizen auf Bildern
  • Notes sind verlinkbar
  • Style leicht über CSS anzupassen
  • Im RSS-Feed wird auf Notizen hingewiesen
  • Wenn vom iPhone betrachtet wird ein Button eingeblendet um die Notizen anzuzeigen, da es dort kein mouseover gibt

Installation

  1. Ins WordPress-Pluginverzeichnis hochladen (/wp-content/plugins/)
  2. Plugin aktivieren. Nun sollte es beim anlegen und editieren von Posts ganz unten eine “Edit image notes”-Box geben
  3. Im Menü unter “Plugins” sollte nun ein “knspr-ImgNote”-Eintrag aufgetaucht sein, dort können die Einstellungen angepasst werden

Workflow

  1. Neuen Post erstellen oder bestehenden Editieren.
  2. Bilder über den normalen WordPress-Uploader hochladen und in den Post einfügen.
  3. Wenn der Post neu ist: Als Draft/Vorlage speichern und Seite neu laden. Die Bilder sollten nun in der Box unten sichtbar sein.
  4. Wenn der Post nicht neu ist: Den Reload-Button klicken, die Bilder sollten erscheinen.
  5. Vorschaubild anklicken und den “Add Note”-Button drücken und Notiz platzieren
  6. Die Notiz mit “Save note” speichern

FAQ

Es funktioniert nicht.

Die Bilder müssen über das in WordPress integrierte Tool hochgeladen werden (vom PC, nicht von einer URL). Außerdem muss darauf geachtet werden, das die “wp-image-xxx”-CSS-Klasse nicht verloren geht. Falls es immernoch nicht geht, bitte schreib ins Support-Forum

Mein Blog hat Titelbilder, die per Custom-Tag eingebunden werden. Dort will ich auch Notizen.

Füg folgendes unter das Bild ein (am Besten direkt nach dem img-Tag): <?php echo knspr_get_frontend_custom_field($post->ID, 'postImage', '.titleImage-'. $post->ID) ?>. Das erste Argument ist dabei die Post-ID, das zweite ist der Name des Custom-Feldes in dem die URL des Bildes steht. Das letzte ist ein CSS-Selektor, der möglichst eindeutig auf das Bild zeigen sollte.

Warum werden die Notizen nicht im Feedreader angezeigt?

Da die meisten Feedreader den Post-Content in ihrem eigenen Layout rendern strippen sie meistens Javascript raus, bzw laden keine exterenen Javascripts und CSS-Files. Daher ist es nicht möglich die Notizen dort anzuzeigen, stattdessen gibt es eine Meldung, die den Feedreader-Benutzer darauf hinweist, dass er den Blogeintrag doch direkt anschauen soll. Diese kannst du in den Einstellungen ändern.

Wie ändere ich das Aussehen der ganzen Sache?

Entweder du editierst die imgnotes.css im knspr-imgnote/themes/default-Verzeichnis, oder du legst einen eigenen Theme im themes/-Ordner an. Im letzteren Fall muss allerdings die Option in den Einstellungen entsprechend angepasst werden.

Tolles Plugin. Wie kann ich euch nur dafür danken?

Du kannst dich gerne an meiner zukünftigen Gitarre beteiligen. Was den Herrn UARRR angeht, fragt ihn am Besten selbst.

Screenshot -Frontend

Clipboard01

Screenshot – Admin

adminscreen