Introduction

This seemed like a good project to work on, so I took a stab at creating a feature that implements the ability to drop in an image gallery into a blog post. It does this by loading up all of the assets that you have in the blog you are posting from, and putting them into the dialog box, which allows you to select the ones you want, and then when you click "Add Gallery," it will generate a table containing all of the images that you selected, in the order that you selected them. It's based on JQuery and the JQuery UI toolkit, and it doesn't have to write anything to the database in order to do its thing; the gallery is generated by JavaScript and simply inserted into the page/entry you are working on.

There is a minor bug in the user interface for Internet Explorer users. See that red selection above in the screenshot? That's a border that goes around the selected image, and that doesn't get put on the image in IE. Nothing else seems affected.

License: MIT and GPL in keeping with the JQuery UI toolkit. I borrowed some code from one of their samples, and the applicable copyright notices are in the source code for the JavaScript.

How to use it

Click on the button that is highlighted in the screenshot to the right. That is the button which loads the Image Gallery dialog box within the entry/page editor. Give it a little while to generate thumbnails of your image assets. The first time that it loads, it will have a lot of thumbnails to generate, but subsequent loads should be a lot faster.

The image dialog should now be displayed, and show a number of thumbnails on the left hand side of the dialog. Drag and drop the images from the pallet on the left side to the one on the right side to create a new gallery. While a thumbnail is selected, you can adjust its size and position in the gallery using the controls on the right side of the dialog. You can also control the number of columns that will be created in the gallery using the controls on the right. Once you have created your gallery, just click on the "Add Gallery" button to add the gallery into your current entry or page.

If you want to search based on tags, click on the arrow next to "Search" at the top of the dialog. Enter in tags, separated by commas, and click search to get images that have been tagged with those tags. A blank search query will reset your search results back to the entire gallery. Finally, you can set up a list of default tags to be used for limiting the images that are loaded by default in the preferences for the Image Gallery plugin while in blog view.

Downloads:

• Version 1.0
• Version 1.5
• Version 1.75

Changelog:

• 1.5
  • Added basic search
• 1.75
  • Adds asset tracking
  • Adds a buffer between the table the rest of the entry.
  • Adds the ability to specify a series of "default tags" which limit the images shown when the dialog is first displayed.
  • Fixes the issue of the "columns" controls saying "rows."

Known Issues:

1. (As of 3/16/2009) This only works with the default Movable Type rich text editor.
2. (As of 3/16/2009) Performance issues with large asset libraries.
3. (As of 3/16/2009) Border issues around thumbnails in Internet Explorer.

Feedback:

Comments? Suggestions? Bugs? Post away in the comments section.

If you like this work, please consider rattling the ol' tip jar!