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.NB
- 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.
Need help using it on a non-stacks page? Here’s a tutorial
- 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).