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.
ExamplesHere are some basic examples of the ImageCaption stack in action:
Basic setupThis 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.
Top captionThis example is similar to the first example, except here we have set the caption container to display at the top.
Coloured captionIn 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.
Warehoused imageIn 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.
Permanent captionIn 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.
Repositioned captionSimilar 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 StacksIn 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.
- 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.
- 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.
- 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.
Sourcing imagesThis 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 supportWhen 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 responsiveAs 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.