Introduction

Ever wanted to have an attractive, animated, styled gallery container? A cleaner caption? How about having groups of images throughout your post in themed gallery groups? The Gallery and Caption plugin does this for you. It transparently upgrades the gallery and caption features of WordPress, and should you disable the plugin, things will return to their original behavior. Its even flash free, so iPhone users and other mobile phone users can enjoy the effect.

It includes zoom animations and controls, and an administrator panel for configuring a lot of options. Read on through this tutorial and if you have any questions or comments, feel free to post.

You can download the latest version here:
Gallery and Caption Download Page

And read the FAQ here:
Gallery and Caption FAQ.

And visit the dedicated forum here:
support Forum.

Examples

You insert images into your post as you normally would (in fact, if you empty your blog cache, your old posts will take on this behavior). Keep in mind that a captioned image is a standard image from the media gallery, but has text in the caption field.

Below is an image using the plugin. Hover your mouse over it and click:

Pretty neat, no? WIth the plugin’s admin settings page you can tailor various animation effects and other aspects.

Now let’s say we want a collection of images together in more than one place in our post. The plugin provides a lightweight shortcode to surround your captions. It has the same columns argument as the gallery shortcode, so you can specify how many pictures in a column at a time. If you don’t like shortcodes, a toolbar button has been added by the plugin to your HTML editor called ‘captiongroup’. You can simply highlight the caption images and click on the button to wrap them in the group.

Lets have a look at one. I edit the post of interest and insert one or more images. When I do so, I first fill in the image’s Caption field (you can edit this field when you upload an image or anytime by accessing the post gallery). When done inserting, I then surround the inserted code with:

[captiongroup columns="2"]
(images here)
[/captiongroup]

(or use the toolbar button ‘captiongroup’). The columns argument in the shortcode above is optional and just tells GAC how many images you want across. Here is the example live:

Caravan on the sands	Desert silhouette
Balloons	Ride the Nile in Style

You can have as many of these “mini gallery” caption groups as you want in your post, which helps accent discussions on certain images. They make a post very attractive and easy to follow as opposed to one large gallery at the end.

For example, here is a second smaller caption group with just one image:

Ride the Nile in Style

The Gallery

And finally, there is the unmodified gallery that uses this site’s native gallery theme (the plugin does not currently style the gallery). To insert a gallery into your post, just type this where you want it:

[gallery]

At the end of this article I stuck that very text. You should see there all of the images of this post all laid out like a roll of film.

Admin Panel

On your WordPress backend, under settings you will find the plugin settings link ‘Gallery and Caption’. This takes you to the backend configuration options for the plugin.

Caption Group Defaults

These fields allow you to assign your own default choices to the shortcode. If you manually specify a shortcode argument you override these defaults. For more details on the shortcode, see the usage section below.

Zoom Preferences

Here, you can configure the special effects such as shadows, borders, etc. You can also tailor whether an image zooms to the center of the user’s browser or zooms in-place. Experiment and find the option you like the best.

Ok.. just one more image 🙂 Note that the panel is outdated as more options and features are available over time.

WordPress Image and Gallery Tutorials

Here are some tutorials to help first-timers learn how to add images to a post.

Techulous provides a How To using GAC and WordPress:
http://www.techulous.com/internet/how-to-adding-images-and-galleries-to-a-wordpress-post.html

Adding Images (note the caption field… this is what triggers this plugin):
http://en.support.wordpress.com/images

Inserting and customizing the entire post gallery:
http://en.support.wordpress.com/images/gallery

And difference between “visual” and “html” editors:
http://en.support.wordpress.com/editors

The visual editor can be very unreliable or confusing when you want control over images and placement. Learn to love the HTML editor! It becomes much clearer as to what is going on. Switching back and forth can result in loss of formatting.

Gallery and Caption in the Wild

Want to see it on a production website? This article shows several dyerware plugins (easy spoiler, easy review, gallery and caption). It also uses a different animation transition effect (glass fade):

http://www.techulous.com/reviews/review-bioshock-2-part-1.html

Usage

Now that we have seen it in action have some idea as to what you want to build with it, lets go over each parameter in detail. Anywhere (and even more than once) within a page or post you may enter the following to start a group:

[captiongroup (your parameters go here)]

(don’t forget the [/captiongroup] at the end of your captions!)

It is very important that all of your parameters appear on one line and are all lower case. The plugin has had an addition made to detect malformed arguments and abort processing. This helps you recognize a formatting problem. If you experience this, you will see the following text along with some help information on your post or page: “Gallery and Caption SHORTCODE ERROR”.

It is recommended that you enter these shortcodes in the raw HTML editor and not in a WYSIWIG one. This also avoids the unintentional insertion of HTML code that would otherwise malform your parameters and input text.

Ok, enough of that. Lets go over each captiongroup parameter:

columns (optional)
Example : “3”
Description: Number of columns for the captiongroup gallery table. You can set a default in the admin GUI, or override that setting here.

groupcss (optional)
Example : “galleryAndCaptionContainer”
Description: The CSS class for the caption group container.

And Wrapping Up…

Your thoughts are always welcome! Please post any issues or suggestions.