ImageCaption Pictures are worth a thousand words. Even more with a caption.
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, 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
Around 40% to 75% of all biotic species are indigenous to the rainforests. It has been estimated that there may be many millions of species of plants, insects and microorganisms still undiscovered in tropical rainforests. Tropical rainforests have been called the "jewels of the Earth" and the "world's largest pharmacy", because over one quarter of natural medicines have been discovered there. Rainforests are also responsible for 28% of the world's oxygen turnover, sometimes misnamed oxygen production, processing it through photosynthesis from carbon dioxide and consuming it through respiration.
-Wikipedia
-Wikipedia
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.
Castle Combe is a small village in Wiltshire, England, with a population of about 350. It is renowned for its attractiveness and tranquillity, and for fine buildings including the medieval church. The 14th century market cross, erected when the privilege to hold a weekly market in Castle Combe was granted, is situated where the three principal streets converge.
The village was used as a location for the film musical Doctor Dolittle. Raymond Austin, director/writer, set the action of his book, Find Me A Spy, Catch me a Traitor in the village. Other productions include "The Murder of Roger Ackroyd", Agatha Christie's Poirot, and the films Stardust, The Wolfman and Steven Spielberg's production of War Horse.
-Wikipedia
The village was used as a location for the film musical Doctor Dolittle. Raymond Austin, director/writer, set the action of his book, Find Me A Spy, Catch me a Traitor in the village. Other productions include "The Murder of Roger Ackroyd", Agatha Christie's Poirot, and the films Stardust, The Wolfman and Steven Spielberg's production of War Horse.
-Wikipedia
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.
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
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.
Cumulus clouds are a type of cloud with noticeable vertical development and clearly defined edges. Cumulus means "heap" or "pile" in Latin. They are often described as "puffy" or "cotton-like" in appearance. Cumulus clouds may appear alone, in lines, or in clusters. Cumulus clouds are often precursors of other types of clouds, such as cumulonimbus, when influenced by weather factors such as instability, moisture, and temperature gradient.
- Wikipedia
- Wikipedia
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.
Autumn is one of the four temperate seasons. Autumn marks the transition from summer into winter usually in September (Northern Hemisphere) or March (Southern Hemisphere) when the arrival of night becomes noticeably earlier.
- Wikipedia
- Wikipedia
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. This is similar to what was setup using the Deli stack, but here the captions are animated on rollover. 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.Setup
- 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 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.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.