Discuss: Automatic Magazine Layout
by Harvey Kane
- Editorial Comments
12 Great stuff
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!
posted at 11:56 am on July 13, 2006 by Harmen Janssen
13 do they have same components in ColdFusion?
it’s briliant! any ideas how 2 implement this thingy in .cfm(coldfusion)?
posted at 03:32 pm on July 13, 2006 by Sin Liew
14 Brilliant work.
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.
posted at 09:29 pm on July 13, 2006 by Derek Pennycuff
15 Math
I’m glad someone else took the time to figure out the math.
posted at 09:56 pm on July 13, 2006 by Roy D
16 General Solution
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.
posted at 10:50 pm on July 13, 2006 by Alex Bentley
17 Now with links
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
posted at 12:12 am on July 14, 2006 by Martin Joergensen
18 Textpattern
Hey Guys….I ported Harvey’s code into a Textpattern (little “p”) plugin real quick. You can find the forum thread here.
posted at 03:35 am on July 14, 2006 by Walker Hamilton
19 General and Linked solutions
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!
posted at 03:57 pm on July 14, 2006 by Isaac N
20 Why use HTML
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.
posted at 07:55 pm on July 14, 2006 by Ryan Heinen
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






11 Why use HTML
@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.
posted at 12:34 am on July 13, 2006 by Harvey Kane