We wanted a way to be able to create fancy layouts of our images for our blog, so I created the arranger, which I later added to Gallery Hierarchy as the the Layout Album.

A photo layout can be easily created in the visual post/page editor in Wordpress. Going into the Gallery Hierarchy tab in the Add Media window, a user can select the images they want to include in the layout and then in the shortcode options, they can change the shortcode type to Album and the album type to Layout and click insert.

Once inserted a grey box containing the selected images will be inserted into the layout. Once there a user can drag the photos round (with a mouse or a finger) and resize them. The images can be snapped to each other by placing the edges of the image being moved/resized close to the sides of other images. The snapping is indicated by green highlighting on the sides of the images that will be snapped together.

A user can also whether they want to be able to resize an image using the images fixed ratio, or a non-fixed ratio where the image will be scaled to cover the box made. In future versions, the user will also be able to scale and move the image in this non-fixed ratio setting.

Once the arrangement is complete, the arrangement will be stored as relative percentages from the top-left-most point on the arrangement that can easily be replicated and scaled on the post/page when viewed.

layout="%131:33.52,22.19:34.07,52.76|124:32.87,74.95:0.00,0.00|125:65.93,25.87:34.07,0.00|128:32.97,24.77:34.07,27.07|126:31.68,47.88:68.32,27.07"

The actual arranger itself is a TinyMCE plugin that gets included when the Gallery Hierarchy plugin is active. To draw the arrangement on the post/page, a small javascript file is included to draw the initial layout and handle a redraw of the layout if the size of the window is changed.

A working demo is available on Github pages.