Showing pictures in PHP



Hello group,

I'm uploading images on site (developed in zen cart using PHP) and the problem is that some pictures are vertical and some are horizontal ... and the way they look is not fine. How can I work around this issue?

what is the best practice to show them properly?

Thank you,
ak
akohanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
I think I would create a transparent canvas and resize them proportionally to fit either the width or height of the canvas.  If you find that does not give good results, and you need to choose, then resize to fit the width and let the height (y-axis) fall where it may.
0
Atique AnsariCommented:
Create thumbnails of images and display original image in pop up when user clicks on thumbnail.
0
idealwsCommented:
I agree with atique as to generating a thumbnail all in the same sizes. Here is a fucntion I use to create a thumbnail for a jpeg:

function create_thumbnail($orgimgdir,$orgimage,$thumbpath) {
		//Resize the following jpg image+
		$filedir = $orgimgdir;
		$thumbsdir = $thumbpath;
		$resizefilename=$orgimage;

		$array = getimagesize($filedir.$resizefilename);
		$width_orig_resize= $array[0];
		$height_orig_resize= $array[1];

		//We resize to a max size of 300 either on the width size or height size
		if($width_orig_resize > $height_orig_resize) {
			$ratio= $width_orig_resize/300;
		}else{ 
			$ratio=$height_orig_resize/187;
		}
		$width=$width_orig_resize/$ratio;
		$height=$height_orig_resize/$ratio;

		$image_p = imagecreatetruecolor($width, $height);
		$resizeimage = imagecreatefromjpeg($filedir.$resizefilename);
		imagecopyresampled($image_p, $resizeimage, 0, 0, 0, 0, $width, $height, $width_orig_resize, $height_orig_resize);

		//Output into another file - 100 is a pecentage of the original quality
		imagejpeg($image_p,$thumbsdir.'thumbnail_'.$resizefilename, 100);
	}

Open in new window


GD support needs to be enabled for the above function to work but this should get you started in the right direction.

Hope this helps.

Regards,
Ray
0
Atique AnsariCommented:

function thumb($filename, $d_filename,$th_width, $th_height='', $forcefill=1)
	{
		list($width, $height, $type)	=	getimagesize($filename);
		
		$imageType	=	image_type_to_mime_type($type);
		
		switch($imageType)
		{
			case "image/gif":
				$source	=	imagecreatefromgif($filename); 
				break;
			
			case "image/pjpeg":
			case "image/jpeg":
			case "image/jpg":
				$source	=	imagecreatefromjpeg($filename); 
				break;
			
			case "image/png":
			case "image/x-png":
				$source	=	imagecreatefrompng($filename);
				break;
		}
		
		if( $th_height == "" )
		{
			switch($imageType)
			{
				case "image/gif":
					imagegif($source, $d_filename);
					break;
				
				case "image/pjpeg":
				case "image/jpeg":
				case "image/jpg":
					imagejpeg($source, $d_filename, 90); 
					break;
				
				case "image/png":
				case "image/x-png":
					imagepng($source, $d_filename);  
					break;
			}
			
			imagedestroy($source);
			return true;
		}
		
		else if( $width > $th_width || $height > $th_height )
		{
			$a = $th_width/$th_height;
			$b = $width/$height;
			
			if( ($a > $b)^$forcefill )
			{
				$src_rect_width  = $a * $height;
				$src_rect_height = $height;
				
				if(!$forcefill)
				{
					$src_rect_width = $width;
					$th_width = $th_height/$height*$width;
				}
			}
			else
			{
				$src_rect_height = $width/$a;
				$src_rect_width  = $width;
				if(!$forcefill)
				{
					$src_rect_height = $height;
					$th_height = $th_width/$width*$height;
				}
			}
			
			$src_rect_xoffset = ($width - $src_rect_width)/2* intval($forcefill);
			$src_rect_yoffset = ($height - $src_rect_height)/2* intval($forcefill);
			
			$thumb  = @imagecreatetruecolor($th_width, $th_height);
			
			@imagecopyresampled($thumb, $source, 0, 0, $src_rect_xoffset, $src_rect_yoffset, $th_width, $th_height, $src_rect_width, $src_rect_height);
			
			switch($imageType)
			{
				case "image/gif":
					imagegif($thumb, $d_filename);
					break;
				
				case "image/pjpeg":
				case "image/jpeg":
				case "image/jpg":
					imagejpeg($thumb, $d_filename, 90); 
					break;
				
				case "image/png":
				case "image/x-png":
					imagepng($thumb, $d_filename);  
					break;
			}
			
			return true;
		}
	}

Open in new window

0
Ray PaseurCommented:
This is an older teaching example that includes testing for GD support.  It stores the image as a PNG which is a good thing because it is a lossless compression.  I think in your application design you might want to store the resized images and use the stored versions.  You might be able to test for the existence of a resized image, and if it is not present you could resize the original image "on the fly."
<?php // RAY_image_resize.php
error_reporting(E_ALL);

// RESIZE A PNG IMAGE TO FIT A PREDEFINED SIZE.  USES THE GD LIBRARY.
// MAN PAGES: http://php.net/manual/en/ref.image.php

// A FUNCTION TO DETERMINE IF GD IS AT LEVEL 2 OR MORE
function get_gd_info($display=FALSE)
{
    // IS GD INSTALLED AT ALL?  http://php.net/manual/en/function.gd-info.php
    if (!function_exists("gd_info"))
    {
        if ($display) echo "<br/>GD NOT INSTALLED\n";
        return FALSE;
    }

    // IF GD IS INSTALLED GET DETAILS
    $gd = gd_info();

    // IF DISPLAY IS REQUESTED, PRINT DETAILS
    if ($display)
    {
        echo "<br/>GD DETAILS:\n";
        foreach ($gd as $key => $value)
        {
            if ($value === TRUE)  $value = 'YES';
            if ($value === FALSE) $value = 'NO';
            echo "<br/>$key = $value \n";
        }
    }

    // RETURN THE VERSION NUMBER
    $gd_version = preg_replace('/[^0-9\.]/', '', $gd["GD Version"]);
    return $gd_version;
}


// A FUNCTION TO MAKE AN IMAGE INTO THE RIGHT WIDTH FOR PAGE DISPLAY
// WILL WORK IF GD2 NOT INSTALLED, BUT WILL MAKE BETTER IMAGES WITH GD2
// INPUT IS THE IMAGE FILE NAME, OUTPUT IS AN IMAGE RESOURCE, OR FALSE IF NO RESIZE NEEDED
function create_right_size_image($image, $width=300)
{
    // IS GD HERE?
    $gdv = get_gd_info();
    if (!$gdv) return FALSE;

    // GET AN IMAGE RESOURCE http://php.net/manual/en/function.imagecreatefromjpeg.php
    $source = imagecreatefrompng("$image");

    // GET THE X AND Y DIMENSIONS http://php.net/manual/en/function.imagesx.php
    $imageX = imagesx($source);
    $imageY = imagesy($source);

    // IF NO RESIZING IS NEEDED
    if ($imageX <= $width)
    {
        return FALSE;
    }

    // THE WIDTH IS TOO GREAT - MUST RESIZE
    $tnailX = $width;
    $tnailY = (int) (($tnailX * $imageY) / $imageX );

    // WHICH FUNCTIONS CAN RESIZE / RESAMPLE THE IMAGE?
    if ($gdv >= 2)
    {
        // IF GD IS AT LEVEL 2 OR ABOVE USE http://php.net/manual/en/function.imagecreatetruecolor.php
        $target = imagecreatetruecolor($tnailX, $tnailY);
        imagecopyresampled ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
    }
    else
    {
        // IF GD IS AT A LOWER REVISION LEVEL
        $target = imagecreate($tnailX, $tnailY);
        imagecopyresized   ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
    }
    // RETURN THE IMAGE RESOURCE
    return $target;
}



// SAMPLE CALLING SEQUENCE - SET THE FILE PATH URLS
$old = 'RAY_temp_600x374.png';
$new = 'RAY_temp_300x187.png';

// RESIZE THE FILE TO FIT DESIRED WIDTH, IF NECESSARY
if ($image_resource = create_right_size_image($old))
{
    // WRITE (OVERWRITE) THE IMAGE IN THE NEW FILE http://php.net/manual/en/function.imagepng.php
    imagepng($image_resource, $new);

    // FREE THE MEMORY USED FOR THE IMAGE
    imagedestroy($image_resource);

    // SHOW A LINK TO THE NEW IMAGE
    echo '<a target="_blank" href="' . $new . '">SEE NEW ' . $new . '</a>' . PHP_EOL;
}

// IF IMAGE DID NOT NEED TO BE RESIZED - WAS EQUAL OR SMALLER THAN DESIRED WIDTH
echo 'ORIGINAL: <a target="_blank" href="' . $old . '">SEE OLD ' . $old . '</a>' . PHP_EOL;

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.