The ImageCaption stack can be used multiple times on the same page, to construct a complete collage of images. It works with all major web browsers, including IE7, IE8, IE9, IE10, IE11, Safari, Firefox, Opera and Chrome. It comprises of one single stack that is easily dragged and dropped into a page - all of the available customisable options are displayed in the settings panel on the right.

Examples

Here are some basic examples of the ImageCaption stack in action:
Example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nulla id nisi laoreet id mattis ante bibendum. Aliquam eget dui id urna bibendum dapibus. Suspendisse potenti.

Pellentesque tempor tristique dui. Maecenas arcu tellus, varius at dictum at, adipiscing sed ante. Donec nec sapien justo, volutpat eleifend purus. Aenean quis leo id erat feugiat lobortis. Fusce sed nisi tellus, laoreet ultricies felis. Nam eget lorem erat.

Basic setup

This example uses an ImageCaption stack with the default settings applied. In this instance, an image stored on DropBox was applied, using the Image Warehouse option.
Example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nulla id nisi laoreet id mattis ante bibendum. Aliquam eget dui id urna bibendum dapibus. Suspendisse potenti. Pellentesque tempor tristique dui. Maecenas arcu tellus, varius at dictum at, adipiscing sed ante. Donec nec sapien justo, volutpat eleifend purus. Aenean quis leo id erat feugiat lobortis. Fusce sed nisi tellus, laoreet ultricies felis. Nam eget lorem erat.

Top caption

This example is similar to the first example, except here we have set the caption container to display at the top.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Coloured caption

In this example, the caption background setting was changed to a horizontal gradient and rounded corners were applied. This makes the ImageCaption stack useful for very bright and colourful rollover effects (should the need arise).

A fixed height is applied to the ImageCaption stack in this instance, as no image tag is used. We have to tell a web browser instead what size to render our empty block to. This does mean that this example is not fully responsive.
The America’s Cup is a trophy awarded to the winner of the America's Cup match races between two yachts. One yacht, known as the defender, represents the yacht club that currently holds the America's Cup and the second yacht, known as the challenger, represents the yacht club that is challenging for the cup. The America's Cup is the oldest active trophy in international sport.

The trophy was originally awarded in 1851 by the Royal Yacht Squadron for a race around the Isle of Wight, which was won by the schooner America. The trophy was renamed the America's Cup after the boat and was donated to the New York Yacht Club (NYYC) under the terms of the Deed of Gift, which made the cup available for perpetual international competition.
-Wikipedia

Warehoused image

In this example, the warehoused background image option was used. This setting can be used to pull in images which have already been published online, and set them as a CSS background. Options exist to control the position and repetition of CSS image backgrounds.

The caption container was set to 40% wide, 500px tall (the same as the image height) and configured to display on the lefthand side. Independent rounded corner controls on the caption container let you define which corners have rounded corners applied.

A fixed height is applied to the ImageCaption stack in this instance, as no image tag is used. We have to tell a web browser instead what size to render our empty block to.
Example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nulla id nisi laoreet id mattis ante bibendum. Aliquam eget dui id urna bibendum dapibus.

Permanent caption

In this example, the permanent caption option was selected. This turns off the fade animation, to ensure the caption is always displayed.

The caption width was set to 40%, and its position changed to top right. 10px rounded corners were applied on the background, and 10px rounded corners applied on the top right and bottom left of the caption container. The caption height was set to auto.
Example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nulla id nisi laoreet id mattis ante bibendum. Aliquam eget dui id urna bibendum dapibus. Suspendisse potenti. Pellentesque tempor tristique dui.

Repositioned caption

Similar to the demo above, but this time the option to permanently display the caption was left unchecked, so the normal fade animation effect returns.

The caption width was set to 40%, and its position changed to top left. 10px rounded corners were applied on the background, and 10px rounded corners applied on the top left and bottom right of the caption container. The caption height was set to auto.

Grid Of ImageCaption Stacks

In this example, 2-column and 3-column stacks were used, to create this attractive montage effect of ImageCaption stacks. Obviously the ImageCaption stack has many more customisable options, compared to the free Deli stack. Each of the ImageCaption stacks can be set as a link to a page, site resource or URL.
 
America's Cup, Plymouth
September 2011
Summer Fruits
August 2009
Wiltshire Ramble
April 2011
Riot Of Colour
May 2010
Mid Winter Sunlight
January 2011
Black & White
April 2008
Plants
April 2011
Somerset Waterways
June 2009


Setup

  1. After installation, drag and drop an ImageCaption stack into your page. Drag and drop an image stack into the static content region. Then drag and drop a text into the caption content region.
  2. Settings for this stack get shown on the right, in the settings panel (when the stack is selected). Background, border and layout settings get applied to the outer wrapper. ImageCaption settings are applied to the ImageCaption stack itself, and comprise of options like height, animation effects, and styles. Hovering over settings with your mouse displays informational tooltips about each setting.
  3. If you want to set the ImageCaption stack as a link, tick the link option in the settings panel. Then click the Set Link button to create a link to another page, URL or site resource. Other attributes can be applied to the link as well.
Note Options for rounded corners on the ImageCaption stack only work when you are using one of the ImageCaption background settings. Inline content added to the stack (like images) will not have rounded corners applied. CSS rounded corners are only supported in modern web browsers like Safari, Firefox, Opera, Chrome, IE9, and IE10. In older browsers like IE7 and IE8, the rounded corners safely and subtly degrade back to squared corners.


Sourcing images

This latest version of the ImageCaption stack introduces several new methods of sourcing images and backgrounds, for use in the stack. Traditionally any image dragged and dropped into the static content region could be used. However the difficulty with this is that RapidWeaver and Stacks sometimes applied rather destructive modifications to the images (for example, converting images to PNG) and there is a risk that if the image gets move on your computer or the sandwich file is transferred to another computer, the image path breaks. ImageCaption 2.0 introduces a new array of background settings, with options to apply a solid colour fill, gradients, use a local image or use an image which is already stored online (this is the warehouse option). When you use any of these settings, the background gets applied as a CSS background, so instantly options for CSS rounded corners become available to you. Not to mention, the original image is preserved with no conversion or other modifications applied.


Print support

When ImageCaption stacks are printed or saved as a PDF, the caption content will be permanently displayed over the images. Height, width and placement settings applied to captions will be respected by most web browsers.


ImageCaption goes responsive

As of version 2.3.0, the ImageCaption stack now supports responsive behaviour. This basically means that if the ImageCaption height is set to Responsive in the ImageCaption settings, any HTML image tags you enter in the static content region or images you drag and drop in will scale fluidly to the size of the ImageCaption area. Some of the large examples shown above (like the rainforest picture) are responsive. This is especially useful if the RapidWeaver theme you're using already supports responsive theme widths. As the browser window is scaled up or down in size, so too will the image inside the ImageCaption stack. Typically this is the HTML code you would place in the static content region:

<img src='http://www.example.com/path/to/image.jpg' alt='My image' />

Important Responsive behaviour only works on images which you are pulling in using a standard HTML image tag, as shown above. Responsive behaviour has no effect on images which are dragged into a page (Stacks applies fixed dimensions on these) or images applied as CSS backgrounds. If you wish to keep images at a fixed size, use the Fixed Height setting instead and specify a height in pixels, as before.