CAM Web Design » PHP

Simplify the WordPress Admin sidebar navigation

Corey — Mon, 24 Jan 2011 07:35:49 +0000

Want to remove some of the root WordPress Admin sidebar navigation? We have a client that was mainly interested in writing pages and managing media for those pages, they were not going to use Posts, Comments or Links in the administration area. We set them up as Editors on a WordPress Multisite installation, below is how we removed those items from appearing in the navigation.

First we define a new function, we used remove_admin_menu_items(). In this function we define an array $remove_menu_items that contains the menu items we wish to remove from the admin navigation. The function is designed to step through WordPress’ multidimensional array $menu, getting each $menu item name by use of the PHP function explode(). It then checks if that $menu item name is in our $remove_menu_items array using the PHP function in_array(). If the $menu item name does appear, then that item is removed from the multidimensional array $menu, by use the PHP function unset().

function remove_admin_menu_items() {
  $remove_menu_items = array(__('Posts'),__('Links'), __('Comments'));
  global $menu;
  end ($menu);
  while (prev($menu)){
    $item = explode(' ',$menu[key($menu)][0]);
    if(in_array($item[0] != NULL?$item[0]:"" , $remove_menu_items)){
      unset($menu[key($menu)]);}
    }
  }

We then initiate the remove_admin_menu_items() function using the add_action() WordPress function as shown below.

1	add_action('admin_menu', 'remove_admin_menu_items');

Putting it all together yields the following code to be placed in your theme’s functions.php file:

/* Clean up the admin sidebar navigation *************************************************/
function remove_admin_menu_items() {
  $remove_menu_items = array(__('Posts'),__('Links'), __('Comments'));
  global $menu;
  end ($menu);
  while (prev($menu)){
    $item = explode(' ',$menu[key($menu)][0]);
    if(in_array($item[0] != NULL?$item[0]:"" , $remove_menu_items)){
      unset($menu[key($menu)]);}
    }
  }
add_action('admin_menu', 'remove_admin_menu_items');

All you’ll need to change is the array of items to remove in the $remove_menu_items array. In our example we removed: Posts, Links and Comments. Other root level WordPress admin sidebar navigation items available for removal are Media, Pages, Appearance, Plugins, Users, Tools and Settings.Similar Posts:

Redefine Twenty Ten header image width and height

Corey — Sun, 23 Jan 2011 05:59:24 +0000

How do you go about redefining the WordPress Twenty Ten header image width and height? We recently used the Twenty Ten theme as a Parent Theme for a multi-site installation for a client. We wanted to retain the use of the custom header image, but wanted a different image width and height. It is accomplished with a few lines of code in the Twenty Ten child theme’s functions.php file. You are using a child theme, aren’t you?

The answer to this one is just so simple it needs nearly no explanation. Simply redefine two varaibles HEADER_IMAGE_WIDTH, and HEADER_IMAGE_HEIGHT. For our purposes we needed 800x182 to fit into the template. Below is the code to be placed in your theme’s functions.php file simply add the image size to suite your needs:

1
2
3

/* Redefine the header image width and height ********************************************/
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 800 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 182 ) );

UPDATE: This also works for the WordPress Twenty Eleven theme.
Similar Posts:

Remove default WordPress Twenty Ten header images

Corey — Sun, 23 Jan 2011 05:44:30 +0000

How do you remove those pesky default header images included in the Twenty Ten WordPress theme. We recently used the Twenty Ten theme as a Parent Theme for a multi-site installation for a client. We wanted to retain the use of the custom header image, but didn’t want the default header images to be visible. It is accomplished with a few lines of code in the Twenty Ten child theme’s functions.php file. You are using a child theme, aren’t you?

First define a new function, we used remove_twenty_ten_headers(). We use the unregister_default_headers() WordPress function to un-register as many as we want. In our example we removed them all.

function remove_twenty_ten_headers(){
    unregister_default_headers( array(
        'berries',
        'cherryblossom',
        'concave',
        'fern',
        'forestfloor',
        'inkwell',
        'path' ,
        'sunset')
    );
}

We then initiate the new remove_twenty_ten_headers() function using the add_action() WordPress function as shown below. We make sure to call our function after the theme setup has run to be sure our function is called after register_default_headers() has already added the headers we want to remove.

1	add_action( 'after_setup_theme', 'remove_twenty_ten_headers', 11 );

Putting it all together yields the following code to be placed in your theme’s functions.php file:

/* Remove default twenty ten images ***********************************************/
function remove_twenty_ten_headers(){
    unregister_default_headers( array(
        'berries',
        'cherryblossom',
        'concave',
        'fern',
        'forestfloor',
        'inkwell',
        'path' ,
        'sunset')
    );
}
add_action( 'after_setup_theme', 'remove_twenty_ten_headers', 11 );

How simple is that!Similar Posts:

Remove Widgets from Twenty Ten WordPress theme

Corey — Sun, 23 Jan 2011 03:50:37 +0000

So you want to remove some of the “stock” Widget Areas from the WordPress Twenty Ten theme, how do you go about doing this? We will be using the WordPress function unregister_sidebar(). It is accomplished with a few lines of code in your Twenty Ten child theme’s functions.php file. You are using a child theme, aren’t you?

First define a new function, we used remove_widget_area(). Inside this function we un-register the desired “stock” Widget Areas we don’t want or need. Twenty Ten comes with the following “stock” Widget Areas: primary-widget-area, secondary-widget-area, first-footer-widget-area, second-footer-widget-area, third-footer-widget-area and fourth-footer-widget-area.

function remove_widget_area() {
	unregister_sidebar( 'secondary-widget-area' );
	unregister_sidebar( 'first-footer-widget-area' );
	unregister_sidebar( 'second-footer-widget-area' );
	unregister_sidebar( 'third-footer-widget-area' );
	unregister_sidebar( 'fourth-footer-widget-area' );
}

We then initiate the new remove_widget_area() function using the add_action() WordPress function as shown below.

1	add_action( 'admin_init', 'remove_widget_area');

Putting it all together yields the following code to be placed in your theme’s functions.php file:

/* Remove "extra" Twenty Ten Widget Areas *******************************************************/
function remove_widget_area() {
	unregister_sidebar( 'secondary-widget-area' );
	unregister_sidebar( 'first-footer-widget-area' );
	unregister_sidebar( 'second-footer-widget-area' );
	unregister_sidebar( 'third-footer-widget-area' );
	unregister_sidebar( 'fourth-footer-widget-area' );
}
add_action( 'admin_init', 'remove_widget_area');

It’s just that simple, now it’s your turn!
Similar Posts:

Serve Watermarked Images with PHP

Corey — Sun, 15 Aug 2010 15:41:02 +0000

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 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:

//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:

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);
 
  /*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.

Similar Posts:

Admin Link Shortcode for Thematic Footer Text

Corey — Sun, 15 Aug 2010 12:07:03 +0000

Thematic comes with a variety of shortcodes that can be added to the footer text in the Thematic Options. We wanted to add the Admin link to the footer, but there is no predefined Thematic shortcode to do this. This technique shows how to create a custom Admin shortcode for Thematic. It is accomplished with a few lines of code in your Thematic child theme’s functions.php file. You are using a child theme, aren’t you?

First define a new function, we used thmfooter_admin_link(). We return the wp_register() WordPress function, to yield the Admin link. Be sure to set the wp_register() $echo parameter to false, otherwise the Admin link will automatically print. We’ll also set the $before and $after parameters as needed.

1
2
3

function thmfooter_admin_link() {
    return wp_register('| ', '', false);
}

Lastly we register the shortcode, naming it ‘admin-link’, using the add_shortcode() WordPress function as shown below.

1	add_shortcode('admin-link', 'thmfooter_admin_link');

Usage of our new shortcode is accomplished by simply adding [admin-link] in the footer text of the Thematic Options.

Thematic Options

Putting it all together, we have the following code:

//Add Admin shortcode to the siteinfo footer***************************************************************************
function thmfooter_admin_link() {
    return wp_register('| ', '', false);
}
add_shortcode('admin-link', 'thmfooter_admin_link');

Yep, it’s just that simple.Similar Posts:

Using HTML5 with your Thematic Child Theme

Troy — Sun, 15 Aug 2010 02:32:38 +0000

In the interest of keeping our websites “future-proof”, I began investigating using the HTML5 DOCTYPE.

As it turns out, the switch for most WordPress themes will be trivial:

Change the doctype declaration to: <!DOCTYPE html>
Remove the (now defunct) profile="..." attribute from the opening tag.
Remove the unnecessary tag.
Add the tag.

Normally, this would be easily found in the header.php file of your theme. In fact, the default WordPress theme (‘TwentyTen‘ as of WP3) automatically uses the HTML5 doctype declaration.

Thematic, however, uses the traditional “XHTML 1.0 Transitional” doctype that WordPress has used for years. In order to use the HTML5 doctype, you will need to override four standard Thematic functions: thematic_create_doctype, language_attributes, thematic_head_profile and thematic_create_contenttype within your child theme’s functions.php file (you are using a child theme, aren’t you?), thusly:

//replace the standard doctype declaration and html tag opening...
function html5_create_doctype($content) {
 $content = "";
 $content .= "\n";
 $content .= ";
 return $content;
}
add_filter('thematic_create_doctype', 'html5_create_doctype');
 
//replace the lang attribute in the opening  tag...
function html5_language_attributes($content) {
	$content = "lang=\"en\"";
	return $content;
}
add_filter('language_attributes', 'html5_language_attributes');
 
//replace the  tag opening to remove the now defunct profile attribute and add the  tag...
function html5_head($content) {
 $content = "";
 $content .= "\n";
 $content .= "\"utf-8\">";
 $content .= "\n";
 return $content;
}
add_filter('thematic_head_profile', 'html5_head');
 
//remove the now defunct  tag...
function html5_create_charset($content) {
 $content = "";
 return $content;
}
add_filter('thematic_create_contenttype', 'html5_create_charset');

Similar Posts:

WordPress 3.0 Menu Management

Corey — Fri, 09 Jul 2010 08:28:02 +0000

One of the best all-around additions to WordPress 3.0 is custom Menu management. So how do you implement custom menus into your WordPress site? Simply add a few lines of code in your theme’s functions.php file, then add the menus where desired in your theme. Yes, it requires adding php code to your theme’s files, but it’s simple and easy to understand.

First we register the ability for your theme to use custom menus using the add_theme_support() WordPress function.

1	add_theme_support('menus');

Next we define the custom menus. For this example we’ll create two menus: menu-1 and menu-2, and name them “Main Navigation’ and ‘Footer Navigation’ respectively. We accomplish this in a new function ‘register_site_menus’, using the register_nav_menus() WordPress function.

function register_site_menus() {
	register_nav_menus(
		array(
			'menu-1' => __( 'Main Navigation' ),
			'menu-2' => __( 'Footer Navigation' )
		)
	);
}

We then initiate the new register_site_menus() function using the add_actions() WordPress function as shown below.

1	add_action( 'init', 'register_site_menus' );

Putting it all together yields the following code to be placed in your theme’s functions.php file:

add_theme_support('menus');
 
function register_site_menus() {
	register_nav_menus(
		array(
			'menu-1' => __( 'Main Navigation' ),
			'menu-2' => __( 'Footer Navigation' )
		)
	);
}
 
add_action( 'init', 'register_site_menus' );

Next we add ‘menu-1′ our ‘Main Navigation’ menu, using the wp_nav_menu() WordPress function where we want that menu to appear in your theme (header, sidebar, etc.). We also chose to not have a container automatically added to our menu for this example below.

wp_nav_menu( array( 
	'theme_location' => 'menu-1',
	'container' => ''
) );

We’ll add ‘menu-2′ our ‘Footer Navigation’ menu, using the same function but, we also give the menu a custom CSS id of ‘footer-nav’. You can read all about the parameters of the wp_nav_menu() function yourself rather than bore you with the details here.

wp_nav_menu( array(
	'theme_location' => 'menu-2',
	'container' => '',
	'menu_id' => 'footer-nav'
) );

Similar Posts:

WordPress Create Custom Roles and Capabilities

Corey — Sat, 12 Jun 2010 01:17:08 +0000

So you want to add a custom Role to your WordPress site to add more flexibility when assigning users their role, what do you do? Simply add a role, with a few lines of code in your theme’s functions.php file, using WordPress’ add_role() function, as defined below.

1	add_role( $role_name, $display_name, $capabilities );

The example below adds a role of Video Manager with a custom cabability of ‘manage videos’.

1	add_role( 'video_manager, 'Video Manager', array( 'manage_videos' ) );

NOTE: Once you add this code to your functions.php file and view any page on your site to make the role addition, you can and should comment it out so that it doesn’t run on every page view.

Now, how do we use this new role with the new capability you ask? Simply use the WordPress current_user_can() function to check the user’s capability.

1
2
3

if ( current_user_can( 'manage_videos' ) ) {
    // let them manage those videos!
}

This technique can be combined with our WordPress Role Capability Restriction technique to add even more capabilities to your new custom role. Simply create your new role then use it in the get_role() function call detailed in our technique.Similar Posts:

WordPress Role Capability Restriction

Corey — Wed, 09 Jun 2010 06:59:23 +0000

So you want to restrict user capabilities of a role on your WordPress site from editing and deleting other user’s pages and posts, but you can’t seem to find an easy-to-use plugin that meets your needs, what do you do? Simply restrict that role, with a few lines of code in your theme’s functions.php file, using WordPress’ get_role() and remove_cap() functions. The example below is how to restrict the author role.

$role = get_role('author');
$role->remove_cap('edit_others_pages');
$role->remove_cap('edit_others_posts');
$role->remove_cap('delete_others_pages');
$role->remove_cap('delete_others_posts');

Pretty simple huh? That’s what I thought when I learned how easily this can be accomplished.

So what’s actually going on with the code? First, we create a variable $role populated with the author’s capabilities. Then we remove the ability of the authors to ‘edit_others_pages’, and other capabilities as desired. This code performs a database change to the role.

NOTE: Once you add this code to your functions.php file and view any page on your site to make the capability changes, you can and should comment it out so that it doesn’t run on every page view.

How do you reverse this you may ask? Simple, use WordPress’ add_cap() function, as if WordPress would let us down.

$role = get_role('author');
$role->add_cap('edit_others_pages');
$role->add_cap('edit_others_posts');
$role->add_cap('delete_others_pages');
$role->add_cap('delete_others_posts');

This works great when you’ve Created Custom Roles and need to assign capabilities to those new roles.

Below is real-world code we’ve used on a site, and how we left it commented for future reference.

/* Begin Editor Restriction  ****************/
 
/* Enable Restriction Below */
//$role = get_role('editor');
//$role->remove_cap('edit_others_pages');
//$role->remove_cap('edit_others_posts');
//$role->remove_cap('delete_others_pages');
//$role->remove_cap('delete_others_posts');
//$role->remove_cap('manage_links');
//$role->remove_cap('moderate_comments');
 
/* Disable Restriction Below */
//$role = get_role('editor');
//$role->add_cap('edit_others_pages');
//$role->add_cap('edit_others_posts');
//$role->add_cap('delete_others_pages');
//$role->add_cap('delete_others_posts');
//$role->add_cap('manage_links');
//$role->add_cap('moderate_comments');
 
/* End Editor Restriction  ***************/

Similar Posts:

Serve Resized Images with PHP

Corey — Mon, 11 Jan 2010 19:33:00 +0000

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.

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.

  // 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.

  // 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.

  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.

  // 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.

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.

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

Similar Posts:

PHP Image Manipulation Functions

Corey — Sat, 09 Jan 2010 20:14:04 +0000

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().

/*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().

/*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().

/*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().

/*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().

/*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);
  }
}

Similar Posts:

Dynamic Font-Based Images

Corey — Sat, 02 Jan 2010 19:26:12 +0000

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:

// 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.

Some Examples:

How do we dynamically use this technique in conjunction with our site’s code? The text for our images come from the 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	" alt="" />

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.

Similar Posts:

Hello World! – PHP Style

Corey — Fri, 01 Jan 2010 19:32:45 +0000

What would a list of How-To-Techniques be on a WordPress site without a “Hello World!” example in PHP?

We think lacking at best, so let’s play with some simple php code in the examples below.

1	print "Hello, World!";

Alternatively we could write it this way:

1	echo "Hello, World!";

Both Yield Hello, World!

If you don’t understand the significance of the PHP “Hello World!” example, then you must not know the advantages server-side programming languages provide. The use of HTML to print Hello World! is simple, but having it done dynamically on the fly is quite another thing. Server-side programming has changed the face of how the web works, and PHP has truly fueled the open source revolution.

Now we’ll move on to the question, “What is the difference between the PHP print() and echo() language constructs”?

The answer, not much – BUT – echo is faster than print. Print returns an int value and echo returns no value. Example: $value = print "Hello World"; here $value will be set to 1. So print can be used in complex expression where you can’t use echo.

We can however, use echo is some creative short hand statements, like this one.

1	echo($text == 'hi') ? "Hello World!" : "Goodbye World!" ;

Suppose the variable $text was set to “hi”, this would print Hello World!. If $text was set to anything else then it will print Goodbye World!.Similar Posts: