WordPress: Notizen auf Bildern mit imgNote

8. Januar 2010 Kategorie: Internet, WordPress, geschrieben von: caschy

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.



Über den Autor: caschy

Hallo, ich bin Carsten! Daddy von Max, Dortmunder im Norden, BVB-Getaufter, Gerne-Griller und Gründer dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, XING, Linkedin, Instagram und YouTube. Persönliches Blog. PayPal-Kaffeespende.

Carsten hat bereits 22129 Artikel geschrieben.

72 Kommentare

Jörg 8. Januar 2010 um 07:39 Uhr

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

caschy 8. Januar 2010 um 07:41 Uhr

Bist du denn noch IMMER NICHT umgestiegen? 😉

Christian 8. Januar 2010 um 07:43 Uhr

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.

Marcel 8. Januar 2010 um 07:52 Uhr

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

caschy 8. Januar 2010 um 07:56 Uhr

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

Marcel 8. Januar 2010 um 07:57 Uhr

Danke. 😀

Bernd 8. Januar 2010 um 08:01 Uhr

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.

Marcel 8. Januar 2010 um 08:04 Uhr

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.

Marcel 8. Januar 2010 um 08:05 Uhr

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!

baschtl 8. Januar 2010 um 08:12 Uhr

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

Bernd 8. Januar 2010 um 08:13 Uhr

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

Joern 8. Januar 2010 um 08:14 Uhr

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

RainerM 8. Januar 2010 um 08:16 Uhr

@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

Aaron 8. Januar 2010 um 08:34 Uhr

Nettes Plugin!

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

ralph 8. Januar 2010 um 08:36 Uhr

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)

Daniel 8. Januar 2010 um 08:39 Uhr

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

caschy 8. Januar 2010 um 08:40 Uhr

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

Heiko 8. Januar 2010 um 08:44 Uhr

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.

Mo 8. Januar 2010 um 08:55 Uhr

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

caschy 8. Januar 2010 um 08:58 Uhr

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

Teo 8. Januar 2010 um 09:01 Uhr

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 😉

N-Rico 8. Januar 2010 um 09:34 Uhr

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

knuspermagier 8. Januar 2010 um 10:04 Uhr

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

KRiZZi 8. Januar 2010 um 10:07 Uhr

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.

DancingBallmer 8. Januar 2010 um 10:13 Uhr

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.

Bernd 8. Januar 2010 um 10:14 Uhr

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

knuspermagier 8. Januar 2010 um 10:15 Uhr

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

Unbesonders 8. Januar 2010 um 10:20 Uhr

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

caschy 8. Januar 2010 um 10:22 Uhr

Ich hab Urlaub! 🙂

Manzel 8. Januar 2010 um 10:28 Uhr

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

stardust 8. Januar 2010 um 10:32 Uhr

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

Roman 8. Januar 2010 um 10:53 Uhr

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

knuspermagier 8. Januar 2010 um 10:55 Uhr

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

milchbaum 8. Januar 2010 um 11:17 Uhr

Funktioniert nicht mit IE6 🙂

knuspermagier 8. Januar 2010 um 11:19 Uhr

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

milchbaum 8. Januar 2010 um 11:20 Uhr

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

knuspermagier 8. Januar 2010 um 11:23 Uhr

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

Sören G. Prüfer 8. Januar 2010 um 12:18 Uhr

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

knuspermagier 8. Januar 2010 um 12:22 Uhr

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

pixeltunes.de 8. Januar 2010 um 13:19 Uhr

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

Oliver 8. Januar 2010 um 13:23 Uhr

Plugin is nett – funktioniert aber nicht im Feedreader

caschy 8. Januar 2010 um 13:24 Uhr

Rechts unterm iMac? Braun? Schreibtisch?

Heiko 8. Januar 2010 um 13:27 Uhr

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

Der geilste Typ 8. Januar 2010 um 13:35 Uhr

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.

Didi 8. Januar 2010 um 14:06 Uhr

Sicherheitsgurt am Stuhl: HB-Männchen?

knuspermagier 8. Januar 2010 um 14:11 Uhr

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

Crono 8. Januar 2010 um 14:13 Uhr

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

Cu Crono

Benji 8. Januar 2010 um 14:18 Uhr

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 😉

knuspermagier 8. Januar 2010 um 14:22 Uhr

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




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 morgens eine Zusammenstellung.