WordPress: Notizen auf Bildern mit imgNote

Vielleicht kennen einige von euch die flickr-Funktion um Notizen auf Bildern zu hinterlassen. Das kann ganz nützlich sein um gewisse Dinge auf Bildern gleich mit einem Text zu erklären. Den ganzen Spaß gibt es nun auch als Erweiterung für die WordPress nutzenden Blogger unter euch.

Die mit Notizen versehenen Punkte sehr ihr wenn ihr mit der Maus über das Bild hoovert. Zu den einzelnen Notizen lassen sich auch URLs hinterlegen.

imgNote, so der Name des Plugins für WordPress, ist brandneu. Die öffentliche Version ist erst wenige Stunden alt und auch eine Aktualisierung wurde bereits nachgeschoben (hatte einen Bug gefunden, der es nicht erlaubt Zahlen und Sonderzeichen (wie z.B. 27″) zusammen geschrieben in den Notes zu erwähnen).

Die Benutzung ist denkbar einfach: Plugin hochladen und aktivieren. Fügt ihr nun in einen neuen Beitrag ein Bild ein, so erscheint unterhalb des Editors ein weiteres Feld in dem ihr eure Bilder mit Notizen versehen könnt:

Wer dieses Plugin nützlich findet: einfach Marcel für seine Idee dazu danken und dem Philipp für die Ausführung.




    72 Kommentare zu “WordPress: Notizen auf Bildern mit imgNote”

  1. Jörg (twitter ) sagt

    Net schlecht, hat nen gewissen Charme. Und das sagt ein Nicht-Wordpress-Jünger. ;-)

    Kommentar am 8. Januar 2010 um 07:39 geschrieben.


  2. caschy sagt

    Bist du denn noch IMMER NICHT umgestiegen? ;)

    Kommentar am 8. Januar 2010 um 07:41 geschrieben.


  3. Christian sagt

    Morgen Caschy,

    super Beitrag zu einem super Plugin. Das wird dann wohl auch demnächst bei mir Verwendung finden. Danke natürlich auch an
    Manuel und Philipp.

    Beschluss: Wird heute noch implementiert.

    Kommentar am 8. Januar 2010 um 07:43 geschrieben.


  4. Marcel (twitter ) sagt

    Ich bin ja eigentlich nicht kleinlich, aber “Manuel”? :(

    Kommentar am 8. Januar 2010 um 07:52 geschrieben.


  5. caschy sagt

    Ja, war noch früh, wenig Kaffee und so. Ist behoben :-) Restmeldungen siehe Messenger.

    Kommentar am 8. Januar 2010 um 07:56 geschrieben.


  6. Marcel (twitter ) sagt

    Danke. :D

    Kommentar am 8. Januar 2010 um 07:57 geschrieben.


  7. Bernd (twitter ) sagt

    Sieht man im Feed nicht. Es ist leider nicht mal ein Hinweis zu erkennen, dass das Bild irgendwelche “Notes” enthält. Schade, da müsste wohl noch nachgebessert werden.

    Kommentar am 8. Januar 2010 um 08:01 geschrieben.


  8. Marcel (twitter ) sagt

    Bernd: Eigentlich gibt es die Funktion und sie funktioniert auch eigentlich bestens. Zumindest in drei mir bekannten Blogs.

    Wenn es hier nicht geht, müssten wir uns der Sache mal annehmen.

    Kommentar am 8. Januar 2010 um 08:04 geschrieben.


  9. Marcel (twitter ) sagt

    Ich nehme alles zurück und behaupte das Gegenteil. Eigentlich sollte es gehen, es ging auch mal, aber gerade gehts bei mir auch nicht. Wir klären und fixen das, danke!

    Kommentar am 8. Januar 2010 um 08:05 geschrieben.


  10. baschtl sagt

    Also die BVB-Tasse hättest du ja mal nicht beschreiben müssen ;)

    Kommentar am 8. Januar 2010 um 08:12 geschrieben.


  11. Bernd (twitter ) sagt

    Wenn wirklich auch im Feed geht, habt ihr wirklich ein cooles Plugin gebastelt!

    Kommentar am 8. Januar 2010 um 08:13 geschrieben.


  12. Joern sagt

    Uhhh, also ich finde das Tool nicht gut!
    Ohne die Notiz wäre mir die hässliche Tasse gar nicht aufgefallen… :) :)

    Kommentar am 8. Januar 2010 um 08:14 geschrieben.


  13. RainerM sagt

    @Bernd Ganz unten im Feed steht doch “Images in this post contain notes, please open the website directly” und hier im Artikel steht unter dem Bild, des 6 Notes enthalten sind.

    Gruß Rainer

    Kommentar am 8. Januar 2010 um 08:16 geschrieben.


  14. Aaron (twitter ) sagt

    Nettes Plugin!

    …Und was hängt da eigentlich für ein Twitter Poster an der Wand? :-)

    Kommentar am 8. Januar 2010 um 08:34 geschrieben.


  15. ralph (twitter ) sagt

    Top tool, top Technik, keine Frage, aber der Büro-Stuhl ?! Bandscheibenschaden vorprogrammiert, um im Bild zu bleiben. Mal ein paar Euros für einen neuen Hocker investieren, zahlt sich im Alter wieder aus.

    Gruss,
    ralph (ein sehr alter user)

    Kommentar am 8. Januar 2010 um 08:36 geschrieben.


  16. Daniel (twitter ) sagt

    @Aaron Das ist der schöne Twitterwandkalender. Der gleiche Ziert meine Wand :) http://stadt-bremerhaven.de/tw.....kostenlos/

    Kommentar am 8. Januar 2010 um 08:39 geschrieben.


  17. caschy sagt

    @ralph: ich habe einen irreperablen Bandscheibenschaden, der sich allerdings momentan nicht bemerkbar macht. Meinen Bürostühl habe ich auf den Müll geworfen, da ich auf diesem nicht beweglichen Stuhl aus unserem Esszimmer endlich vernünftig und gerade sitze.

    Kommentar am 8. Januar 2010 um 08:40 geschrieben.


  18. Heiko sagt

    Tolles Plugin. Danke für den Tipp. Ich habe eine solche Funktionalität bisher zwar noch nicht vermisst, aber denke trotzdem dass damit einige neue Möglichkeiten zur Beitrags-Gestaltung genutzt werden können.

    Kleiner Hinweis: Hatte den Beitrag ursprünglich mobil über das iPhone gelesen. Dort ist das eingebundene Bild nur “normal” zu sehen. Man sollte sich als noch Gedanken über einen Fallback machen, wenn wirklich relevante Infos im Bild versteckt werden.

    Kommentar am 8. Januar 2010 um 08:44 geschrieben.


  19. Mo sagt

    3 Fernbedienungen… Hast du schon mal einen Universale von Logitech testen können? Das wäre bestimmt auch einmal einen Beitrag wert *zwinker*

    Kommentar am 8. Januar 2010 um 08:55 geschrieben.


  20. caschy sagt

    @Mo: Telefon, TV, Subwoofer ;) Oder kann die Logitech Harmony auch Telefon neuerdings?

    Aber ernsthaft – ich gebe dir Recht: ich brauche eigentlich so etwas – im Wohnzimmer ist es noch schlimmer.

    Kommentar am 8. Januar 2010 um 08:58 geschrieben.


  21. Teo (twitter ) sagt

    Sieht sehr interessant aus, erinnert etwas an das Markieren im VZ-Netzwerk. Werde ich auf jeden Fall weiterverfolgen! Danke.

    Vielleicht wäre es nützlich die Rahmen unsichtbar schalten zu können. So könnte man kleine Suchbilder in Blogs einbauen ;)

    Kommentar am 8. Januar 2010 um 09:01 geschrieben.


  22. N-Rico sagt

    Ich habe mich zuerst gewundert, wieso ich diese Notizen nicht sehe, bis mir einfiel, dass dieses “Nice-To-Have” (Fazit vorweg genommen) JavaScript benötigt.

    Ich frage mich, ob das für Blogs wirklich nützlich ist. Bin eher der Meinung, man sollte ein Bild lieber mit einem schönen Text erläutern. Sonst könnte man nur noch ein Bild bloggen und alles mit Notizen erklären.

    P.S.: Du hättest ganz primitiv noch “Pflanze” ergänzen können. ;)

    Kommentar am 8. Januar 2010 um 09:34 geschrieben.


  23. knuspermagier sagt

    @Bernd: Ich sehe da keine technische Möglichkeit es im Feedreader zu ermöglichen, da man nunmal extra Javascript und CSS laden muss und ich bezweifle das irgendein Feedreader das tut.

    @Heiko: eigentlich sollte da ein entsprechender Button sein, wenn man die Seite mit dem iPhone aufruft.

    Wegen der iPhone-Sache und der Message im Feedreader werde ich mal nachschauen, danke für das Feedback.

    Kommentar am 8. Januar 2010 um 10:04 geschrieben.


  24. KRiZZi (twitter ) sagt

    Danke Marcel, danke Philipp. Installiert und aktiviert, allerdings noch nicht getestet. Aber theoretisch find ich’s ne ziemlich praktische Sache, z.B. wenn Personen abgebildet sind.

    Kommentar am 8. Januar 2010 um 10:07 geschrieben.


  25. DancingBallmer sagt

    Oha, da wurde aber nicht nur das Audiosystem umgebaut. Sieht deutlich besser und vor allem gesünder aus. Vorher hatte ich allein beim Betrachten der Bilder (zwei Monitore in den verschiedenen Schreibtischecken) schon Nackenschmerzen bekommen. Das mit dem Stuhl kann ich auch nachvollziehen, ich verfluche derzeit meinen und bin schon auf der Suche nach einer Alternative.

    Kommentar am 8. Januar 2010 um 10:13 geschrieben.


  26. Bernd (twitter ) sagt

    @knuspermagier: Nach dem Hinweis von RainerM sehe ich jetzt, dass der Hinweis-Text am Ende des Beitrags im Feed steht. Das finde ich etwas irritierend, mir wäre das direkt beim Bild lieber.

    Kommentar am 8. Januar 2010 um 10:14 geschrieben.


  27. knuspermagier sagt

    @Bernd is schon in Arbeit, kommt spätestens heute Abend.

    Kommentar am 8. Januar 2010 um 10:15 geschrieben.


  28. Unbesonders sagt

    @Carsten: Ist das eine Arbeitsplatzattrappe von IKEA ? So aufgeräumt ist doch kein Arbeitsplatz eines Webworkers, oder ? ;)

    Kommentar am 8. Januar 2010 um 10:20 geschrieben.


  29. caschy sagt

    Ich hab Urlaub! :)

    Kommentar am 8. Januar 2010 um 10:22 geschrieben.


  30. Manzel (twitter ) sagt

    Benutzt du denn noch die MX518? Hat dir die Magic Mouse nicht zugesagt?

    Kommentar am 8. Januar 2010 um 10:28 geschrieben.


  31. stardust sagt

    @caschy: welche abmessungen hat dein schreibtisch (also die arbeitsplatte?) bzw. wie isses mit 27″ auf so eine entfernung zu arbeiten? muss man da schon öfters den kopf bewegen um den überblick zu behalten?

    Kommentar am 8. Januar 2010 um 10:32 geschrieben.


  32. Roman sagt

    Also im Google Reader werden die Notes nicht angezeigt und auf meinem iPhone sind die Kästen alle verschoben.

    Kommentar am 8. Januar 2010 um 10:53 geschrieben.


  33. knuspermagier sagt

    @Roman: es ist nicht möglich die Notes im Feedreader anzuzeigen, da die kein Javascript nachladen. Im Reader bekommt man allerdings eine Nachricht. Die ist in der aktuellen Version noch etwas versteckt, in der nächsten, die im Laufe des Tages kommt, ist das allerdings schon gefixt.

    Das mit dem iPhone schau ich mir nochmal an. Danke.

    Kommentar am 8. Januar 2010 um 10:55 geschrieben.


  34. milchbaum sagt

    Funktioniert nicht mit IE6 :)

    Kommentar am 8. Januar 2010 um 11:17 geschrieben.


  35. knuspermagier sagt

    @milchbaum: Vielen dank für diese äußerst weitreichende und ausführliche Problembeschreibung.

    Kommentar am 8. Januar 2010 um 11:19 geschrieben.


  36. milchbaum sagt

    Pff, was willst du denn hören? Es geht eben einfach nicht, da tut sich GAR nix.

    Kommentar am 8. Januar 2010 um 11:20 geschrieben.


  37. knuspermagier sagt

    @milchbaum “es tut sich garnix” ist jedenfalls schon hilfreicher als “geht nicht”. Mal ne XP VM mit IE6 installieren…

    Kommentar am 8. Januar 2010 um 11:23 geschrieben.


  38. milchbaum sagt

    muuuh

    Kommentar am 8. Januar 2010 um 11:25 geschrieben.


  39. Sören G. Prüfer (twitter ) sagt

    Danke für den Tipp und Danke an die Autoren.

    Ich habe das mal auf die schnelle ausprobiert. Das Plugin scheint nur Beiträge und keine Seiten zu unterstützen.

    Ich wollte mit dem Plugin eine (nicht interaktive) Image-Map ersetzen. Mit einem Kniff geht das -> http://apodi.de/das-team/

    Wie folgt habe ich das auf der Seite eingebunden:
    1) einen privaten Beitrag erstellt
    2) das Bild mit notes versehen
    3) das gleiche Bild auf der Seite einbinden und
    3) die class-Attribute um die notes erweitern

    aus
    class=”alignnone size-full wp-image-1036″
    wird
    class=”alignnone size-full wp-image-1036 note-1036 note-url”

    Das Umlaute-Problem in der Version 1.0-rc3 habe ich durch Encodierung der Umlaute umgehen können.

    Danke nochmal, Sören

    Kommentar am 8. Januar 2010 um 12:18 geschrieben.


  40. knuspermagier sagt

    @Sören G. Prüfer: in der eben veröffentlichen Version (rc4) sollte es auch auf Seiten gehen, nicht nur bei Posts. Das hinzufügen der note-asdasd und note-url CSS-Klassen ist nicht nötig, das Plugin schaunt nur nach der wp-image-Klasse :D

    Kommentar am 8. Januar 2010 um 12:22 geschrieben.


  41. pixeltunes.de (twitter ) sagt

    Klasse Plugin, keine Frage;
    aber Herr Knobloch was ist denn das große braune Ding rechts unterhalb des iMAC. Dazu eine Beschreibung wäre mehr als angebracht ;-)

    Vg
    Oli

    Kommentar am 8. Januar 2010 um 13:19 geschrieben.


  42. Oliver sagt

    Plugin is nett – funktioniert aber nicht im Feedreader

    Kommentar am 8. Januar 2010 um 13:23 geschrieben.


  43. caschy sagt

    Rechts unterm iMac? Braun? Schreibtisch?

    Kommentar am 8. Januar 2010 um 13:24 geschrieben.


  44. Heiko (twitter ) sagt

    Also im Google Reader sind keine Notes im Bild, aber am Ende des Artikels steht dann:

    images in this post contain notes, please open the website directly

    Kommentar am 8. Januar 2010 um 13:27 geschrieben.


  45. Der geilste Typ (twitter ) sagt

    Gibt allerdings ein Problem mit Bildern, die man z.B. mit width=”460″ height=”382″ einbaut. Die Notes erscheinen dann auf dem verkleinert eingebauten Bild an der Stelle, wo sie beim normal grossen Bild eigentlich wären. Da müßte noch dran gefeilt werden.

    Kommentar am 8. Januar 2010 um 13:35 geschrieben.


  46. Didi (twitter ) sagt

    Sicherheitsgurt am Stuhl: HB-Männchen?

    Kommentar am 8. Januar 2010 um 14:06 geschrieben.


  47. knuspermagier sagt

    @Heiko Das geht nicht anders, da die meisten Feedreader (auch Google Reader) kein externes Javascript einbinden.

    Kommentar am 8. Januar 2010 um 14:11 geschrieben.


  48. Crono (twitter ) sagt

    Wo steht dein richtiger Rechner? Oder biste jetzt vollkommen auf der Mac Schiene?

    Cu Crono

    Kommentar am 8. Januar 2010 um 14:13 geschrieben.


  49. Benji sagt

    Ich hab mir erst vorkurzem WordPress angeschaut, blogge aber nicht wirklich, aus Mangel an Zeit und Ideen. Trotzdem ist es immer wieder gut, neue/weitere/andere PlugIns vorgestellt zu bekommen. Ich lese deinen Blog täglich und sehr gerne :-)

    Wie bist du denn mit deiner Fritzbox 7270 zufrieden? Ich hab mir gestern erst eine zugelegt, da mein Speedport W700V nur rumgezickt hat. Das Paket kam gestern und so ne unkomplizierte und schnelle Installation, bei der AUF ANHIEB alles geklappt hat, hatte ich noch nie! Von daher bin ich bisher begeistert :-)

    Vielleicht gibts da ja von deiner Seite aus Erfahrungsberichte, Tipps & Tricks zu weiteren oder bereits vorhandenen Funktionen, nützliche Zusatzttools, weitere Verwendungsmöglichkeiten für den alten Speedport, etc.? Halt irgendwas, was nen eigenen Blogeintrag rechtfertigen würde ;-)

    Kommentar am 8. Januar 2010 um 14:18 geschrieben.


  50. knuspermagier sagt

    @Der geilste Typ: Danke, known Bug. Hättest du die Projektseite gelesen, wüsstest du es. Da es eh ziemlich dumm ist ein Bild per HTML/CSS zu resizen, hat es keine hohe Priorität.

    Kommentar am 8. Januar 2010 um 14:22 geschrieben.


  51. Der geilste Typ (twitter ) sagt

    @Knuspermagier: Wieso ist das ziemlich dumm? Wenn mir WordPress dieses Komfort-Feature out-of-the box anbietet, nutze ich es auch. Und ich denke, das tun sehr viele (gerade in Kombination mit z.B. Fancy Box). Deswegen würde ich diesem Bug durchaus eine höhere Priorität zuweisen.

    Kommentar am 8. Januar 2010 um 14:26 geschrieben.


  52. knuspermagier sagt

    @Der geilste Typ: Naja, okay, da die meisten Browser heutzutage resamplen ist es vielleicht besser geworden. Früher war die Grafikqualität da jedenfalls immer unterirdisch.

    Aber was solls, niedrige Priorität bedeutet im aktuellen Development-Modus eh nur “nicht heute, sondern eher Sonntag”

    Kommentar am 8. Januar 2010 um 14:30 geschrieben.


  53. Crono (twitter ) sagt

    Solange es keine 12 Megapixelbilder sind die somit auf kleines Format gebracht werden ok, aber leider “missbrauchen” viele diese Funktionalität auf die beschriebene Art …

    Cu Crono

    Kommentar am 8. Januar 2010 um 14:54 geschrieben.


  54. N-Rico sagt

    @Crono Wieso missbrauchen? Es werden umgekehrt auch 1×1 Grafiken gestreckt, die als Platzhalter dienen. Über die Sauberkeit wollen wir nicht reden.

    Die Attribute “width” und “height” dienen dem Browser als Platzhalter, sodass er den weiteren Content schon ordentlich platzieren kann, um dann die größeren Bilder zu laden. Deswegen sollte man als Webentwickler immer diese Attribute angeben.

    Aber in gewisser Weise hast Du recht: es wäre ein Missbrauch, ein 12MP Bild auf 300×100 Pixel einzuschränken.

    Kommentar am 8. Januar 2010 um 15:07 geschrieben.


  55. dimido sagt

    Hast ja schön aufgeräumt!

    Da liegen noch 3 Telefone ;)

    Kommentar am 8. Januar 2010 um 17:26 geschrieben.


  56. Joerg sagt

    Also in meinem Feedreader Greatnews werden die “notes” angezeigt aber höher als das eigentliche Bild.

    Kommentar am 8. Januar 2010 um 17:59 geschrieben.


  57. knuspermagier sagt

    @Joerg: Wär nett wenn du es (vll mit nem Screenshot zusammen) im Support Forum berichten könntest. (http://support.knuspercode.de/.....pr-imgnote) Danke!

    Kommentar am 8. Januar 2010 um 18:01 geschrieben.


  58. Christian (twitter ) sagt

    Interessantes Plugin, erinnert irgendwie an die Verlinkungen in den bekannten VZ’s ;)

    Kommentar am 8. Januar 2010 um 19:53 geschrieben.


  59. Hermann (twitter ) sagt

    finde ich wirklich toll, habe ich gleich installiert. Danke

    Kommentar am 8. Januar 2010 um 21:48 geschrieben.


  60. Jörg (twitter ) sagt

    @Caschy:
    Umsteigen? Auf was denn, etwa WordPress?
    http://j-sys.de/index.php?s=wo.....bmit=Suche

    Ich habe lokal immer ne aktuelle WordPress-Version laufen und spiele immer mal wieder damit herum – wirklich glücklich macht mich momentan weder b2evo noch WP.

    Kommentar am 9. Januar 2010 um 10:22 geschrieben.


  61. Crono (twitter ) sagt

    @N-Rico

    Genau das meint ich. Klar, die 1×1 gifs sind evtl für den ein oder anderen nützlich und auch das attribut ansich hat seine berechtitung, aber ich mache eig oft die Erfahrung dass ich wieder 30 Sekunden auf ein Briefmarkengroßes Bild warte ;) Es bedarf vielleicht einfach etwas mehr Aufklährung^^

    Cu Crono

    Kommentar am 9. Januar 2010 um 19:43 geschrieben.


  62. caschy sagt

    Du Norbert, das ist nur temporär. Das sieht ja wieder anders aus. Ist ja noch n PC und n 24er TFT am Schreibtisch, da steht nun die Box ;)

    Kommentar am 11. Januar 2010 um 23:25 geschrieben.


  63. Benjamin sagt

    Irgendwie gehen bei dir die ImgNotes nicht mehr. Der Firebug meldet setupZoom is not defined.

    Kommentar am 13. Januar 2010 um 16:16 geschrieben.


  64. caschy sagt

    Weil es deaktiviert ist.

    Kommentar am 13. Januar 2010 um 16:18 geschrieben.


  65. knuspermagier sagt

    @Benjamin: http://support.knuspercode.de/.....pr-imgnote entweder ins Support-Forum oder mich mal per Twitter kontaktieren. Danke

    Kommentar am 13. Januar 2010 um 16:18 geschrieben.


  66. knuspermagier sagt

    Achso, ging garnicht um einen privaten Blog :D

    Kommentar am 13. Januar 2010 um 16:27 geschrieben.


  67. Daxon sagt

    Gibt es sowas denn auch für die MooTools – also nicht zwangsläufig als Plugin?

    Kommentar am 17. Januar 2010 um 22:42 geschrieben.


  68. Johannes (twitter ) sagt

    Funktioniert nicht mehr. Unter Firefox und Opera. ;-)

    Kommentar am 23. März 2010 um 03:30 geschrieben.



  1. 4 Trackback(s)

  2. Jan 8, 2010: ButtliesBlog 2.0 » Blog Archive » Ich probiere mal: imgNote
  3. Jan 8, 2010: knspr-imgnote – Bildernotizen für Wordpress » F!XMBR
  4. Feb 3, 2010: Links Januar 2010 | funkygog Blog
  5. Okt 4, 2010: Alles was sich so ansammelt...

Du willst nichts verpassen? Neben der E-Mail-Benachrichtigung habt ihr auch die Möglichkeit den Feed dieses Beitrags zu abonnieren. Wer natürlich alles lesen möchte, der sollte den Hauptfeed abonnieren. Alternativ könnt ihr euch via E-Mail über alle neuen Beiträge hier im Blog informieren lassen. Einfach eure E-Mail-Adresse hier eingeben, dann bekommt ihr 1x täglich eine Zusammenstellung.