Friends pictures with size

Question

I basically need to recreate this page: http://www.facebook.com/me/friends

But: Because not all images are actual squares, I need to get their dimensions in order to crop them using css and hidden overflow (just like facebook does basically). I know there is a way to retrieve square images but they come in a 50px by 50px size (I want large ones).

I reckon FQL could achieve this, maybe it would start with something like:

fql?q=SELECT name, pic_big FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

Answer 1

You can get the image dimensions from javascript and then force positioning them as a background image in a fixed height/width div. You can grab the height the width via javascript after the image has loaded.

IMG onload see: http://www.w3schools.com/jsref/event_img_onload.asp

Here's what you do

<img onload="redoImage(this)" src="<%=user["pic_big"]%>" id="pic1">

or via js

var img=new Image();
img.onload = redoImage();
img.src="<%=user["pic_big"]%>";

then this is the real place where the image shows up and you'll set it's background image with the appropriate offset to get the image to display correctly. Takes some math to figure out how to get the offset x or offet y.

<div id="pic1-holder" style="width:120px; height:120px;">&nbsp;</div>

function redoImage(this) {
  var xOffset = computeXoffset(this.width, 120);
  var yOffset = computeYoffset(this.height, 120);
  // now set the background image of the div
  // and the offset of that background image
};

I have production code that does this wonderfully. Happy coding.