@bytesnz

Jack Farley, Web Application Engineer

Photo Layout

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 renamed to the Layout Album in Gallery Hierarchy.

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.

Using the Gallery Hierarchy selector, you can select the photos used in the layout

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.

The photo layout allows you to arrange the images as you want by clicking/tapping and dragging

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.

You can toggle between using the image's ratio for sizing or fluid sizing

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.

1
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.