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?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.