Bentobox: Demo

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:

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

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 will be available to purchase very soon on CodeCanyon.

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:

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

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:

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

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

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

Gaps between the images

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

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

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.

16154045043_0607a5b44f_o15843240850_c75f163e80_o15373269632_6caa2d2be2_o15350778086_2a0a8954d7_o15187122057_f520c4c5d0_o14369566811_e4e859e219_o6474335345_b2ca0eab80_o3087464732_c30d9b441c_o2619132270_931f783b23_o2430798016_ceefb07f64_o(1)2106391300_27491a47c3_o1185335101_b25ee731b2_o357240511_ab9334fdc0_o

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.