aimg - Dokuwiki Annotated Image Plugin

Description

I needed a Flickr-like annotated image viewer for this website. I found Fotonotes™, so I sat down and made this nice plugin.

From the original Fotonotes™ library I bundled with the plugin only the client-side annotations script along with its stylesheet. I also removed from the original source the code and styles that deal with client-side annotations editing. There may be some left-overs, feel free to do the cleanup yourself and contribute the source :)

I'll be happy if you let me know where the plugin is installed. Just add yourself in the dokuwiki's plugin page.

License

This plugin is released under the Open Source License v2.1 or later (due to Fotonotes™).

Credits

  • As this is my first dokuwiki plugin I have ever written, I got inspiration and example from the image_map plugin
  • Fotonotes™ for the source of the client-side image notes script.

Installation

You can either

  • Download aimg-latest.zip and unzip it into /lib/plugins under the dokuwiki root
  • Or point the Dokuwiki's Plugin Manager to
    http://itay.bazoo.org/_media/projects/aimg/aimg-latest.zip

Syntax

{{aimg> image.png?320x240 |Image title}}

@10,30,60,60|Annotation title
the content is optional, as well as the title and author name.
coordinates format is:
top,left,width,height.
~author

... wash, rinse, repeat ...  

{{<aimg}}

Example

The image

Itay Donenhirsch

Itay Donenhirsch

Pay attention that the title is actually a link

itay

A Wii Nunchuck

See The Purple Cat!

itay

Led Matrix

See all projects

itay

is generated by

{{aimg> me.jpg?200x300 |Itay Donenhirsch}}

@10,30,60,60|[[/personal|Itay Donenhirsch]]
Pay attention that the 
title is actually a link
~itay

@245,100,40,40| A Wii Nunchuck
See [[projects/purplegingi|The Purple Cat]]!
~itay

@265,22,40,30| Led Matrix
[[projects/ledmatrix|{{ projects/ledmatrix/12.jpg?w=100 }}]]
See all [[/projects]]
~itay

{{<aimg}}

Caveats

  • The desired presented image size MUST be specified. Without it the image will be displayed in its original size and will float, which will make a lot of mess on your page. I'll be glad to get a correction for this as I am a CSS-newbie :)

Bugs

  • CSS references a non-existent image. Solution: remove reference
  • A space between the last area coordinate and the pipe symbol renders the coordinate value to 0. Solution: fix parsing

Discussion

, 2009/05/28 11:11
Hi, That's look like a nice plugin, thanks :) I tried your plugin on a brand new Dokuwiki and I have a bug (I have copy/pasted the code from your example). You can see the result here : http://img43.imageshack.us/img43/4428/testaimg.jpg
, 2009/05/28 11:36
I found a work-around : I have put the code from http://fotonotes.net/fnclientlib/styles/fnclient.css in the /lib/styles/style.css of Dokuwiki and it worked :D
, 2009/06/21 06:58
Hi to all, I have tried to download the fotonotes but i got a tar file which have a single unknown file(I tried downloading from the fotonotes site). And so i want anyont to send the fotonotes script in a ZIP format(or just attach all the files) to icosytech@gmail.com and also please give a clear instruction to install it in my own Social Networking app. Thanks in advance.
, 2009/08/23 14:44
Thanks for a great work! I have a question for you - how can make text to justify around the image like it is by default for images in wiki?
, 2009/08/23 15:23
problem solved
, 2009/09/06 15:09
I used underscores (_) in image names and had problems. So be aware. Great plug-in! 10X
, 2010/06/06 17:48
Thanks a lot! The plugin looks cool and i like it! however, it may be too difficult for average users to use it without a wyswyg editor.**Bold Text**
, 2011/05/02 11:33
Just want to point out a conflict with discussion plugin. When this plugin is installed, clicking a button in the toolbar of the discussion form automatically submits the form.
, 2011/11/28 16:46
Can you make a mouse-only-ruled plugin?
, 2013/11/02 18:44
Thanks for your great plugin. I only want to bild an imagemap, but this es even better. Also I´ve tested your plugin in the new Release Candidate "Binky", but there it has no function. I hope that it will be run until the version is out. Until then I will use the "old" version... :-)
, 2016/05/03 09:35
D1Lrbu <a href="http://qvqlyttswzkw.com/">qvqlyttswzkw</a>, [url=http://oudvdwarnxvj.com/]oudvdwarnxvj[/url], [link=http://hexuvcgioevj.com/]hexuvcgioevj[/link], http://eplojawrpsxw.com/
Enter your comment:
60 +2 = ?
 
 
projects/aimg.txt · Last modified: 2010/11/07 16:38 by itay · []
Recent changes RSS feed Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki Creative Commons License Get Firefox