There are a variety of ways to do create an image gallery that uses views, generates a grid, and has a simple overlay with a caption when you click on an image. But if you're wanting to have more control over the caption (other than limited to 120 characters using colorbox) or a title (standard Lightbox2), you'll have to make some changes. But lucky for you a lot of these can be done through a few simple views configurations.
For our example here let's say you want to generate a page that is a grid of images, with a caption that only appears when you click on the image to appear below the image in the navigation area on an overlay like the screenshots below.
Gallery:
Overlay:
You won't be able to use colorbox because it limits the number of characters(120) in the caption area so we'll use Lightbox2 instead. Out of the box, Lightbox2 will attach either an alt or title tag as a caption. For our example, we want to attach the body of the image node and place it in the caption area. To do this we'll first generate the view. Here we'll create a new view of fields using a page as the display. In our new view we will filter it by content types (image).
We're going to call in the Title, and Body fields above our image field which will handle all of the output for our view. We do this so that we are able to use their tokens in the replacement patterns for the field we want to modify, in this case the "Image" field.
- Global: Custom Text - Here I've also generated a custom global text of "field_image" which is done in order to group the images together on the page into a gallery. This is done primarily to escape the output that would otherwise be generated if you were to place the [field_image] field in the custom output (this would generate the entire field, instead of just a grouping based off of the image field name).
- Body - To use in our caption
- (image from field_image) - This is a relationship so that we are able to call in the image in our custom output
![]()
Now we're ready to modify the Image field.
Here you'll select what formatter to use, choose one of the lightbox options. The options are named Lightbox2: Lightbox [size]->[overlay_size] with those sizes being defined as image styles.
Now we'll want to rewrite the results to mimic the lightbox default and how it handles the output with our replacement patterns.
<a href="/path/to/filename" rel="lightbox[grouping][Caption]"> <img src="path/to/thumbnail/filename"> </a>
To do so we'll have to escape the [] characters that we call in in order to use the replacement patterns in views to generate our custom output.
<a href="/path/to/[filename]" rel="lightbox[[nothing]][[body]]"><img src="/path/to/file/styles/imagestyle/[filename]" ></a>
We use [ for [ and ] for ] as escape characters for our grouping (field_image) as well as including the [nothing] token which will output as our grouping. We do this because if we were just to use [field_image] without escape characters, or without using a custom token, the output would generate another instance of the image.
For our body I have both the escape characters as well as the [body] token so that the body itself is placed into the caption area. We use an anchor tag to our image's file, which we use the [filename] token which comes from our (image from image_field) relationship and in the image tag we link to where our thumbnails are generated based off of the image style.
To generate the grid for the gallery you'll have to add some custom view styles to the CSS in your theme.
Save the view and Lightbox2 will handle the rest of the output.