Appreciate your points about reducing HTTP requests and browser bugs, but there are some good reasons to implement this as seperate images too.
The main one for me is that by putting the final output into one larger image, this will break the “right click, save target as” functionality that the user expects of images on the web. When I say “break”, I mean the user will need to crop their image out of the layout manually, which won’t be what they were expecting.
Also means that individual images wouldn’t be clickable to a full size version without using an image map. Although I didn’t mention it in the article, the script does allow for you to make images clickable so that you can include a full size version in a popup, or whatever takes your fancy.
A while ago, I’ve spent way too much time trying to solve a similar problem. I’m just not too good at mathematics myself, so you can imagine how grateful I am for this writing!
Thanks!
Copy & paste the code below to embed this comment.
Derek Pennycuff
You kiwis are keeping us on our toes.
I recently wrote a PHP script to automatically create thumbnails on upload and place each one centered both vertically and horizontally inside square divs. The overall effect ended up making the thumbnails look a bit like mounted slides. I may be able to combine the two and have a magazine style thumbnail layout. That would rock.
Thanks a lot for the work you’ve done, particularly trudging through the algebra and representing it all visually. I think math gets a bad reputation simply because it is so often presented in a way that appeals to a very narrow slice of learning styles.
Thanks for an excellent script. I love applied mathematics and automation in web pages. Rules rule!
I have incorporated the script in a slightly modified form in some of my pages. I needed to be able to link from the generated images to a page with a full size copy.
By adding a [link] parameter in the template and an extra argument to addImage() plus a few other modifications, I could fairly easily accomplish this.
You can see it in work here:
http://500th.net/index.htm?id=55&day=20060712
http://500th.net/index.htm?id=55&day=20060713
I’d be happy to share this code. It’s quite simple.
Hey Guys….I ported Harvey’s code into a Textpattern (little “p”) plugin real quick. You can find “the forum thread here”:http://forum.textpattern.com/viewtopic.php?pid=117808.
In addition to what Harvey already mentioned, I wouldn’t be surprised if the file size of a combined image would actually be larger then the sum of the small ones. Simply getting the padding/transitions between the images looking sharp enough would necessitate using very little compression on the JPG. In most cases a sliced up image will produce better looking results with a lower overall file size.
That said there are probably going to be to be times when it is more appropriate to use the single image scheme.
Copy & paste the code below to embed this comment.
Alex 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.
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 ArticleHarvey Kane
@Gerben
Appreciate your points about reducing HTTP requests and browser bugs, but there are some good reasons to implement this as seperate images too.
The main one for me is that by putting the final output into one larger image, this will break the “right click, save target as” functionality that the user expects of images on the web. When I say “break”, I mean the user will need to crop their image out of the layout manually, which won’t be what they were expecting.
Also means that individual images wouldn’t be clickable to a full size version without using an image map. Although I didn’t mention it in the article, the script does allow for you to make images clickable so that you can include a full size version in a popup, or whatever takes your fancy.
Harmen Janssen
A while ago, I’ve spent way too much time trying to solve a similar problem. I’m just not too good at mathematics myself, so you can imagine how grateful I am for this writing!
Thanks!
Sin Liew
it’s briliant! any ideas how 2 implement this thingy in .cfm(coldfusion)?
Derek Pennycuff
You kiwis are keeping us on our toes.
I recently wrote a PHP script to automatically create thumbnails on upload and place each one centered both vertically and horizontally inside square divs. The overall effect ended up making the thumbnails look a bit like mounted slides. I may be able to combine the two and have a magazine style thumbnail layout. That would rock.
Thanks a lot for the work you’ve done, particularly trudging through the algebra and representing it all visually. I think math gets a bad reputation simply because it is so often presented in a way that appeals to a very narrow slice of learning styles.
Roy D
I’m glad someone else took the time to figure out the math.
Alex Bentley
After reading your article on this, I considered two generalized solutions:
n images across (all the same height, but within a specified width)
and
n images in the left column and m images in the right.
After a small amount of math, the generalized solution falls out.
If anyone is interested in this general solution, I can post it.
Martin Joergensen
Harvey,
Thanks for an excellent script. I love applied mathematics and automation in web pages. Rules rule!
I have incorporated the script in a slightly modified form in some of my pages. I needed to be able to link from the generated images to a page with a full size copy.
By adding a [link] parameter in the template and an extra argument to addImage() plus a few other modifications, I could fairly easily accomplish this.
You can see it in work here:
http://500th.net/index.htm?id=55&day=20060712
http://500th.net/index.htm?id=55&day=20060713
I’d be happy to share this code. It’s quite simple.
Thanks again
Martin
Walker Hamilton
Hey Guys….I ported Harvey’s code into a Textpattern (little “p”) plugin real quick. You can find “the forum thread here”:http://forum.textpattern.com/viewtopic.php?pid=117808.
Isaac N
Harvey – Great script, really useful. Martin and Alex, I’d love to see what you worked up. And Martin, those are some great pictures.
Thanks to all three of you!
Ryan Heinen
Excellent article.
In addition to what Harvey already mentioned, I wouldn’t be surprised if the file size of a combined image would actually be larger then the sum of the small ones. Simply getting the padding/transitions between the images looking sharp enough would necessitate using very little compression on the JPG. In most cases a sliced up image will produce better looking results with a lower overall file size.
That said there are probably going to be to be times when it is more appropriate to use the single image scheme.
Alex 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.