Log#

June 09, 2006

When did JSPWiki become so damn complicated? I had a hell of a time getting the 2.3.x version up and running... with 2.2.x the install process was pretty simple. Anyway, as Fan pointed out to me, the binaries I posted here just won't work with anything but JSPWiki 2.2.33. See the instructions below for help on getting the ImagePlus plugin working in your version of JSPWiki.

May 29, 2006

Sorry, I get side tracked easily. However I did finish this little modification to a point that it is useable in my wiki. See the Download section below for details if you would like to try it out.

December 23, 2005

Well I think I was complicating things with the original plan. Instead of mucking about with the attachment provider (as per Janne's suggestion), simply use the workDir to store resized images in. The ThumbnailServlet can create the resized images and cache them in the workDir without the need of a special attachment provider.

December 15, 2005

Talked to jststeve in #jspwiki today and he had some good ideas.

I have done some work today and a bit yesterday. Currently I have a ImagePlus plugin class, the ThumbnailServlet and ThumbnailAttachmentProvider. The plugin class is pretty basic and functional it just spits out the HTML code. Both the ThumbnailServlet and ThumbnailAttachmentProvider have just been started.

Time to take a break, record progress and send a short e-mail to Janne to see what he thinks about this before I go too much further.

December 14, 2005

I started development on this plugin today. I sat in the IRC channel for a while hoping to discuss some ideas but not too many people seem to hang out there.

My goal is to mimic some of the functionality that the mediawiki image handling has. The main feature I find most useful is the ability to specify in the wiki image markup that the image is a thumbnail. Mediawiki automatically creates a resizes the image attachment and places the thumbnail on the page in the HTML IMG tag.

Originally I thought about simply modifying the existing Image plugin but it just seemed like too much of a hack that way. I copied the original Image plugin and called it ImagePlus (stupid name I know).

Install Instructions#

JSPWiki 2.2.33#

Download imageplusplugin-bin.zip. If you have not made any changes to your web.xml file or the jspwiki.css file in the default template, it is safe to just extract this zip file inside your JSPWiki directory. Otherwise you will have to extract it else where and merge the files manually.

JSPWiki >= 2.3.x#

I'm afraid that you must download the source code for the version of JSPWiki you are running and re-build it along with the modifications I have made. It's an easy process though I will walk you through it.

For the brave, here is a patch file to update the JSPWiki source tree with the modifications I have made. It has been generated from JSPWiki-2.3.72, although, I suspect it could be applied easily to a newer version. jspwiki-2.3.72-imageplus-0.1.patch

Tools needed for building:

  • Sun JDK installed
  • Apache Ant

1. Download the source code for the version of JSPWiki you have. You can find an archive of all the releases here: http://www.ecyrd.com/~jalkanen/JSPWiki/. Note: you want to download the zip file that has src in the file name, eg: JSPWiki-2.3.72-alpha-src.zip.

2. Unzip the source code to a temp directory:

josh@cooper:/tmp/workdir$ unzip ~/JSPWiki-2.3.72-alpha-src.zip

3. Download imageplus-0.1.tar.gz

4. Extract this file from the same working directory that you extracted the JSPWiki source.

josh@cooper:/tmp/workdir$ tar -xzf ~/imageplus-0.1.tar.gz

5. Now change directory into the JSPWiki project directory and build the jar file.

josh@cooper:/tmp/workdir$ cd JSPWiki
josh@cooper:/tmp/workdir/JSPWiki$ ant jar
Optionally, if you have not modified your installation of JSPWiki, or you don't mind reconfiguring it build a war file and simply drop the war file into your webapps directory. If you go this route, your DONE!
josh@cooper:/tmp/workdir/JSPWiki$ ant war
josh@cooper:/tmp/workdir/JSPWiki$ cp /tmp/josh/JSPWiki/install/JSPWiki.war /path/to/webapps

6. You should be left with a fresh new JSPWiki.jar file in the JSPWiki/build. Copy this file into your WEB-INF/lib directory where JSPWiki is installed.

josh@cooper:/tmp/workdir/JSPWiki$ cp build/JSPWiki.jar /path/to/webapps/JSPWiki/WEB-INF/lib

7. Finally you must modify the web.xml file and add some classes to the CSS
Modify JSPWiki/WEB-INF/web.xml

<!-- Add this to the section of you web.xml file with <servlet> tags -->
   <servlet>
       <servlet-name>ThumbnailServlet</servlet-name>
       <servlet-class>com.ecyrd.jspwiki.thumb.ThumbnailServlet</servlet-class>
   </servlet>

<!-- Add this to the section with <servlet-mapping> tags -->
   <servlet-mapping>
       <servlet-name>ThumbnailServlet</servlet-name>
       <url-pattern>/thumb/*</url-pattern>
   </servlet-mapping>

Add CSS classes, JSPWiki/templates/default/jspwiki.css if you use the default template

/* Image Plus plugin */
.imageplusplugin
{
        width: auto;
        border: 1px solid #e1e1e1;
        background-color: #f8f8f8;
        padding: 3px;
}

.imageplusplugin_fleft
{
        float: left;
}

.imageplusplugin_fright
{
        float: right;
}

.imageplusplugin img
{
        border: 1px solid #e1e1e1;
}

.imageplusplugin .caption
{
        font-size: 80%;
        margin: 2px 0 2px 0;
}

Where to store the thumbnails#

I think the thumbnails should be generated and stored in the same directory structure as the attached image.

For example:

/attachments/XBoxRemoteMod-att/XBoxIR-001.jpg-dir
|_ 1.jpg
|_ 1-thumb-200.jpg

Where the generated image file is named version-thumb-size.jpg

At first glance it therefore seems to make sense to add a new attachment provider implementation. Or rather simply extend the BasicAttachmentProvider and add some thumbnail specific methods. The downside to this is if the user would like to take advantage of ImagePlus plugin, they would need to modify the jspwiki.properties file and change the current attachment provider.

This is not a good idea. I would store the images under jspwiki.workDir. Meddling with the internal workings of the providers is strongly discouraged. --JanneJalkanen

I agree. It didn't seem like a good idea, and it does make sense to use the workDir. After playing around a bit with the code, I think simply refactoring the Image plugin and writing a thumbnail servlet should do the trick! --JoshKropf

How to output the thumbnails#

Currently when the Image plugin encounters a source image which is an attachment it outputs /attach/page_name/file_name in the HTML IMG tag SRC attribute. The ImagePlus plugin will behave the same except when the thumb parameter is specified. This parameter will cause the plugin to output a path of /thumb/page_name/file_name?size=thumb_size in the IMG tag SRC attribute.

Thumbnail servlet#

Since the plugin outputs a new type of path, a servlet is needed to create/output the thumbnails. When a request is made for a thumbnail the servlet will check if the thumbnail exists. If it does exists, the thumbnail file is sent in the response. If the file does not exist, the servlet must create the thumbnail, save it to the file system for subsequent requests, and then send it in the response.

Files Added/Modified#

For this little hack I added a number of classes and modified a number of files
FileActionComments
WEB-INF/web.xmlModifiedadded servlet mappings for the thumbnail servlet
templates/default/jspwiki.cssModifiedadded css classes to format output from the ImagePlusPlugin
com/ecyrd/jspwiki/plugin/ImagePlusPlugin.javaAdded
com/ecyrd/jspwiki/thumb/Thumbnail.javaAdded
com/ecyrd/jspwiki/thumb/ThumbnailManager.javaAdded
com/ecyrd/jspwiki/thumb/ThumbnailServlet.javaAdded

ImagePlus Plugin Usage#

The ImagePlus plugin is much the same as the Image plugin except it provides functionality to output a thumbnail of the image.

Parameters#

  • src = Image source. This can either be a full URL (http://..) or a .WikiAttachment name. Required.
  • align = left|right|center. Default behavior of the plugin when the align parameter is omitted, is to position the image along the left margin, and clear all elements to the right. If align is set to either left or right the image floats to the left or right respectively. If align is set to center the image is centered in the available area and elements to the right are cleared.
  • height = integer. Force the height of the image.
  • width = integer. Force the width of the image.
  • thumb = integer. Generates a thumbnail by resizing the source image to a specified width.
  • caption = caption text. The text that should be shown as a caption under the image.
  • style = style info. Any style markup you would like to apply to the div surrounding the image and caption.
  • class = class name. Redefine the default class for this image, which is "imageplusplugin".

The link attribute is missing because the plugin will always make the thumbnail image link to the full size image. I tested adding a link into the caption text but this does not work... will have to investigate why.

The plugin outputs much different HTML than the original Image plugin:

DIV [align=center]
   DIV class='imageplusplugin [imageplusplugin_(fright|fleft)]'
      IMG src='the_image.jpg'
      DIV class='caption'
         some caption text
      END DIV
   END DIV
END DIV

The reason for this is I have had difficulties in the past formatting the current TABLE structure that the Image plugin outputs with CSS. I am modeling this after the image support in mediawiki and they use this DIV structure.

Hi! If you want to refactor the Image plugin, go ahead, and send me a patch. I'd love to get rid of the table stuff, but I only have so little time... --JanneJalkanen

Will do... --JoshKropf


Have you looked at the SlideShowPlugin? -- ScottHurlbert


Useful plugin.

If you move it to another package (for example, com.ecyrd.imageplus.plugin), in can be added to existing JSPWiki (2.4) installation without re-assemling JSPWiki.jar

--LLIAMAH, 30-Jan-2007


Note about imageplusplugin_(fright|fleft) style: some CSS parsers (org.w3c.flute.parser.Parser or apache batik) consider underscore as error symbol. So i cannot edit style using JustStyle editor.

--LLIAMAH, 02-Feb-2007

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
gz
imageplus-0.1.tar.gz 12.2 kB 1 09-Jun-2006 21:21 70.31.219.83
zip
imageplusplugin-bin.zip 431.7 kB 1 30-May-2006 07:00 70.31.219.83
patch
jspwiki-2.3.72-imageplus-0.1.p... 22.4 kB 1 09-Jun-2006 21:21 70.31.219.83
« This page (revision-32) was last changed on 02-Feb-2007 17:52 by LLIAMAH