Flip Grid

Flip Grid theme for WeaverPix


Flip Grid generates an ‘iTunes-style’ adaptive grid of thumbnail images. Below each image is shown a title (formed using the image title) and a tagline (formed using the image ALT attribute). Clicking on a thumbnail image flips it around using CSS3 animations. On the reverse side of the image is the image caption content. Clicking a second time flips the image back round into view again. Flip Grid is great for displaying small photographs, screenshots, video stills and album artwork.

Images detected as having links applied with have a small ‘read more’ link automatically placed below the caption content. You can customize the text and color of this link. Theme options are also included, letting you customize the thumbnail sizing, spacing, borders, text colors and caption styles. Potentially you could write your own CSS code to customize other aspects of Flip Grid.

This WeaverPix theme has been tested and confirmed to work with IE7, IE8, IE9, IE10, Firefox, Chrome, Opera and Safari web browsers. Please note that because old web browsers lack support for CSS3 animations, you should expect to find these special effects degrade gracefully in older web browsers.

Key features

  • Grid supports settings for thumbnail width, thumbnail height, thumbnail margin, grid alignment and thumbnail sizing. This theme is easy to setup.
  • This theme is able to take links supplied to images and apply them to the thumbnail images. This allows you to build a useful grid of linked thumbnail images. Images can link to other pages, site resources or external webpages.
  • You can write and apply your own custom CSS code to adjust many aspects of styling like padding, margins, backgrounds and borders. Refer to the W3Schools website if you need help with CSS.
  • Grid intelligently resizes images to exactly the required sized. This makes images load faster and reduces bandwidth. By avoiding image scaling and applying width / height attributes on image tags, pages using the Grid theme can score higher speed test results.
  • The grid columns collapse automatically as the screen is made narrower. Image sizing is preserved, so that you don’t end up with impossibly small images on smaller screens. Equally the Grid theme works perfectly in non-responsive setups.
  • Grid has been engineered to provide a really strong thumbnail grid layout. It will resist breakage in older web browsers and works reliably with most RapidWeaver themes. It can be safely @imported into other RapidWeaver page styles using PlusKit.
  • You can easily adjust the method in which thumbnail images are scaled to fit within each thumbnail container. Useful if you are dumping-in an assortment of images of different sizes, and you are working towards getting consistent results.
  • Grid supports header and footer content, placed above and below the thumbnail grid. Content can comprise of styled text or HTML code. You can provide this content to enrich the page and provide an end user with more information about the image colelction.


Grid generates thumbnail images to the exact size you specify in the theme settings. This does-away with any wastage associated with scaling images down to fit. Grid generates thumbnail images to the exact size you specify in the theme settings. This does-away with any wastage associated with scaling images down to fit. As the name suggests, the Grid theme creates a simple grid of thumbnail images within a page. Optionally links can be applied on each image.As the name suggests, the Grid theme creates a simple grid of thumbnail images within a page. Optionally links can be applied on each image.


These are the essential minimal requirements for installing and using this WeaverPix theme:

  • A RapidWeaver theme with an HTML5 Doctype
  • RapidWeaver 5.3 or later
  • WeaverPix 3.1 or later

It is recommended that you have automatic updates enabled in WeaverPix and that you install the free plugin updates as they become available.


Add a new WeaverPix page to your project on RapidWeaver (if it does not already have a WeaverPix page). Click into edit mode. Click on the weaverPix Themes button in the lower toolbar. On the new window that opens, click on the dark Manage Themes button.

In the theme manager window, click on the blue Install theme button at the top right. Choose the theme to install in Finder. Once added, the theme will be listed in the table.

Note that in the theme manager window, you can also use the provided buttons to get information about themes and delete themes you are not using any more. More information about installing and managing WeaverPix themes can be found on the support website.

Using your new theme

Once installed, simply select your theme for use in the WeaverPix themes window. Click on the activate button to enable it and apply it to your project. Follow all the normal instructions for adding images to your WeaverPix page, setting up a warehouse, providing image data or content, plus many other common tasks.


There are many support resources available to help you use your new WeaverPix theme and get the best results from it. Alongside using the help buttons in WeaverPix, here are some other resources:

1) When you open the Themes window in WeaverPix, click on the About, Features and Credits tabs, to access more information exclusive to your WeaverPix theme. This information sometimes includes links to external websites and important instructions.

2) Theme options are all ‘tool-tipped’ and include a written description underneath each setting, explaining what it does.

3) Search the WeaverPix Knowledgebase. There are now over 20 articles covering various topics releating to WeaverPix.

4) Get in contact via the Javabean Software website. To ensure a timely response to your questions, remember to include the name of the theme being used, the version number of the theme, the version number of WeaverPix you are using, a full written description of the issue and the link to your test page. If no test site is available, then provide a link to your RapidWeaver sandwich file instead and stipulate what page your querry releates to.

  • 1 Users Found This Useful
Was this answer helpful?

Related Articles


Camera theme for WeaverPix Introduction You will struggle to find a slideshow addon for...

FlexSlider Pro

Flexslider Pro theme for WeaverPix Introduction FlexSlider is powered using the popular...

Quotes Rotator

Quotes Rotator theme for WeaverPix Introduction This is a simple automatic quotes rotator with...

Responsive Slides

Responsive Slides theme for WeaverPix Introduction Responsive Slides is based on the popular...

Thumbnail Pile

Thumbnail Pile theme for WeaverPix Introduction What the Thumbnail Pile theme does is to take a...