has example layouts of the general solutions. To simplify the code for my purposes the images are simply scaled by the browser based on the height and width calculated. Alt and title attributes are supported as are links for each of the images. I’ve also reduced the methods to only two (one for an across layout and one for a block layout).
The first example is 7 across and the second is 4 on the left and 4 on the right.
Any orientation is allowed in any order. Let me know what you think.
I’ve created a Python version of the PHP class. The “project page is here”:http://freecog.net/2006/magazinelayout/ and a “test/demo here”:http://freecog.net/2006/magazinelayout/tests/test.py?width=600&padding=3&02;.jpg=1&04;.jpg=1&06;.jpg=1&09;.jpg=1&11;.jpg=1
Right now it’s pretty much just a line-by line translation, with some minor improvements. I’ll look at adding link, alt text and title options—it should be trivial to do so.
I changed the script, so that it returns width AND height for each image and also ALT parameter. By doing so I can not to enlarge images physicaly (I am using phpThumb to automaticaly change size of uploaded images) if they are too small (which saves processing power) and fill WIDTH, HEIGHT and ALT parameters in IMG tag, which I believe is more standarts compilant.
Copy & paste the code below to embed this comment.
Chase Saunders
Division is expensive, and while the math site gave you A solution to the equations, it probably wasn’t the most readable or efficient solution. Working with the equations by hand (which means I could have a bug) I came up with the following got 4 images:
Hi, I thought it was a really great and informative article. Yet, I couldn’t help but notice that on every page at least one image was a single pixel out. I’m sure that wasn’t intentional.
I think the only solution would be to make sure that every image has an even width by using:
Copy & paste the code below to embed this comment.
Ed Davison
It would be great if the order of the images could be fixed as to the order they were inserted into the array. I have a layout of one portrait and one landscape image that I have a need to be in a specific order (like before/after shots with before always on the left). The layout works but sometimes the order is reversed.
Is there a way to fix the order in a situation like this?
I love the script! I was looking for an interesting way to put some photos on my site. I’ve modified the script slightly so that it picks images at random from a directory, and I modified image.php to use caching. I like it so much I’ve put it on the “home page”:http://www.ouafc.com
I’ve found this very useful and i’d certainly never in a million years (with my single gcse in maths )have come up with the algebra for this myself. It’d be handy if it could be reversed so that one could specify the max height rather than the width, or possiblly both. I think the former could be achieved very easily if only i could get my head round the maths. it’s be a simple matter of reversing the formula, right?
Should have paid more attention in school. Algebra IS usefull, who knew it?
Copy & paste the code below to embed this comment.
Eugenio Zaffagnini
This script is great! So great that my own CMS had to have one… only it’s an ASP cms, and ASP 3.0 doesn’t have facilities to read/write image dimensions! Anyway, I collected a couple of scripts from third-parties, and here it is: a fully working magazine layout in Classic ASP (ASP 3.0)!, under the form of a simple ASP class. It doesn’t include any “resize image” script, but this can easily be done with an external resize.PHP or .ASPX script.
Copy & paste the code below to embed this comment.
Joshua Bandur
Outstanding work; however, I wanted to suggest an even more general solution, capable of arranging arbitrarily many images, using recursion. Any possible arrangement can be derived from two basic layouts: vertical (v) and horizontal (h). For example, the layout you call “3a” could be achieved with h(h(i1, i2), i3). Similarly, “3b” is h(v(i1, i2), i3). “4a” could be derived a number of ways, one of them being h(h(i1, i2), h(i3, i4)).
The algorithm would randomly divide the set of images into smaller and smaller subsets, then work its way back up, applying one of the two layouts to the intermediate results. At each level, it could either choose the layout randomly, resulting in some interesting patterns, or using some aesthetic rules based on the portrait/landscape orientation of the subresults.
This is a wonderful, insightful and uplifting case of a revealing infrastructure Automatic Magazine Layout implementation. Keep up these useful pieces. Your help would be appreciated.
Thanks.
35 Reader Comments
Back to the ArticleAlex Bentley
http://bentley.110mb.com/?mag
has example layouts of the general solutions. To simplify the code for my purposes the images are simply scaled by the browser based on the height and width calculated. Alt and title attributes are supported as are links for each of the images. I’ve also reduced the methods to only two (one for an across layout and one for a block layout).
The first example is 7 across and the second is 4 on the left and 4 on the right.
Any orientation is allowed in any order. Let me know what you think.
Tom Most
I’ve created a Python version of the PHP class. The “project page is here”:http://freecog.net/2006/magazinelayout/ and a “test/demo here”:http://freecog.net/2006/magazinelayout/tests/test.py?width=600&padding=3&02;.jpg=1&04;.jpg=1&06;.jpg=1&09;.jpg=1&11;.jpg=1
Right now it’s pretty much just a line-by line translation, with some minor improvements. I’ll look at adding link, alt text and title options—it should be trivial to do so.
Alex, how about you show us your code?
Alex Bentley
http://bentley.110mb.com/?zip
will download a zip file containing the relevant code.
I’ve included the code for the display page, the CSS file I’m using, the Class file for the PHP class and contact info.
Mike Caputo
I’m also interested in a way to add links or perhaps a lightbox integration into this script.. Very useful.
Adrian Jones
Great idea, but it seems that the alignment is not working with example 4. It looks way off in IE and stills slightly off in FF.
Deniss Fedotovs
I changed the script, so that it returns width AND height for each image and also ALT parameter. By doing so I can not to enlarge images physicaly (I am using phpThumb to automaticaly change size of uploaded images) if they are too small (which saves processing power) and fill WIDTH, HEIGHT and ALT parameters in IMG tag, which I believe is more standarts compilant.
Chase Saunders
Division is expensive, and while the math site gave you A solution to the equations, it probably wasn’t the most readable or efficient solution. Working with the equations by hand (which means I could have a bug) I came up with the following got 4 images:
w2 = (t * r1 * r2 + t * r2 * r3) / (r1 * r2 + r2 * r3 + r1 * r3)
Chase Saunders
Looks like something in the comments system screwed up my formula. I’ll use ‘x’ for multiplication since that seems to be the issue:
w2 = (t x r1 x r2 + t x r1 x r3) / (r1 x r2 + r2 x r3 + r1 x r3)
Maxwell Scott-Slade
Hi, I thought it was a really great and informative article. Yet, I couldn’t help but notice that on every page at least one image was a single pixel out. I’m sure that wasn’t intentional.
I think the only solution would be to make sure that every image has an even width by using:
if (a % b == 1) {}
Something like that could solve the problem.
Ed Davison
It would be great if the order of the images could be fixed as to the order they were inserted into the array. I have a layout of one portrait and one landscape image that I have a need to be in a specific order (like before/after shots with before always on the left). The layout works but sometimes the order is reversed.
Is there a way to fix the order in a situation like this?
Tom Brown
I love the script! I was looking for an interesting way to put some photos on my site. I’ve modified the script slightly so that it picks images at random from a directory, and I modified image.php to use caching. I like it so much I’ve put it on the “home page”:http://www.ouafc.com
jamie thompson
I’ve found this very useful and i’d certainly never in a million years (with my single gcse in maths )have come up with the algebra for this myself. It’d be handy if it could be reversed so that one could specify the max height rather than the width, or possiblly both. I think the former could be achieved very easily if only i could get my head round the maths. it’s be a simple matter of reversing the formula, right?
Should have paid more attention in school. Algebra IS usefull, who knew it?
Eugenio Zaffagnini
This script is great! So great that my own CMS had to have one… only it’s an ASP cms, and ASP 3.0 doesn’t have facilities to read/write image dimensions! Anyway, I collected a couple of scripts from third-parties, and here it is: a fully working magazine layout in Classic ASP (ASP 3.0)!, under the form of a simple ASP class. It doesn’t include any “resize image” script, but this can easily be done with an external resize.PHP or .ASPX script.
Joshua Bandur
Outstanding work; however, I wanted to suggest an even more general solution, capable of arranging arbitrarily many images, using recursion. Any possible arrangement can be derived from two basic layouts: vertical (v) and horizontal (h). For example, the layout you call “3a” could be achieved with h(h(i1, i2), i3). Similarly, “3b” is h(v(i1, i2), i3). “4a” could be derived a number of ways, one of them being h(h(i1, i2), h(i3, i4)).
The algorithm would randomly divide the set of images into smaller and smaller subsets, then work its way back up, applying one of the two layouts to the intermediate results. At each level, it could either choose the layout randomly, resulting in some interesting patterns, or using some aesthetic rules based on the portrait/landscape orientation of the subresults.
Alan Buses
This is a wonderful, insightful and uplifting case of a revealing infrastructure Automatic Magazine Layout implementation. Keep up these useful pieces. Your help would be appreciated.
Thanks.