Using the Ilmage Browser PlugIn

WordPress allows you to install third-party plug-ins as add-ons to the software. These plug-ins can be created by anyone with an interest in changing the way WordPress works, adding extra functionality to WordPress, or even taking away functionality.

Many, many plug-ins are available for WordPress—more than 400 at the time of writing. A few good places to look for WordPress plug-ins are The WordPress Plugin DB (http://, the Plugin Directory (, and the plug-ins list on the WordPress Codex (

The particular plug-in I'm going to introduce to you here is called IImage Browser, created by Martin chlupác. You can get it from his web site at index.php/iimage-browser. This plug-in is an enhancement of the Image Browser plug-in for WordPress 1.2, created by Florian Jung (which you can find at code/wordpress-plugins/).

Installing and Activating the Plug-In

You need to download the latest stable version of the plug-in (1.4.2 at the time of writing) from Download the zip file to your computer and unzip the files. Using your FTP program, upload the iimage-browser-plugin.php file to your wp-content/plugins folder and the iimage-browser.php file to your wp-admin folder. You don't need to upload the third file, insert_image_placement.txt.

To activate the plug-in, go to the Plugins Management page of your blog. You will see the new plug-in listed, along with any other plug-ins you have installed. (If you do not see the new plug-in listed, make sure that you uploaded the files to the correct places.) Click the Activate link on the right side of the plug-in description. WordPress will highlight the line to indicate that it is activated, as shown in Figure 15-8.

Figure 15-8. Activating the IImage Browser plug-in

Using the Plug-In

If you now click Write to create a new post, you will see a new link labeled Insert Image in the top-right corner of the Write Post page, as shown in Figure 15-9.

Building Online Communities

Dashboard Write Manage Links Presentation Phigins Users Options Logout (Administrator) Write Fast |

Write Post




Figure 15-9. The Insert Image link appears at the top-right corner of the page.

Clicking the Insert Image link pops up a new window that displays all the images in your configured image folder. (You can instruct WordPress to use any particular folder by configuring this on the Miscellaneous tab of the Options page.) The images are paged 30 at a time. If you have more than 30 images in your image folder, the plug-in will display the first 30 in the opening page and a link (at the bottom of the window) to second and subsequent pages of images. Clicking one of the images displays a set of controls for that image, as shown in Figure 15-10.

Figure 15-10. Insert Image controls

You can specify how the image should be included; as an in-line image, as a link to the image file, or with some custom code. The custom code option requires you to edit the plug-in file itself. To add the image, select the Include as image button, type a description in the Description box, and click the Get the code button at the bottom of the form. Finally, click the Add it to the post! button. The plug-in creates the HTML link and inserts it into the post for you, as shown in Figure 15-11. The plug-in window stays open, so you can select another image to insert. When you have finished inserting images, close the window.

The plug-in allows you to directly upload images, too. You can create folders and navigate to them when selecting images. This makes it much easier to organize your images. If your version of PHP supports it, the plug-in can also create thumbnails of your images as you upload them. It prefixes the full-size image name with an underscore (_) to recognize them. If a thumbnail is detected, you get an option to create a link to the full-size image with the thumbnail as the link. Additionally, the plug-in allows you to delete images.

You can see why the IImage Browser plug-in is a great enhancement to the default WordPress behavior and is highly recommended.

Figure 15-11. Image code inserted into a post

Tip An IImage Browser version in beta replaces the link in the corner with a button under the quicktag buttons. Check the site to see when that version will be ready for release.

Was this article helpful?

0 0

Post a comment