Solved

Facebook image proportions question

Posted on 2011-03-01
5
312 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

756 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