Pro-tip: if you express your layout as a tree composed of horizontal split, vertical split and images then you can come up with a general linear system of equations that you can feed to any solver (basically just inverting a matrix) to get the layout.

I'm working on a blog post about it. In the meantime you can look at other image layouts I wrote about: http://blog.vjeux.com/category/image/

That sounds very interesting. I look forward to the post. Is there any rss-like feed?

If you paste that URL into a feed reader it should find the feed link from the page source.

It's http://blog.vjeux.com/feed, in case your feed reader doesn't do that for some reason.

We did a similar thing a while back when we had a similar layout on an early news site. Then I used math to make our code smarter instead.

Rather than having lots of weird image sizes dictate my layout, I decided to have my weird layout dictate my image sizes. The result was this:

https://www.mashape.com/stremor/automatic-image-crop-and-res...

Yes. This really does crop images for any aspect ratio. Automatically. Yes, if you try and make a picture that is just your face be 1080 tall and 90 wide it will likely choose just your nose. What do you want it to do in that scenario? this is meant for taking 4:3 and making them square, or 16:9 and making them 9:16, not for taking 16:9 and making it 1:4. But it will try its darnedest.

You could actually specify options for the images when they are cropped, like "crop-center" or smth -- that would allow to center a photo around the eyes, and a landscape around the horizon line center.

Now, add a face (and landscape) recognition to this, properly optimize, and get a (deserved) as-smart-and-powerful-as-google feeling down your spine :)

You didn't play with it. It does object detection. It is as "smart and powerful as google". That's kind of our thing. We are smarter than Google, and working on the more powerful thing.

If you give it a pic with you off in the corner it will crop around you. If you give it a pic with a laptop sitting on the right third it will crop around that. It is pretty smart.

You could speak of that from the start :)

Being able to come up with elaborate equations to draw a layout is a smart way to tell the browser how to dynamically resize and position a set of elements. It has, for example, helped me design custom "Pinterest-like" layouts.

Keep in mind though that some simple techniques that require(d) JavaScript can (now) be achieved with CSS only. I'm thinking about how to center vertically and horizontally a fix-sized box, or how to make an element take up the whole height of the viewport (without messing with the scrolling). I myself used to rely upon JavaScript calculations to retrieve dynamically the viewport's height, whereas the browser's rendering engine could actually achieve it way more efficiently and with only a couple of lines of CSS code.

  var h_c  = (q_b - q_a + r_a * p + (r_b + r_a) *
             ((p + q_a - w) / r_a - p)) /
           (-r_b - r_b / r_a * c - c);
  
  var h_b  = (p + q_a - w) / r_a - p + (1 + c / r_a) * h_c;

  var h_a  = -p + h_c - h_b;

  var w_c  = c * h_c;

  var w_ab = q_a + r_a * h_a;

Up next - How Self Obfuscation Secured My Position As a JSPro!

The real code would of course be accompanied with explanation of what the variables all are, the procedure used, how the matrix can be reduced, etc. Any things like this will inevitably, sans comments, be difficult to make head or tail of. That doesn't mean that they're bad techniques.

> Any things like this will inevitably, sans comments, be difficult to make head or tail of.

perhaps true (maybe). but if the variables were named properly we would at least have a decent idea of what the expressions actually are - even if we can't then infer what they are for from that information.

imo that is precisely what a comment is for - explaining an algorithm or things that look unusual, not merely explaining what a variable is - which imo is precisely what a variable name is for.

Sometimes what variables represent is too complicated to be expressed in a variable name. If you insist that all variables be semantically intelligible without reference to the part they play in the entire algorithm, you may be committing yourself to a less efficient algorithm that isn't any more flexible.

Is there something wrong with code that is too dense to be self-documenting, especially if you're willing to write and distribute a paper to explain it? Would you understand "pivot" in quicksort if you hadn't read a description of how quicksort works?

I think the variable names are OK.

Single letter variables with subscript are standard in math, and using short names makes the equations easier to see.

Heh.

Just read the paper here: http://l.yimg.com/j/assets/ipt/breaking-row-boundaries.pdf

It explains it nicely.

Interesting write-up. I'm assuming there is a fixed number of images to fit into the layout which makes the problem a lot easier. Otherwise a bin-packing approach might be warranted.

Somewhat related, I came across an interesting method to resize images called "seam carving". It uses a dynamic programming approach to remove rows or columns that seem uninteresting. The end result is that the important parts of the image are retained when the image is resized. The wikipedia page is fairly good: http://en.wikipedia.org/wiki/Seam_carving There are nice demos on Youtube as well: http://www.youtube.com/watch?v=6NcIJXTlugc Now imagine doing this on the front-end (might be possible now in real-time) and the layouts this would allow!

> Now imagine doing this on the front-end

Like, in the browser?

I can't tell if you're being sarcastic or not, so I'll give you the benefit of the doubt.

Yes I mean in the browser. The convolution (edge-detection) is definitely possible in WebGL, and the dynamic programming algorithm probably is, so you could probably get sufficient performance in the browser to do this on multiple images in real time.

Not sarcastic. I just didn't know whether you meant the browser or eg the last layer of, say, PHP before it leaves the server.

Am I the only one who think the layout of Yahoo Food and Yahoo Tech is much more difficult to read than linear ones like Reddit or Hacker News?

Nope, I personally think it's bad design in that there is too much color in too many places. I don't know which stories are important and which aren't. Worse yet, I can't even read the headlines because the pictures are so distracting.

The linear model is much easier to parse since the stories are sorted. The grid model is not inherently worse, but they would need a better understanding of color to make it work. Maybe a bit less saturation to give prominence to the headlines?

There's a difference between "pretty" and "useful." IMHO the Yahoo Food site is pretty while sites like Reddit and Hackernews are useful. There's a place for both, and each will attract a different market and use case.

Those equations look straight out of a book on how not to code layouts. If you need to tweak it to add an extra slot in the bottom right one day, you'll have to re-work on the entire set of equations. The constraints based method they talk about after is much better, though.

Yippee! Finally - a real world programming challenge that looks like a problem from Project Euler!

It must not have worked; there are no double-talls to be seen anywhere on Yahoo Tech or Yahoo Food...