CAM Web Design » Images http://camwebdesign.com High quality, cost effective wed design and hosting solutions Mon, 14 May 2012 04:20:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Serve Watermarked Images with PHP http://camwebdesign.com/techniques/serve-watermarked-images-with-php/ http://camwebdesign.com/techniques/serve-watermarked-images-with-php/#comments Sun, 15 Aug 2010 15:41:02 +0000 Corey http://camwebdesign.com/?p=1301 (more...)]]> So you want to watermark your images, how do you do this? In this technique we’ll show you how we serve our images with a watermark using PHP. We’ll be building on the Serve Resized Images with PHP tutorial we published previously, which explains basic re-size manipulation of your images.

Stepping through the code, we first get our previously created watermark watermark using the imagecreatefrompng() PHP function, setting it to the variable $watermark for simplicity.

1

$watermark = imagecreatefrompng('../images/watermark.png');

Next we determine the watermark image’s width and height.

1
2

$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

Since we want our watermark to appear in the bottom right of the original image, we’ll subtract the watermark image’s width and height from the original image’s width and height to determine it’s placement. We also subtract 5 pixels for a padded placement.

1
2

$dest_x = $width - $watermark_width - 5;
$dest_y = $height - $watermark_height - 5;

Lastly we’ll actually apply the watermark image using the imagecopymerge() PHP function.

1

imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);

Putting the watermark code together we get the following:

1
2
3
4
5
6
7
8
9

//Set up Watermark
$watermark = imagecreatefrompng('../images/watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$dest_x = $width - $watermark_width - 5;
$dest_y = $height - $watermark_height - 5;
 
//Apply Watermark
imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);

Adding the watermark code to our previous Serve Resized Images with PHP technique code we’ll have the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" .  urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/nophoto.gif";
if(is_image($img1)){
 
  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);
 
  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width > 150) ? $width = 150 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }
 
  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;
 
  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }
 
  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  /*BEGIN WATERMARK CODE**************************************************************/
 
  //Set up Watermark
  $watermark = imagecreatefrompng('../images/watermark.png');
  $watermark_width = imagesx($watermark);
  $watermark_height = imagesy($watermark);
  $dest_x = $width - $watermark_width - 5;
  $dest_y = $height - $watermark_height - 5;
 
  //Apply Watermark
  imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
 
 /*END WATERMARK CODE****************************************************************/
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);
 
}

Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has the default 588pixel width/height, keeping the aspect ratio, using an image named “uwcmc.jpg” for our United Way of Cape May County client.

1

<img src="http://camwebdesign.com/layout/thumb.php?a=y&img=uwcmc.jpg" alt="UWCMC" />

UWCMC

]]> http://camwebdesign.com/techniques/serve-watermarked-images-with-php/feed/ 0 Serve Resized Images with PHP http://camwebdesign.com/techniques/serve-resized-images-with-php/ http://camwebdesign.com/techniques/serve-resized-images-with-php/#comments Mon, 11 Jan 2010 19:33:00 +0000 Corey http://camwebdesign.com/?p=605 (more...)]]> There are many reasons we use PHP to serve images on sites including: resizing, watermarking, skewing, server-caching, etc. This will cover the basics of serving and resizing an image with PHP. This technique will work with JPG, JPEG, GIF & PNG image types. We’ll cover more advanced image manipulation techniques in later posts.

The first line of code calls the functions.phtml include we defined in our PHP Image Manipulation Functions post, change the “/path/to/include/” to your path. The second line $_GETs the image file from the URL we want to manipulate, and assigns it to the $img1 variable. The third line checks if this requested image is a file, otherwise we use a generic “No Photo” image to prevent no image from displaying. The fourth line checks if the requested file is an image and surrounds the remaining code with the if statement.

1
2
3
4
5
6
7
8

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" . urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/images/nophoto.gif";
if(is_image($img1)){ 
 
   /*** The rest of the Code ***/
 
}

Next part of the code gets the MIME type of the image file and calls the proper image header based on that MIME type.

1
2
3

  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);

With the following code we determine the final image’s width and height. Based on the presence of $_GET[a] variable in the URL used to represent aspect, our code: makes a smaller image with the aspect ratio kept intact, otherwise it makes a thumbnail with equal width and height starting from the image’s center. For thumbnails a width of 100 pixels is default, if we do not specify a width, with a max of 178 pixels. For non-thumbnails (with aspect preserved) a default width of 300 pixels is set with a maximum of 588 pixels. These numbers can be changed, we just set them to work within our site’s layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width > 178) ? $width = 178 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }

We then determine the original image’s width and height.

1
2
3
4

  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;

With the following code we determine the final image’s width and height. Our code makes thumbnails with equal with and height from an image’s center, or a smaller image with the aspect ratio kept intact all based on the presence of $_GET[a] variable in the URL.

1
2
3
4
5
6
7
8
9
10
11
12
13

  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }

Finally we re-sample then print the image with PHP.

1
2
3
4
5
6
7
8

  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);

Putting it all together we arrive at the following code, we named our PHP file thumb.php since it's primary role is to make thumbnails for the site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" .  urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/nophoto.gif";
if(is_image($img1)){
 
  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);
 
  // Set dimensions, quality & variables
  $width = $_GET[w];
  if(!$_GET[a]) {
    //it's a thumbnail request don't preserve aspect
    ($width) ? "" : $width = 100;
    ($width &gt; 150) ? $width = 150 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width &gt; 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }
 
  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;
 
  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig &lt; $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
  }else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }
 
  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);
 
  //Print Image
  image_same_type($img1,$im,$thmb_quality);  
  image_cache_type($img1,$im,$image_path);
 
}

Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has a max 200pixel width/height, keeping the aspect ratio, using an image named "uwcmc.jpg" for our United Way of Cape May County client.

1

<img src="http://camwebdesign.com/layout/thumb.php?w=200&a=y&img=uwcmc.jpg" alt="UWCMC" />

UWCMC

Below we are calling an image without specifying width or aspect ration, again using an image named "uwcmc.jpg".

1

<img src="http://camwebdesign.com/layout/thumb.php?img=uwcmc.jpg" alt="UWCMC" />

UWCMC

]]> http://camwebdesign.com/techniques/serve-resized-images-with-php/feed/ 1 PHP Image Manipulation Functions http://camwebdesign.com/techniques/php-image-manipulation-functions/ http://camwebdesign.com/techniques/php-image-manipulation-functions/#comments Sat, 09 Jan 2010 20:14:04 +0000 Corey http://camwebdesign.com/?p=631 (more...)]]> Lets define some PHP functions we’ll be calling on for our PHP image tutorial series. We define all these functions in a file named functions.phtml and call it in our PHP code through a PHP include_once(), this way we don’t bother with the functions in our PHP image code.

This first function allows us to determine if the requested image file is an image is_image().

1
2
3
4
5
6
7

/*Define is_image() ****************************************************************************************************/
function is_image($var1) {
	$t=strtoupper(substr($var1,-3,3));
	$t2=strtoupper(substr($var1,-4,4));
	if($t=="GIF" ||$t=="PNG" ||$t=="JPG" ||$t2=="JPEG") return true;
	return false;
}

This function returns the extension for any file getExtension().

1
2
3
4
5
6
7

/*Define getExtension() ****************************************************************************************************/
function getExtension($file) {
  $pos = strrpos($file, '.');
  if(!$pos) { $photosubmitted = 'Error: Unknown Filetype'; }
  $str = substr($file, $pos, strlen($file));
  return $str;
}

>
The next function allows us to call the proper MIME type, based on image type, in the header of the PHP code get_mime().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*Define get_mime() ****************************************************************************************************/
function get_mime($var1) {
	$t=strtoupper(substr($var1,-4,4));
	switch($t){
		case ".JPG":
		case ".JPEG":
			return "image/jpeg";
			break;
		case ".GIF":
			return "image/gif";
			break;
		case ".PNG":
			return "image/png";
			break;
		default: return "";
			break;
	}
}

This fourth function allows for the use of the proper PHP image createfromxxx() call based on image type imagecreatefrom().

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Define imagecreatefrom() ****************************************************************************************************/
function imagecreatefrom($file)  {
if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){		
	$image=imagecreatefromjpeg($file);
}
if(strtoupper(substr($file,-3,3))=="PNG"){		
	$image=imagecreatefrompng($file);
}
if(strtoupper(substr($file,-3,3))=="GIF"){		
	$image=imagecreatefromgif($file);
}
return $image;
}

Lastly this functions will output the image to the browser image_same_type().

1
2
3
4
5
6
7
8
9
10
11
12

/*Define image_same_type() ****************************************************************************************************/
function image_same_type($file,$image,$quality = 100) {
  if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){		
  	imagejpeg($image,null,$quality);
  }
  if(strtoupper(substr($file,-3,3))=="PNG"){		
  	imagepng($image);
  }
  if(strtoupper(substr($file,-3,3))=="GIF"){		
  	imagegif($image);
  }
}
]]> http://camwebdesign.com/techniques/php-image-manipulation-functions/feed/ 0 Dynamic Font-Based Images http://camwebdesign.com/techniques/dynamic-font-based-images/ http://camwebdesign.com/techniques/dynamic-font-based-images/#comments Sat, 02 Jan 2010 19:26:12 +0000 Corey http://camwebdesign.com/?p=319 (more...)]]> We wanted to create stylish text images for our page and post headings, but we didn’t want to create them in advance, we wanted them on the fly. This is a tutorial on how we accomplished this using PHP.

You’ll need PHP (PHP: Hypertext Preprocessor) the open source dynamic language the code in our example is written. We won’t elaborate, the internet is full of information reguarding PHP.

You’ll need the GD library, an open source code library for the dynamic creation of images by programmers, typically installed along with PHP. Information on the GD library also abounds on the internet. Check with your host if you are unsure if you have it installed.

A windows font of your choice, for our site we chose a nice font called Agency. Upload a copy of this font onto your server wherever you like, just be sure to change the path/to/the/font to your font’s path in the PHP code.

Determine the colors of your image (in hexidecimal form) for the following: text, background & text-shadow (if wanted). Hexadecimal uses three sets of numbers to represent the Red, Green, and Blue values for a particular color. We chose a blue text, with a white background and a light grey shadow. There are quite a few free color picking programs and websites available, we use ColorPic by iconico.com for all our color needs. It’s freeware and does not include any other unwanted software included in the download package.

Save this PHP code and name the file font.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// Get the text to draw
$text = ($_GET['text']) ? $_GET['text'] : 'oops...missing text' ;  //set default text if missing
 
// Path to the font
$font = '/path/to/the/font/AGENCYR.TTF';
 
// Get display font size
$size = ($_GET['size']) ? $_GET['size'] : 18.5 ;  //set default if empty
 
// Get display width
$width = ($_GET['w']) ? $_GET['w'] : 100 ;  //set default if empty
 
// Get display height
$height = ($_GET['h']) ? $_GET['h'] : 40 ;  //set default if empty
 
// Create the image
$im = imagecreatetruecolor($width, $height);
 
// Choose text color
$color = ($_GET[color]) ? $_GET[color] : "black" ;  //Image color
switch($color) {
  case "black" : $use_color = imagecolorallocate($im, 0, 0, 0); break;
  case "orange" : $use_color = imagecolorallocate($im, 255, 159, 64); break;
  case "blue" : $use_color = imagecolorallocate($im, 53, 50, 111); break;
  case "white" : $use_color = imagecolorallocate($im, 255, 255, 255); break;
}
 
// Get the top offset
$offset = ($_GET['offset']) ? $_GET['offset'] : 30 ;  //set default if empty
 
// Create the image background
$bgcolor = ($_GET['bgcolor'] == 'white') ?	imagecolorallocate($im, 255, 255, 255) : imagecolorallocate($im, 0, 0, 0) ;  //set default if empty
imagefilledrectangle($im, 0, 0, $width, $height, $bgcolor);
 
// Make the background-color transparent
imagecolortransparent($im, $bgcolor);
 
// Add some shadow to the text if requested
if($_GET['shadow']){
  $shadoffset = $offset + 2;
  $shadow = imagecolorallocate($im, 220, 220, 220);
  imagettftext($im, $size, 0, 1, $shadoffset, $shadow, $font, $text);
}
 
// Add the text in the color chosen
imagettftext($im, $size, 0, 0, $offset, $use_color, $font, $text);	
 
// Set the content-type and print the image
header('Content-type: image/gif');
imagegif($im);

Simply call the dynamic font based image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO.

1

<img src="font.php?size=18&amp;w=400&amp;h=34&amp;shadow=y&amp;color=blue&amp;bgcolor=white&amp;text=My+Dynamic+Font+Based+Image" alt="My Dynamic Font Based Image" />

Some Examples:

  • Blue with a shadow on a white background
  • Black without a shadow on a white background
  • Orange with a shadow on a white background
  • Blue without a shadow on a white background
  • Black without a shadow on a white background
  • Orange without a shadow on a white background

How do we dynamically use this technique in conjunction with our site’s code? The text for our images come from the <?php the_title(); ?> call from WordPress. Hence, whatever text is set for the page or post title will be displayed in image form. No need to create static text images for our pages and posts.

1

<img src="font.php?size=20&amp;w=500&amp;shadow=y&amp;color=blue&amp;bgcolor=white&amp;text=<?php the_title(); ?>" alt="<?php the_title(); ?>" />

Room for improvement? Why yes there is always improvements that can be made to the code, some or our thoughts include:

  • Create an on the fly HEX color conversion based on the $color and $bgcolor variables
  • Determine the top offset based on the image height and the font size, allowing all text to align in the center of the image.
  • Auto width based on number of text characters. This could be tricky and may require a monospacing (fixed-width) font.
]]> http://camwebdesign.com/techniques/dynamic-font-based-images/feed/ 0