How to Dynamically Resize WordPress Image On-The-Fly (custom field/theme option)

1 comment

1. Re-size WordPress images on the fly using built-in WordPress functions.

   Use the vt_resize function to dynamically re-size WordPress images located in a custom field, featured image, uploads directory, NextGen Gallery WordPress plugin, or even an external link to an offsite image.

   It is very simple to use, just copy/paste the code below into your WordPress theme’s functions.php file of your currently activated WordPress theme.

   Then, where ever you need to re-size an image on the fly, just place a call to that function following the parameter usage explained in the comments of the function.

   Here is an example of automatically getting the Post ID, the Post itself, the Custom Field values of the Post, and dynamically resizing the image from the Custom Field containing the image to be dynamically re-sized on-the-fly.

   <?php
   
   # Place this in your functions.php
   function get_postID() {
   
       global $wp_query;
   
       return $wp_query->post->ID;
   
   }
   
   ?>
   
   <?php
   
   # Place the following lines where you want to perform this action.
   $postID = get_postID(); // Obtain the current Post ID.
   $post   = get_post( $postID ); // Takes the current Post ID and returns the database record. (alternatively, `global $post`)
   $custom = get_post_custom( $post->ID ); // Returns a multidimensional array with all custom fields of the Post.
   $image  = $custom['field-slug'][0]; // Specify the array key of the Custom Field containing the image.
   
   # The first parameter is 0. Meaning, will not use a Post Attachment.
   # The second parameter is the image URL from Post's Custom Field value.
   # The third and fourth parameters are the width and height of the image after the re-size is performed.
   # The fifth parameter means crop this image.
   
   $resizedImage = vt_resize( 0, $image, 190, 338, true ); // Dynamically re-size image on the fly.
   
   echo '<img src="' . $resizedImage[ 'url' ] . '" width="' . $resizedImage[ 'width' ] . '" height="' . $resizedImage[ 'height' ] . '" title="' . $post->post_title . '" alt="' . $post->post_title . '" />'; // The image properties are held in an array. (Use print_r($resizedImage) for array properties.)
   
   ?>
   

   Re-size WordPress images on the fly vt_resize with multi-site support

   • Description: Re-size images dynamically using WordPress built in functions.
   • Author: Victor Teixeira
   • Requirements: PHP 5.2+, WordPress 3.2+

   I reformatted the source code so it’s more readable for my own eyes. If you want the original formatted source code, visit the link above.

   <?php
   
   if ( ! function_exists( 'vt_resize' ) ) {
   
       /**
        * Resize images dynamically using wp built in functions
        * Victor Teixeira
        *
        * php 5.2+
        *
        * Exemplo de uso:
        *
        * <?php
        * $thumb = get_post_thumbnail_id();
        * $image = vt_resize($thumb, '', 140, 110, true);
        * ?>
        * <img src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
        *
        * @param int    $attach_id
        * @param string $img_url
        * @param int    $width
        * @param int    $height
        * @param bool   $crop
        *
        * @return array|void
        */
       function vt_resize( int $attach_id = 0, string $img_url = '', int $width = 0, int $height = 0, bool $crop = false ) {
   
           if ( $attach_id ) {
   
               #  this is an attachment, so we have the ID
               $image_src = wp_get_attachment_image_src( $attach_id, 'full' );
               $file_path = get_attached_file( $attach_id );
   
           } elseif ( $img_url ) {
   
               #  this is not an attachment, let's use the image url
               $file_path = parse_url( $img_url );
               $file_path = $_SERVER['DOCUMENT_ROOT'] . $file_path['path'];
   
               #  Look for Multisite Path
               if ( file_exists( $file_path ) === false ) {
   
                   global $blog_id;
   
                   $file_path = parse_url( $img_url );
   
                   if ( preg_match( '/files/', $file_path['path'] ) ) {
   
                       $path = explode( '/', $file_path['path'] );
   
                       foreach ( $path as $k => $v ) {
   
                           if ( $v == 'files' ) {
                               $path[ $k - 1 ] = 'wp-content/blogs.dir/' . $blog_id;
                           }
   
                       }
   
                       $path = implode( '/', $path );
                   }
   
                   $file_path = $_SERVER['DOCUMENT_ROOT'] . $path;
   
               }
   
               // $file_path = ltrim( $file_path['path'], '/' );
               // $file_path = rtrim( ABSPATH, '/' ).$file_path['path'];
               $orig_size    = getimagesize( $file_path );
               $image_src[0] = $img_url;
               $image_src[1] = $orig_size[0];
               $image_src[2] = $orig_size[1];
   
           }
   
           $file_info = pathinfo( $file_path );
   
           #  check if file exists
           $base_file = $file_info['dirname'] . '/' . $file_info['filename'] . '.' . $file_info['extension'];
   
           if ( ! file_exists( $base_file ) ) {
               return;
           }
   
           $extension = '.' . $file_info['extension'];
   
           #  the image path without the extension
           $no_ext_path      = $file_info['dirname'] . '/' . $file_info['filename'];
           $cropped_img_path = $no_ext_path . '-' . $width . 'x' . $height . $extension;
   
           #  checking if the file size is larger than the target size
           #  if it is smaller or the same size, stop right here and return
           if ( $image_src[1] > $width ) {
   
               #  the file is larger, check if the resized version already exists (for $crop = true but will also work for $crop = false if the sizes match)
               if ( file_exists( $cropped_img_path ) ) {
   
                   $cropped_img_url = str_replace( basename( $image_src[0] ), basename( $cropped_img_path ), $image_src[0] );
   
                   $vt_image = array(
                       'url'    => $cropped_img_url,
                       'width'  => $width,
                       'height' => $height
                   );
   
                   return $vt_image;
   
               }
   
               #  $crop = false or no height set
               if ( $crop == false OR ! $height ) {
   
                   #  calculate the size proportionaly
                   $proportional_size = wp_constrain_dimensions( $image_src[1], $image_src[2], $width, $height );
                   $resized_img_path  = $no_ext_path . '-' . $proportional_size[0] . 'x' . $proportional_size[1] . $extension;
   
                   #  checking if the file already exists
                   if ( file_exists( $resized_img_path ) ) {
   
                       $resized_img_url = str_replace( basename( $image_src[0] ), basename( $resized_img_path ), $image_src[0] );
   
                       $vt_image = array(
                           'url'    => $resized_img_url,
                           'width'  => $proportional_size[0],
                           'height' => $proportional_size[1]
                       );
   
                       return $vt_image;
   
                   }
   
               }
   
               #  check if image width is smaller than set width
               $img_size = getimagesize( $file_path );
   
               if ( $img_size[0] <= $width ) {
                   $width = $img_size[0];
               }
   
               #  Check if GD Library installed
               if ( ! function_exists( 'imagecreatetruecolor' ) ) {
   
                   echo 'GD Library Error: imagecreatetruecolor does not exist - please contact your webhost and ask them to install the GD library';
   
                   return;
               }
   
               #  no cache files - let's finally resize it
               $new_img_path = image_resize( $file_path, $width, $height, $crop );
               $new_img_size = getimagesize( $new_img_path );
               $new_img      = str_replace( basename( $image_src[0] ), basename( $new_img_path ), $image_src[0] );
   
               #  resized output
               $vt_image = array(
                   'url'    => $new_img,
                   'width'  => $new_img_size[0],
                   'height' => $new_img_size[1]
               );
   
               return $vt_image;
   
           }
   
           #  default output - without resizing
           $vt_image = array(
               'url'    => $image_src[0],
               'width'  => $width,
               'height' => $height
           );
   
           return $vt_image;
       }
   
   }
   
   ?>
   

   Log in to Reply