Automatic Magazine Layout

by Harvey Kane

35 Reader Comments

Back to the Article
  1. I find it truly incredible that no sooner do I run into the challenge of “I know I want to put a small image gallery on the home page to improve it, but I don’t have the time (or want to go through the pain, yet again) of having to manually size the images to exactly the size they need to be to get them into an aesthetically pleasing layout” then ALA rises to the occasion and delivers what appears to be an elegant solution to exactly my problem. Just think…in a day or two, when I get to use this, I’ll get my problem solved sooner than I had expected. Thank you.
    Copy & paste the code below to embed this comment.
  2. I think your article is very interesting and useful. What do you think about an idea to speed things up by allowing to manualy enter values for image size?
    Copy & paste the code below to embed this comment.
  3. This is a good idea and its nice to see the integration of math and webdesign. However, I think the idea can be taken alot further. How about specifying both the maximum width and height and also images which are given a greater “real estate” preference. How about different layouts like larger photo on left, top etc. Even a option make a polaroid photo-montage a-la Picassa would make this script alot more useful. Also an easy way to mabye refrence the pictures in the footnotes would be interesting (i.e. overlaying a figure number on the image). I would be interested in a RoR version for this, if only I had the time at the moment. But again, well done on the novel and useful idea.
    Copy & paste the code below to embed this comment.
  4. I’d like to have this script integrated into the gallery extension of Typo3. The preview page looks really ugly when you combine landscape and portrait pictures.
    Copy & paste the code below to embed this comment.
  5. On the issue of using getimagesize, you may be able to use imagesx and imagesy to get the width and height of the images.  They work a little different than getimagesize, whereas getimagesize takes a filename while imagesx & imagesy take an image resource.  This may be worth checking in to though, as getimagesize is currently providing your script with information that is not being used. More information can be found at “getimagesize”:http://us2.php.net/manual/en/function.getimagesize.php , “imagesx”:http://us2.php.net/manual/en/function.imagesx.php, and “imagesy”:http://us2.php.net/manual/en/function.imagesy.php .
    Copy & paste the code below to embed this comment.
  6. It’s an elegant solution, as mentioned before, and it _can_ be taken further. I’m thinking some interesting plugins for WordPress/TextPattern/etc could be based off of this.
    Copy & paste the code below to embed this comment.
  7. Thanks everyone for the feedback. Yes, there are plenty of ways to improve this, and a Wordpress / Typo plugin seemed logical to me, as well as adding support for alt / title attributes on the images. The speed of getImageSize() hadn’t worried me too much as benchmarking didn’t show too much of a performance hit (compared with my first attempt at least). I’ll certainly look into getting the data from the image resource if this saves some processing power. It currently tries to use the highest resolution image as the large one, but an obvious enhancement would be to add an extra flag for priority on each image. I guess the whole point of the script for me is to deal with user uploaded images, or images that change often - The script works very well for a homepage rotation, where 3 random images are chosen randomly and arranged nicely. I also use the script in my CMS - users can add a simple piece of custom BBCode into their pages - this is the sort of thing I can see working for Wordpress, which I’ll be getting started on soon.
    Copy & paste the code below to embed this comment.
  8. Very nicely done. Take a good note folks–Leonardo da Vinci would be proud. The best designs take into account so many different disciplines. This is a superb integration of relatively complex algebra and visual design to fulfill a very practical design application.
    Copy & paste the code below to embed this comment.
  9. Good stuff. Great math :-)
    But why not skip the whole html/css bit and generate the compilation in one single jpeg image.
    This way one eliminates a few HTTP requests, the jpeg-file overhead. The html will also be smaller and one doesn’t need to call getImageSize. Also no browser-bug to take into account. The only problem whould be the color of the padding.
    Copy & paste the code below to embed this comment.
  10. It’s really an intresting reading. I will try to do it. Thanks!
    Copy & paste the code below to embed this comment.
  11. @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.
    Copy & paste the code below to embed this comment.
  12. 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.
  13. it’s briliant! any ideas how 2 implement this thingy in .cfm(coldfusion)?
    Copy & paste the code below to embed this comment.
  14. 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.
    Copy & paste the code below to embed this comment.
  15. I’m glad someone else took the time to figure out the math.
    Copy & paste the code below to embed this comment.
  16. 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.
    Copy & paste the code below to embed this comment.
  17. 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
    Copy & paste the code below to embed this comment.
  18. 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.
    Copy & paste the code below to embed this comment.
  19. 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!
    Copy & paste the code below to embed this comment.
  20. 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.
    Copy & paste the code below to embed this comment.
  21. 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.
    Copy & paste the code below to embed this comment.
  22. 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?
    Copy & paste the code below to embed this comment.
  23. 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.
    Copy & paste the code below to embed this comment.
  24. I’m also interested in a way to add links or perhaps a lightbox integration into this script.. Very useful.
    Copy & paste the code below to embed this comment.
  25. 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.
    Copy & paste the code below to embed this comment.
  26. 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.
  27. 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)
    Copy & paste the code below to embed this comment.
  28. 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)
    Copy & paste the code below to embed this comment.
  29. 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.
    Copy & paste the code below to embed this comment.
  30. 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?
    Copy & paste the code below to embed this comment.
  31. 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
    Copy & paste the code below to embed this comment.
  32. 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.
  33. 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.
  34. 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.
    Copy & paste the code below to embed this comment.
  35. 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.
    Copy & paste the code below to embed this comment.