asked on

Facebook image proportions question

Hey All,

I have a quick question about my website and facebook's website. With their profile photos, if someone sets a portrait photo as a profile photo they zoom in on it to still maintain that nice square shape throughout all of their profile photos/albums etc...

I am needing an exact function like this on my website and what I currently have I don't think is working correctly. Please check out my code below:

imageurl($profile_image,192,192); //This is my function in my site

Open in new window

And this is my function it's self:

function imageurl($imagepath,$width,$height) //function for bind image 
{
	if($imagepath == "")
	{
	echo "<img src='uploads/1.gif' width='".$width."' height='" .$height. "' />";	 
	}
	else
	{
		if (file_exists('uploads/'. $imagepath))
		{	
		echo "<img src='uploads/".$imagepath."'  width='".$width."' height='" .$height. "' alt='' />";	 
		}
		else
		{ 
		echo "<img src='uploads/1.gif'  width='".$width."' height='" . $height. "' />";	
		}
	}	
}

Open in new window

Any help on this or ideas on how to get this to work like Facebooks so I can maintain a perfect size at all times in a preferable landscape size (almost square) even for portrait photos.

Thanks in Advance!

ASKER CERTIFIED SOLUTION

Lukasz Chmielewski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ropenner

The image will be warped (squished, fun house mirror like depending on the aspect ratio of the uploaded picture) if you scale it to a width and height. This may be good enough for your site.

To match Facebook's functionality:

first scale the image so that one of the dimensions fits into your 192x192 box
allow the user to center the image in a 192x192 box
save the area of the image in that 192x192 box and save the scaled original image

This can be done with imagemagik through PHP or using HTML or possibly many other methods.

The HTML code below produces the picture shown. I think the last example is the one you want. When I get pictures for a website I still scale them down first with imagemagik because they are usually too large to start with.

NOTE: copy the code to a file and save as test.html and pick a picture you want to test with and call it test.jpg and put it in the same directory as test.html to test.

<HTML>
<HEAD>
<style type="text/css">
.setsize {
	width:192px; height:192px;
}
.squarepic1 {
    width:192px; height:192px;
    background: transparent url(test.jpg) -150px -300px no-repeat;
}
.squarepic2 {
    background: transparent url(test.jpg) -150px -300px no-repeat;
}

.source-image {
   top: -150px;
   left: -300px;
}

</STYLE>
<!-- 
position: absolute
width: 100%; this makes an image scale as the window scales and with 
body {overflow:hidden} allows any overflow to get cut off and no scrollbars to show -->
<BODY>

<TABLE>
<TR><TD>
Example 1<BR>
Scaled in one dimension so that it isn't squished<BR>
<IMG SRC=test.jpg width=192>
</TD>
<TD>
Example 2<BR>
Squished/stretched by scaling in both directions<BR>
<IMG SRC=test.jpg width=192 height=192><BR>
<BR>
</TD>
</TR>

<TR>
<TD>
Example 3<BR>
table with transparent background as set in style section above and picture is moved closer to center but not scaled
<TABLE border=1 width=192 height=192 class=squarepic2><TR><TD>&nbsp;</TD></TR></TABLE>
</TD>
<TD>
Example 4<BR>
table of set dimensions with the picture as a background unscaled<BR>
<TABLE border=1 width=192 height=192 background=test.jpg><TR><TD>&nbsp;</TD></TR></TABLE>
</TD>
</TR>

<TR>
<TD>
Example 5<BR>
picture is absolutely positioned and scaled inside a table that is of fixed dimensions
<TABLE border=1 width=192 height=192><TR><TD><IMG SRC=test.jpg width=192></TD></TR></TABLE>
</TD>
<TD bgcolor=#ffddee>
Example 6<BR>
I think this is what you want 
Cutoff overflow, center and scale your picture as you wish<BR>
<DIV style="width:192px;height:192px;overflow:hidden"><IMG style="position:relative; top: -50px;left:-150px" SRC=test.jpg width=400></DIV>
<BR>
</TD></TR></TABLE>
</BODY>
</HTML>

Open in new window

Screenshot-23.png

ropenner

NOTE: if you replace the img portion of Example 6 with below OR determine which dimension is greater to begin with use the greater of the two dimensions to determine whether you scale by width OR height (not both)

For my landscape image height=192 fills out the 192x192 box.

<IMG style="position:relative; top: -0px;left:-150px" SRC=test.jpg height=192>

piixeldesigns

ASKER

Thanks for the help

piixeldesigns

ASKER

Thanks Again everyone for your help! :)