duduwudu Posted August 8, 2007 Share Posted August 8, 2007 Hello, can anyone help? I have a page that displays information from a database of local businesses. One of the pieces of data is an image url which i display as an image. The design of the table that the information goes in is quite tight and so I have set the image size to 100x100. However, most of the images are not a square so a few of them are getting warped or squished. As the images have the potential to be either landscape or portrait I was wandering if there is a bit of script I could use that would resize the image proportionately? I.e. if it is a landscape picture, then the width is set to 100px and if it is a portrait picture then the height is set to 100px. Here is my current code (that also has code so that if the image url is null then it displays a preset picture) <img src="<?php $img = (strlen($row_Businesses['logo_url'])<>0)?$row_Businesses['logo_url']:"nologo.gif"; echo $img; ?>" alt="<?php echo $row_Businesses['name']; ?>" width="100" height="100" border="1" /> I hope this makes sense,any help would be great, Cheers Quote Link to comment Share on other sites More sharing options...
akitchin Posted August 8, 2007 Share Posted August 8, 2007 check which one is the offending dimension, and scale the other according to the reduction ratio for the larger one: // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) { // the width is greater than the height if ($x > $y) { $new_x = $max_width; $new_y = round($y * ($max_width / $x)); } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($y * ($max_height / $y)); } } if you're going to toss it into a function, make sure you pass the max width and height, the image's dimensions, and return the new dimensions. you can use getimagesize() for the image's current dimensions. keep in mind that resizing images by HTML doesn't save any loading time, as the server still has to serve up the entire image. look into using phpthumb() or making your own dynamic thumbnailer if you want to make actual thumbnails as opposed to force-fed bastardized versions of the full image. Quote Link to comment Share on other sites More sharing options...
duduwudu Posted August 8, 2007 Author Share Posted August 8, 2007 Cheers akitchin. I would like to have an upload image form for the business to upload an image that is then processed for the website, but it's all a bit complicated in the way all the data is received from so many people (many, not so computer literate) so we decided to stay with image urls so that if we need, we can upload images out selves, or just link them through the businesses own website. The same images also appear larger on a second page that just displays their own information. we shall see how it initially works. Thank you very much for the help Quote Link to comment Share on other sites More sharing options...
duduwudu Posted August 8, 2007 Author Share Posted August 8, 2007 check which one is the offending dimension, and scale the other according to the reduction ratio for the larger one: // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) { // the width is greater than the height if ($x > $y) { $new_x = $max_width; $new_y = round($y * ($max_width / $x)); } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($y * ($max_height / $y)); } } if you're going to toss it into a function, make sure you pass the max width and height, the image's dimensions, and return the new dimensions. you can use getimagesize() for the image's current dimensions. keep in mind that resizing images by HTML doesn't save any loading time, as the server still has to serve up the entire image. look into using phpthumb() or making your own dynamic thumbnailer if you want to make actual thumbnails as opposed to force-fed bastardized versions of the full image. Out of interest (and being a beginner) could you show me how one might integrate that into the code I posted in at the top of the page (I'm such a noob, but willing to learn) Quote Link to comment Share on other sites More sharing options...
akitchin Posted August 8, 2007 Share Posted August 8, 2007 sure, as long as you're willing to learn. we'll handle all the PHP to determine the image name, whether it exists, and assign appropriate dimensions for it above the actual echoing: <?php // grab image location $img = (strlen($row_Businesses['logo_url'])<>0)?$row_Businesses['logo_url']:'nologo.gif'; // if it's a legit file, get its dimensions if (is_file($img)) { list($x, $y) = getimagesize($img); } // otherwise, we'll set them arbitrarily to 100 else { $x = $y = 100; } // define the max dimensions $max_width = $max_height = 100; // use these to figure out the new dimensions - // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) { // the width is greater than the height if ($x > $y) { $new_x = $max_width; $new_y = round($y * ($max_width / $x)); } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($y * ($max_height / $y)); } } ?> <img src="<?php echo $img; ?>" alt="<?php echo $row_Businesses['name']; ?>" width="<?php echo $x; ?>" height="<?php echo $y; ?>" border="1" /> Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 8, 2007 Share Posted August 8, 2007 // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) { // the width is greater than the height if ($x > $y) { $new_x = $max_width; $new_y = round($y * ($max_width / $x)); } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($y * ($max_height / $y)); } } No offense akitchin, but that logic is flawed. If both dimensions are bigger than thier max it will only adjust based upon the max width. However, if the height is bigger in proportion to the max height than the width is in porportion to it's max, then the height will still be too big. For example, if the max height and width are set to 100 and you have an image that is 200 wide bu 400 high, the result will be 100w x 200h - which is still too big. A different appraoch is to compare ratios to determine the dimension to use when resizing. The following function will return an array of the resized height and width. It also takes an optional parameter, "fill". If an image is smaller than the max values and $fill is set to true, it will determine the new sizes such that the image will be big enough to exactly fit the max value for one dimension. (not checked for typos) function resize ($width, $height, $maxwidth, $maxheight, $fill=false) ( if ($width>$maxwidth || $height>$maxheight || ($fill && $width<$maxwidth || $height<$maxheight) ) //compare the ratios if ( ($width/$height) > ($maxwidth/$maxheight) ) { //Resized based upon the width $ratio = ($maxwidth/$width); } else { //Resized based upon the height $ratio = ($maxheight/$height); } $width = $ratio * $width; $height = $ratio * $$height; } $resize['width'] = $width; $resize['height'] = $height; return $resize; } Quote Link to comment Share on other sites More sharing options...
akitchin Posted August 8, 2007 Share Posted August 8, 2007 No offense akitchin, but that logic is flawed. If both dimensions are bigger than thier max it will only adjust based upon the max width. However, if the height is bigger in proportion to the max height than the width is in porportion to it's max, then the height will still be too big. For example, if the max height and width are set to 100 and you have an image that is 200 wide bu 400 high, the result will be 100w x 200h - which is still too big. NOTE: i screwed up one of the portions - in the else statement, it should read $x. i've appended the fixed code to the end here. none taken, it was a very quickly written logic. however, i added the check to see which dimension is larger in order to counteract the issue you've described. assuming the same dimensions as you've given (max of 100 in both, an image 200x400), it will enter the if() loop as it meets the condition. it will then proceed to the else statement as $x isn't greater than $y (200 < 400), set $new_y to 100 and scale $new_x to 200 * (100/400), or 50, retaining the aspect ratio of 1:2. i haven't taken a look at your code, but i'm sure it works better. just thought i'd defend myself a wee bit. // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) { // the width is greater than the height if ($x > $y) { $new_x = $max_width; $new_y = round($y * ($max_width / $x)); } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($x * ($max_height / $y)); } } Quote Link to comment Share on other sites More sharing options...
duduwudu Posted August 8, 2007 Author Share Posted August 8, 2007 If its of any interest, here is what this is for http://www.hebdenbridge.com/directory/masterlisting.php Cheers for everyone's help so far Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 8, 2007 Share Posted August 8, 2007 akitchin, Maybe I didn't describe the problem appropriately, but the flaw still remains. See this example: <?php //Original ratio of 2.0 $x = 500; $y = 400; $max_width = 200; $max_height = 50; // check if either overflows the max dimensions if ($x > $max_width || $y > $max_height) //This is true { // the width is greater than the height if ($x > $y) //This is true { $new_x = $max_width; //$new_x = 200 $new_y = round($y * ($max_width / $x)); //$new_y = (400 * (200 / 500)) = 160 } // otherwise, the height is greater than or equal to width else { $new_y = $max_height; $new_x = round($x * ($max_height / $y)); } } //Result //$new_x = 200 //$new_y = 160 > max_height of 50 // //Original ratio is maintained but it is too high ?> It could be fixed in that code by changing the inner if statement to if ($x > $max_width) and modifying $x & $y, then change the else to an if ($y > $max_height). That way if after the first resizing the image is still to big you can resize again based upon the y dimension. Quote Link to comment Share on other sites More sharing options...
akitchin Posted August 8, 2007 Share Posted August 8, 2007 ah yes, i see what you mean now. i just made the assumption he would be using square dimensions (and restricting either one or the other to a maximum square cell). Quote Link to comment Share on other sites More sharing options...
duduwudu Posted August 8, 2007 Author Share Posted August 8, 2007 I've got a little bit confused now :'( Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 8, 2007 Share Posted August 8, 2007 I've got a little bit confused now :'( Sorry, my fault. akitchin's code should work fine for your particular scenario with height and width having a max of 100 (or equal values). However, it may not work in some situations if you have different max values. I always strive to write code that is flexible and reusable. The code I provided will work no matter what the max values are in any given situation. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.