Magazine Layouts

As recently featured on A List Apart, Magazine layouts is a new technique for arranging images on a webpage. While the output of magazine layouts is simple and obvious, it's actually quite a difficult task to get right.

Magazine layouts allows you to arrange images in an attractive fashion, automatically. It's especially useful with between 2 and 6 images.

Examples and explanations are below - you can download the script from A List Apart, or from here.

Example - 3 images



This technique is achieved using PHP - The only information that is required is the overall width of your content area (in this case 520px) and the filename of each image. All image sizes and positioning is done automatically by the PHP script.

Example - 4 images



This technique caters for between 2 and 8 images - perfect for user uploaded images in forums, CMS sites, product databases, or just for page content. A good extension for this might be a Wordpress plugin, or an interface to Flikr images.

Requirements


This is a PHP script - the code is well documented with example code and images included.
Your web server needs PHP installed, and also requires the GD 2.x extension enabled - most shared web hosts support this, but I can also recommend Dreamhost as a good PHP web host.
As mentioned in the documentation, a basic image resizer script is included, but I would recommend a more sophisticated script that caches output (which will make a big difference to performance). This may be included in a future release.



Thanks & Credits


Thanks to Alex Burkhardt who kindly supplied these images of the Hokianga Harbour, Northland New Zealand. My photography skills are still "under construction" so I'll stick with what I'm good at for now.
The version of "Magazine Layouts" on this site uses Lightbox JS to achieve the pop-up effect on the images. This isn't included with the downloadable version, but is easy to add, and I think quite a nice enhancement.



Download


Magazine Layouts is free to download and use for any purpose, commercial or otherwise under the LGPL License. Feel free to modify and improve the script, but I would appreciate a copy of any modifications so that I can include your changes in future releases.

Download Magazine Layout Script (Zip, 1.3Mb)

Textpattern Plugin


Walker Hamilton has created a Textpattern plugin based on this script - more details at Textpattern forums

ASP Version


Thanks to Eugenio Zaffagnini an ASP (classic) version of the script is available, with some minor modifications made.
Download

Comments & Suggestions


I'm open to all comments and suggestions - contact details here

Digg this