Generate unlimited boxes with multiple layouts and optional lightbox, solely from a Wordpress media gallery.

Nick Haskins

<p>Space Boxes (not Space Balls) was designed to make building content & media grids quick and painless. Each Space Box set is created solely with a WordPress gallery inserted into a custom post type. When you insert the shortcode <code>[spaceboxes id=XX”]</code> , it will display the title, and caption for each image, if they are provided.</p>
<p>Have 7 images in your gallery? Then you’ll have 7 boxes. Want a lightbox? No problem. Control over the grid? Check! There’s even a portfolio mode to show off images or product screenshots. You can also use the gallery to drag and drop your boxes in the order that you want them displayed. Woop! Hit the demo link below to see it in action.</p>
<ul>
<li><a href="http://space-boxes.nickhaskins.co/" rel="nofollow ugc">http://space-boxes.nickhaskins.co/</a></li>
</ul>
<h4>Custom Post Type</h4>
<p>Create multiple Space Box sets and manage them ease. Space Boxes even provides the shortcode for you with the post ID included for easy copy pasta.</p>
<h4>Design Control</h4>
<p>You’ve got full control over the colors, and design of Space Boxes. There’s also shortcode attributes to control the size, and crop of the images.</p>
<h4>Multiple Options</h4>
<p>Space Boxes is packed full of options in the shortcode which allows it to be super versatile in it’s use.</p>
<h4>How to use the shortcode</h4>
<p>To display a Space Box set, use the following shortcode anywhere. The Space Boxes tab, will always show the available shortcode with the ID of the Space Box included for convenience.</p>
<pre><code>[spaceboxes id=“”]
</code></pre>
<p>id=“” – pass the ID of the Space Box set</p>
<p>columns=“” – specify how many columns of items there should be. acceptable values include numbers 1-12. default is 4</p>
<p>itemcolumns=“” – specify how many columns each item should take up, based on a 12 column grid. default is 3</p>
<p>lightbox=”on” – set this to on to open each image in a lightbox. default is off</p>
<p>size=“” – specify the size of each image. There are cropped, and non-cropped sizes. default is spacebox-small . additional attributes include spacebox-small-nocrop,spacebox-medium, & spacebox-medium-nocrop</p>
<p>layout=”pinterest” – set to pinterest to enable grid layout. default is stacked</p>
<p>pinwidth=“” – only applies if using pinterest layout. specifies the width of each item. default is 300. you can also enter a percentage like ‘50%’ . notice the single quotes, they are important when passing percentage value</p>
<p>pinspace=“” – only applies if using pinterest layout. specifies distance between pins. default is 5</p>
<h4>Space Box Archive Shortcode</h4>
<pre><code>[spaceboxes_archive]
</code></pre>
<p>There are a few attributes available for the Space Box archive shortcode.</p>
<p>category=“” – specify a Space Box category name like awesome</p>
<p>columns=“” – specify how many columns of items there should be. acceptable values include numbers 1-12. default is 4</p>
<p>itemcolumns=“” – specify how many columns each item should take up, based on a 12 column grid. default is 3</p>
<h4>Filters</h4>
<pre><code>space_boxes_output – filters the single Space Box output
space_boxes_archive_output – filters the archive output of Space Boxes
</code></pre>
<h4>Action Hooks</h4>
<pre><code>spacebox_before
spacebox_after
spacebox_inside_top
spacebox_inside_bottom

spacebox_archive_before
spacebox_archive_after
spacebox_archive_inside_top
spacebox_archive_inside_bottom
</code></pre>
<h4>Further</h4>
<ul>
<li>Nick on <a href="http://twitter.com/nphaskins" rel="nofollow ugc">Twitter</a></li>
<li>Nicks <a href="http://twitter.com/nhstoreupdates" rel="nofollow ugc">Store Updates</a> feed</li>
</ul>


Alternatives to Space Boxes

Top alternatives