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.

Gefällt dir der Artikel? Dann teile ihn mit deinen Freunden.

Hallo, ich bin Carsten! Baujahr 1977, Dortmunder im Norden, BVB-Getaufter und Gründer dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, Instagram und YouTube. PayPal-Kaffeespende. Mail: carsten@caschys.blog

72 Kommentare

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

  2. Bist du denn noch IMMER NICHT umgestiegen? 😉

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

  4. Ich bin ja eigentlich nicht kleinlich, aber „Manuel“? 🙁

  5. Ja, war noch früh, wenig Kaffee und so. Ist behoben 🙂 Restmeldungen siehe Messenger.

  6. Danke. 😀

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

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

  9. 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!

  10. Also die BVB-Tasse hättest du ja mal nicht beschreiben müssen 😉

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

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

  13. @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

  14. Nettes Plugin!

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

  15. 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)

  16. @Aaron Das ist der schöne Twitterwandkalender. Der gleiche Ziert meine Wand 🙂 http://stadt-bremerhaven.de/twitter-wandkalender-2010-kostenlos/

  17. @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.

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

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

  20. @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.

  21. 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 😉

  22. 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. 😉

  23. @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.

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

  25. DancingBallmer says:

    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.

  26. @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.

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

  28. Unbesonders says:

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

  29. Ich hab Urlaub! 🙂

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

  31. @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?

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

  33. @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.

  34. milchbaum says:

    Funktioniert nicht mit IE6 🙂

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

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

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

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

  39. @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 😀

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

  41. Plugin is nett – funktioniert aber nicht im Feedreader

  42. Rechts unterm iMac? Braun? Schreibtisch?

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

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

  45. Sicherheitsgurt am Stuhl: HB-Männchen?

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

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

    Cu Crono

  48. 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 😉

  49. @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.

  50. @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.

  51. @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“

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

  53. @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.

  54. Hast ja schön aufgeräumt!

    Da liegen noch 3 Telefone 😉

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

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

  57. Interessantes Plugin, erinnert irgendwie an die Verlinkungen in den bekannten VZ’s 😉

  58. finde ich wirklich toll, habe ich gleich installiert. Danke

  59. @Caschy:
    Umsteigen? Auf was denn, etwa WordPress?
    http://j-sys.de/index.php?s=wordpress&submit=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.

  60. @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

  61. 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 😉

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

  63. Weil es deaktiviert ist.

  64. @Benjamin: http://support.knuspercode.de/index.php/categories/2/knspr-imgnote entweder ins Support-Forum oder mich mal per Twitter kontaktieren. Danke

  65. Achso, ging garnicht um einen privaten Blog 😀

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

  67. Funktioniert nicht mehr. Unter Firefox und Opera. 😉