Captions are two areas of text on the thumbnails. The top part should be the title of the image and the bottom area should hold more information in smaller text. Thus, the upper is called caption title, while the other is caption description. The information to show is picked from the four WordPress image metadata fields: Title, Caption, Description and Alternate Text. All the other content sources come with different fields to juggle as well. You can display either one of these in any of the two locations. Of course one or both of them can be turned off. Their behavior is usually mouse controlled to appear with animations like fade and slide or can remain fixed.
Fixed style
Captions that stay on the thumbnails regardless of mouse or touch interaction. This is the simplest solution.
Fixed, dark background, white text, shows at the bottom, left aligned.
Fixed, light background, black text, shows at the vertical and horizontal center.
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid caption_bg_color=rgba(0,0,0,0.6) caption_opacity=1 row_height=200 height_deviation=30 caption=fixed orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_gallery=24]
[$justified_image_grid row_height=200 height_deviation=50 caption=fixed caption_opacity=1 caption_bg_color=rgba(255,255,255,0.6) caption_text_color=black v_center_captions=yes max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=728,712,702]
Fade style
On thumbnail interaction the captions fade in and out. By showing them on demand it's non-overwhelming for visitors.
Fade on mouse over, dark gradient background, white text with black shadow.
Fade on mouse over, dark blue caption with translucent whit text, centered vertically and horizontally.
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid row_height=200 height_deviation=30 caption=fade caption_text_shadow="1px 1px 0 black" gradient_caption_bg=yes overlay=off orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=732,708,740,749]
[$justified_image_grid row_height=200 height_deviation=0 caption=fade caption_opacity=0.8 caption_bg_color=#0c2e77 v_center_captions=yes overlay=off orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=750,737,745,738,746]
Slide style
Captions slide up and down from the bottom or centered vertically. They can be nicely surprising at times!
Slide in from the bottom, dark background, white text, left aligned.
Slides from the vertical center, light background, black text. Blurred caption background with special effects.
Slides to the vertical center, dark desaturated background, blue captions. Note the different animation!
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid caption_bg_color=rgba(0,0,0,0.6) caption_opacity=1 row_height=200 height_deviation=30 caption=slide orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_gallery=24]
[$justified_image_grid row_height=200 height_deviation=30 caption=slide caption_opacity=1 caption_bg_color=rgba(255,255,255,0.6) caption_text_color=black v_center_captions=yes overlay_color=white overlay_opacity=0.1 specialfx=captions specialfx_type=blur lightbox=links-off mobile_lightbox=links-off orderby=rand max_rows=1 ng_gallery=24]
[$justified_image_grid row_height=200 height_deviation=30 caption=slide caption_opacity=1 caption_bg_color=#0072ff caption_text_color=#75e7ff v_center_captions=simple overlay=hovered overlay_color=black overlay_opacity=0.5 specialfx=hovered specialfx_type=desaturate orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_gallery=24]
Mixed style
The two captions areas show up independently. Title is visible at all times, but description only slides in upon interaction.
Preset #19 uses mixed captions with an unobtrusive style. Caption background only extends behind the title caption, with a round corner.
Show only the title at first, then slide in additional information by pushing up the title. Caption background matches text width.
Title is centered and fixed as it's the one visible most of the time. Description slides down as extension.
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid preset=19 row_height=200 orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=822,798,793]
[$justified_image_grid row_height=200 height_deviation=30 caption=mixed caption_opacity=1 caption_bg_color=rgba(0,0,0,0.6) caption_match_width=yes v_center_captions=yes orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=772,806,804]
[$justified_image_grid row_height=200 height_deviation=30 caption=mixed caption_bg_color=rgba(0,0,0,0.6) caption_opacity=1 r v_center_captions=simple orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=820,816,799]
Below style
Captions are under the thumbnails and they have a fixed height across the gallery. Excess text is hidden with an ellipsis…
Preset #20 provides quick access to this style, a smooth and delicate look that doesn't cover the picture with text.
A stronger, Polaroid photo look. Increased text size. If you see … then the text didn't fit. It's necessary in order to provide a coherent look.
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid preset=20 row_height=200 height_deviation=30 caption_height=52 caption_desc_size=13px orderby=rand max_rows=1 lightbox=foobox mobile_lightbox=foobox ng_gallery=26]
[$justified_image_grid preset=c5 thumbs_spacing=25 row_height=200 height_deviation=30 caption_opacity=1 caption_bg_color=white caption_text_color=black caption_height=105 caption_title_size=17px caption_desc_size=15px caption_align=left outer_shadow="0 0 7px rgba(0,0,0,0.1)" outer_border_width=1 outer_border_color=#333 middle_border_width=15 orderby=rand max_rows=1 lightbox=foobox mobile_lightbox=foobox ng_pics=772,810,849,850,861]
Reversed styles
All animations can be reversed so the interactions sort of "clear" the image of the captions as they get pushed off.
Example is taken from the "Fade group" above, just reversed.
Same as the example from the "Slide group", but it works in the opposite way.
Similar to the first example in "Mixed group" but in reverse. Captions are tinted orange for fun.
The above examples use the following, generated shortcodes (how to use):[$justified_image_grid row_height=200 height_deviation=30 caption=reverse-fade caption_text_shadow="1px 1px 0 black" gradient_caption_bg=yes overlay=off orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=732,708,740,749]
[$justified_image_grid row_height=200 height_deviation=30 caption=reverse-slide caption_opacity=1 caption_bg_color=rgba(255,255,255,0.6) caption_text_color=black v_center_captions=yes overlay_color=white overlay_opacity=0.1 specialfx=captions specialfx_type=blur lightbox=links-off mobile_lightbox=links-off orderby=rand max_rows=1 ng_gallery=24]
[$justified_image_grid preset=19 row_height=200 caption=reverse-mixed caption_opacity=0.9 caption_bg_color=#cb653c caption_text_color=white caption_align=center orderby=rand max_rows=1 lightbox=links-off mobile_lightbox=links-off ng_pics=822,798,793]
Check out all the possibilities thumbnail captions offer
Most settings can be combined with each other. Mixed with other features such as borders and special effects you'll achieve the desired look. Justified Image Grid gives you the most flexibility so you can truly customize it however you like.
Caption data source
- WordPress media library fields (metadata) for each area.
- WordPress posts title, excerpt, taxonomy, date, time, author.
- 3rd party source's data: Facebook, Flickr, RSS.
- NextGEN gallery's data including title, description, tags.
Looks
- Text and background color with opacity.
- Gradient background or background that matches title width.
- Opacity of the caption as a whole for nice translucent text.
- Special effects applied behind the captions only.
- Text shadow, requires browser support.
- Custom CSS for Title and Description.
Animation styles and positioning
- Show both areas fixed or fading/sliding in on mouse over.
- Display the title then slide in the description on demand.
- Move the caption below the thumbnails, allowing HTML links.
- Reverse animation so mouse over clears the captions.
- Mouse independent caption behavior for mobile devices.
- Title and description size. Font is picked up from your theme!
- Horizontal text align left / center / right.
- True vertical centering that works with custom fonts.
- Same animations such as slide when centering vertically.
Visit the Adaptive colors and customization page for more customization!
How do the settings look like?
