Solved

Facebook image proportions question

Posted on 2011-03-01
5
309 Views
Last Modified: 2013-12-13
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!
0
Comment
Question by:piixeldesigns
  • 2
  • 2
5 Comments
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
ID: 35007296
There are no such attributes for the image as width and height, use styles:

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."'  style=\"width:".$width."; height=". $height."\" alt='' />";       
            }
            else
            {
            echo "<img src='uploads/1.gif' style=\"width:".$width."; height=". $height."\" />";      
            }
      }      
}
0
 
LVL 8

Expert Comment

by:ropenner
ID: 35015666
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
0
 
LVL 8

Expert Comment

by:ropenner
ID: 35015688
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>
0
 
LVL 1

Author Closing Comment

by:piixeldesigns
ID: 35015702
Thanks for the help
0
 
LVL 1

Author Comment

by:piixeldesigns
ID: 35015705
Thanks Again everyone for your help! :)
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now