Bentobox: Demo

Buy it now!Bentobox is a WordPress gallery plugin that lets designers create mathematically precise, responsive tiled galleries. It employs a unique algorithm that will optimally fit any number of images into a box of any given height or width, giving each image an approximately equal area, irrespective of whether it is landscape, portrait or square, and deciding automatically on the perfect number and width of columns to fit the images into the space. You can use Bentobox to create a portfolio, with each image linking out to another page, or simply as a decorative photo gallery.

Quite a mouthful? Maybe it’s easier to demonstrate…

Here is a full-width, fixed-height Bentobox gallery, optimally arranging 13 photos of varying aspect ratios into the allotted space:

What follows is a demo of the plugin’s capabilities. For help using the plugin see the Getting Started page and the Advanced User Guide.

Bentobox is available to purchase on CodeCanyon and carries a GPLv2 licence.

Examples

Bentobox uses a simple shortcode to transform your images into a perfectly sized gallery. It can either use the images attached to your page or post or can be fed a selection of custom images. Used within your theme templates, it can produce an image grid at the top or perhaps in the background of every page of a given type.

Full height, full width

This might be the most striking use of Bentobox, a gallery fitted to the boundaries of the browser window:

By default, the images can be clicked to display the full-sized version in a lightbox. This can be turned off easily using the shortcode.

Custom height, standard width

Here’s a Bentobox with a height of 250 pixels:

And here’s one with a height of 500 pixels, showing how the same images are slotted into that space.

Gaps between the images

You can add a gap or margin around the images using the plugin’s gap parameter.

More styling options

You can add any other CSS you like to the gallery using the plugin’s style parameter. Here I’ve added a background colour, border and side margins. You can also set the width, add shadow, use transform effects or any of the tools CSS puts at your disposal.

You can also apply CSS classes to the galleries using the shortcode, giving you total control over the results in your designs.


Photos on this page are from FlickR, used under CC licenses.