A LIST Apart: For People Who Make Websites

No. 219

Discuss: Automatic Magazine Layout

Pages

 <  1 2 3 4 >

21 My examples of the general solution

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.

posted at 08:59 pm on July 14, 2006 by Alex Bentley

22 Python version

I’ve created a Python version of the PHP class. The project page is here and a test/demo here

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?

posted at 11:23 am on July 16, 2006 by Tom Most

23 Source Code

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.

posted at 01:48 pm on July 16, 2006 by Alex Bentley

24 Links

I’m also interested in a way to add links or perhaps a lightbox integration into this script.. Very useful.

posted at 07:39 pm on July 17, 2006 by Mike Caputo

25 Error with Example 4

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.

posted at 08:10 pm on July 21, 2006 by Adrian Jones

26 A few improvements for this awesome script

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.

posted at 11:20 pm on July 24, 2006 by Deniss Fedotovs

27 Simpler formula?

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)

posted at 11:50 pm on July 28, 2006 by Chase Saunders

28 Simpler Formula? Updated

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)

posted at 11:52 pm on July 28, 2006 by Chase Saunders

29 A Pixel Out

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.

posted at 11:58 am on August 7, 2006 by Maxwell Scott-Slade

30 order of images

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?

posted at 04:59 pm on August 17, 2006 by Ed Davison

Pages

 <  1 2 3 4 >

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.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)