Nick Cate’s Light Page

Nick Cates Design

Nick Cates released a new stack last week that immediately aroused interest on the RapidWeaver forums. Many questions were asked and I hope to supply some answers here.

First off —  Light Page is a stack – or rather a set of stacks – not a theme. It looks like a theme, because it does something that we’ve not seen in RapidWeaver before – it hides and shows pages. Nick’s first demo page is very slick, and is a typical example for  Light Page’s scope of application. A product catalogue.

Light Page will display a grid of thumbnails, each with a short caption. When the thumbnail is clicked, the product page opens – instantaneously – to display the product description and purchase options. If the ‘products’ are a gallery of photographs, the portfolio page could display the camera settings, location, etc.

So how does it work?

Light Page is a set of three stacks. The base stack contains the basic display settings:

Layout may be set to Grid or Freewall. Grid will set the thumbnails to identical sizes. Freewall will set the thumbnails in a Masonry style.

Ratio has six options for the page ratio – 4:4, 4:3, 3:2, etc. – the proportions that the thumbnail grid will be displayed in.

Rows allows the display of more or less thumbnails per row. The Spacing between the thumbnails is set separately.

Scale. The images can be set to fill the thumbnail container or to contained. When set to fill, the smallest side of the image will scale to fill the container – the larger side is cropped.

Captions can be set in 6 different sizes from 8px to 14px in height. The captions are cropped with an elipsis […] if wider than the image. There are four different settings for the caption box height [Spacing] the smallest size cuts off the descenders of y, g, p and q. The captions may be set to hide at certain breakpoints.

As with a lightbox, there are pager controls available for the display of the next/previous page/image and to return to the thumbnails. The controls may be set to text or icons (simple chevrons and a cross to close). As far as I can ascertain, Font Awesome icons are not available. Text links that have a Class of ip-button assigned to them are converted into buttons e.g. “Add to Cart”.

The second stack that is delivered with  Light Page is the Page stack. It has a container for your main image and a stacks well for anything else that should be placed on your ‘product page’. The HUD has a separate well for your thumbnail. There is no setting to control the size of the thumbnails — they grow or shrink according to the viewport width.

There aren’t so many settings available for the Page stack – the main content formatting depends on the stacks you use. There is, however, a setting that converts the Page stack title to H1.

There is an option to display a further stack well for a header.

The final option will set the image display to ‘Large’ within the Masonry layout.

The Page stack is responsive so that when multiple text stacks, for instance, are dropped into it, they will appear as columns on wider viewports.

The last  Light Page stack in the set is a stack which will allow you to embed Youtube or Vimeo videos within the Page Stack. Set the source and the video ID – the only settings necessary.

Once published, the whole of the  Light Page’s content is published to a single HTML page which, when opened, simply displays the thumbnails, their captions and any other stacks that have been placed outside of the Light Page stack. The product/portfolio pages are hidden until a thumbnail is clicked. Because the content loads as a whole with the HTML, it is displayed instantaneously when a thumbnail is clicked. The fact that no Java Scripts, JQuery or Ajax is involved also means that the page contents can be read as in their entirety by search engines, resulting in better SEO ratings.

Light Page is an innovative new stack which is an ideal solution for product pages and portfolios etc. Check Nick’s page for his introductory offer. Oh, and the three demo pages may be downloaded as a project.

Marten Claridge

Founder of RapidWeaver Central, Developer of WeaverThings, Author of Books, Marten's highly unique skillset has established him as a leading RapidWeaver, Web Design and Wordpress consultant with a worldwide client-list and highly dysfunctional sense of modesty.