Stacks4Stacks

The emphasis of this stack is very-much on quick setup, and instant, professional results. You can use images dragged and dropped locally into Stacks / RapidWeaver or warehoused images stored in an online location. HighLight stacks scale responsively to the size of the area they are nested within. The link function allows you to set HighLight stacks as anchor links, links to other pages in your website, links to external websites, links to resources or the creation of other links like lightbox links, email or Skype etc.


Unlike competing stacks, the caption region in HighLight can support many different types of stacks and content. Support includes styled text, HTML code, Markdown, images, floats and columns. If you don't set the entire stack as a link, you can highlight individual segments of text (within your captions) to set as a links. Both the text colour and caption fill can be customised; with support for opacity. Further modifications can be applied with custom CSS code.

If you want a stack where the captions only display on mouseover or click, please condor using the ImageCaption or ImageKiosk stacks.

Examples

Here are some working examples of the HighLight stack, nested within an AdaptiveGrid stack. Each HighLight stack has been set as a link.
 

 

Customisable options

HighLight stack supports the following customisable options, making this stack very versitile:

• Options to place HighLight within the normal page flow, an ExtraContent container or a FreeStyle banner
• Toggle between using a local or warehoused image
• Apply rounded corners (border radius)
• Position your caption at either the top or bottom of the image frame
• Set a breakpoint to simplify the layout on smaller screen widths
• Change the font size of the captions independently of your theme font size (useful if you want to make captions more prominent)
• Adjust the line height (line spacing) of caption content
• Apply padding around the edge of the caption. Padding is specified in percentage units of measurement, so it scale proportionately
• Control the caption text colour and background fill (including opacity)
• Set the entire HighLight stack as a link to a RapidWeaver resource, another page in your website or an external website

Setup

To setup a single HighLight stack in your website, please read and follow these instructions carefully:

1. Once installed into RapidWeaver, open your stacks library and drag-and-drop a copy of HighLight into your stacks page
2. In the HighLight stack settings, change the Placement of the stack if necessary. By default HighLight will go within the normal page flow, but alternatively you can instantly embed it into any theme ExtraContent container or a theme FreeStyle banner.
3. Choose the source of the image you want to use. More details about this can be found below. Drag and drop a suitable image into HighLight stack or link to a warehoused image
4. Drag and drop a stack into the placeholder marked 'drag stacks here'. This is the stack that contains your caption content, and can be a Styled Text, HTML Code, Markdown or other basic stack type
5. Customise any of the caption positioning, colour or style settings accordingly. The caption text and fill options support opacity too
6. If you want to set your entire HighLight stack as a link, enable the Set As A Link option and create a new link. Alternatively you can disable this option and create links within your caption content instead
7. Preview the page to see what your HighLight stack looks like. Export or publish when done.

HighLight is compatible with all ThemeFlood RapidWeaver themes. Compatibility with other themes may vary. HighLight is tested and confirmed to work with IE9+ and the latest versions of Edge, Safari, Opera, Chrome and Firefox.

Using multiple instances of HighLight on the same webpage

You can safely use an unlimited number of HighLight stacks on the same webpage. To create a collage of multiple HighLight stacks, you'll need to use a column or grid stack. Our free AdaptiveGrid stack is absolutely perfect for this task. You can easily duplicate HighLight stacks and replace the images or links for each instance.

Setting a breakpoint for the caption

HighLight is a responsive stack and therefore scales to fit different screen sizes. Ultimately there may come a point when the image is too small to fit all of your caption content within. This would be an appropriate use of the Breakpoint setting. The purpose of the breakpoint setting is to tell a web browser (which has a screen or window narrower than the specified breakpoint) to render the caption content below the image, with an 'auto' height. This would ensure the caption content is always visible and will not become cropped. Please make use of the previewing options in RapidWeaver to see how your page will look and behave at different screen sizes.

Local images or warehoused images

There are two image sources supported in HighLight. Local image implies an image which is dragged and dropped locally into RapidWeaver, and which then gets published with your website. A warehoused image is an image that is already stored online, which you can link to and embed into HighLight. Warehoused images have a couple of advantages over local images, including the ease of being able to manage them online and the reduced weight they place on your RapidWeaver project file. We would tend to recommend the use of warehoused images, whenever possible.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.