Solved

Facebook image proportions question

Posted on 2011-03-01
5
314 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

729 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