New Polymer Element for Balanced Photo Galleries - <polymer-bg>

Balanced Gallery is a jQuery plugin that evenly distributes photos across rows or columns, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for responsive websites. On a recent project we needed a similar photo gallery for Polymer based frontend, hece we created and are open sourcing <polymer-bg> : a polymer element to evenly distribute the photos across rows or columns using balanced gallery plugin.

Demo - https://qed42.github.io/polymer-bg/

Github project -- https://github.com/qed42/polymer-bg ( Test, Use, Fork and let us know of your issues )

Using polymer-bg Element in your Project

Install this using bower

$ bower install polymer-bg --save-dev

Add the element element using html imports

<link rel="import" href="../polymer-bg.html">

Now you can use the tag, pass the images in the <img> tag and use the tag attributes to configure the settings as shown, exhaustive list of attributes below the example:

<polymer-bg bg-background="http://placekitten.com/335/283" ideal-width="300" bg-orientation="vertical">
   <img src="http://placekitten.com/335/283" />
   <img src="http://placekitten.com/325/596" />
   <img src="http://placekitten.com/580/365" />
   <img src="http://placekitten.com/282/581" />
   <img src="http://placekitten.com/503/319" />
   <img src="http://placekitten.com/549/577" />
   <img src="http://placekitten.com/355/493" />
   <img src="http://placekitten.com/500/150" />
   <img src="http://placekitten.com/360/529" />
   <img src="http://placekitten.com/589/361" />
   <img src="http://placekitten.com/452/462" />
   <img src="http://placekitten.com/550/304" />
   <img src="http://placekitten.com/352/204" />
   <img src="http://placekitten.com/400/220" />
</polymer-bg>

Available attributes

1. auto-resize - re-partition and resize the images when the window size changes
2. bg-background - the css properties of the gallery's containing element
3. ideal-height - only used for horizontal galleries, defaults to half the containing element's height
4. ideal-width - only used for vertical galleries, defaults to 1/4 of the containing element's width
5. maintain-order - keeps images in their original order, setting to 'false' can create a slightly better balance between rows
6. bg-orientation - 'horizontal' galleries are made of rows and scroll vertically; 'vertical' galleries are made of columns and scroll horizontally
7. bg-padding - Space in pixels between images