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

Question

So - at a client's request, I am in need of being able to resize an image not the standard WordPress way... but from an image pulled-in from a theme option. I can't simply use the custom_header area, as there will be two or three (I also have some options once the image is uploaded to let the user choose how the link should function (page, post, category, no link, external link, etc)). I'm using Options Framework Theme with great success and I can retrieve the image src just fine, it's a matter of if this can somehow be used in combination with the add_image_size() function normally used for post thumbnails. I'd REALLY rather not go the timthumb route and stick with WordPress APIs (I know that's a little contradictory to what I am doing in the first place...). Any help would be greatly appreciated. Thanks!

Answer 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;
    }

}

?>