Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

Caption­On­Image Stack

show a caption on top of an image

Showing a caption text below or above an image is dead easy, and so is a caption next to an image. But how about a caption on top of an image? With the CaptionOnImage Stack, it’s also as simple as ABC. The many styling options (see fig. 1), and the option to make the whole combination of image and caption a link make this a very versatile stack. Use it on its own, or in a grid (with my SmartColumns2 Stacks for example) to present a portfolio (demo), image galleries, links…
an image

to the demo page

Stacks Image 91132

to the demo page

An image…

…and a caption.

The result.

Visit demo page #1 for many more examples, showing the various options of this stack.
With a little creativity, you can use the CaptionOnImage Stack with two different images, optionally with a caption text too! Demo page #2 shows some examples, and detailed instructions how to achieve this.
Demo page #3 shows an example of a portfolio page built with CaptionOnImage Stacks inside SmartColumns2 Stacks.
On demo page #4 are some examples of the use of external ‘warehoused’ images.

Just drag an image into the upper drop zone, or set the url of the image in case of a warehoused image, and drag a stack that can contain text into the lower drop zone (fig.2).
You can style the caption in the text stack, but text color, links, background color and/or borders can also be styled in the CaptionOnImage Stack. This is especially useful when you want different styling of the caption when hovering over the stack. All other styling is done in the CaptionOnImage Stack.

Need help using it on a non-stacks page? Here’s a tutorial.

When using a responsive theme, you may need to select force fluid image in the HUD to make the image full width.
When using the option caption position: center, set a background in this stack, not in the (text) stack for the caption — unless you have something special in mind.
You can set a link for the whole stack, or use links in the caption, but you cannot use both at the same time.
When using the text color, link styling, background color and/or border settings for the caption, don’t apply that styling in the stack that contains the caption text.
These settings are meant for the stacks that can contain text that came with the Stacks plugin (Text stack, Markdown stack, etc.). They are not guaranteed to work properly with every third party stack.

The image effect blur does not work in Internet Explorer (any version); grayscale and sepia do not work in Internet Explorer and Edge (any version).
Zoom image does not work in Internet Explorer 10 and worse.
With certain combinations of text color, background color and font family, the caption text may look a little blurry when using the option caption position: center. It’s not your eyes, it’s what some browsers do.

Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

CaptionOnImage Stack (edit mode)

fig. 2

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…