12

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!

5
  • 1
    Ok - I think I may have accomplished this: <?php $main_image = of_get_option('of_main_image'); $thepost = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM $wpdb->posts WHERE guid = '$main_image'" ) ); $theID = $thepost->ID; echo wp_get_attachment_image( $theID, 'homepage_main' ); ?> Anyone see any security holes or oddities here? Might be useful for others as well. Thanks!
    – Zach
    Nov 29, 2011 at 19:36
  • Since the 'guid' is where the image URL is stored (the Options Framework uses the WooThemes Media Uploader to store this data as an attachment post_type) then I can access the data as such :)
    – Zach
    Nov 29, 2011 at 20:34
  • possible duplicate of New image size version only for the Featured Image file
    – kaiser
    Jul 17, 2012 at 15:35
  • 1
    Just added this for completeness. Shouldn't get closed, as another solution won't harm.
    – kaiser
    Jul 17, 2012 at 15:36
  • 1
    I've faced this problem on so many websites that I've built. I couldn't find a solution that works in an optimal way, so I built my own plugin! I hope this helps! wordpress.org/plugins/fly-dynamic-image-resizer Sep 30, 2015 at 13:50

1 Answer 1

7

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

}

?>
7
  • Heres a much simpler function (no multi-site support, but does anyone in their right mind use multi-site?) github.com/BrettMW/img_resize May 21, 2015 at 0:08
  • Also a ready usable solution github.com/bueltge/WP-Image-Resizer, like the link from @kaiser
    – bueltge
    Oct 1, 2015 at 4:36
  • @bueltge, it works, but do you have any idea why the images are blurred? It seems it makes all the images 150x150. Any idea why is that happening?
    – Ionut
    Mar 9, 2017 at 10:53
  • @bueltge, nevermind. I've found the problem. I had to set the size to full as second parameter when using wp_get_attachment_image_url()
    – Ionut
    Mar 9, 2017 at 10:56
  • @bueltge, scratch that. It seems that it is not working...can you please help me with this? When I add the image size as full images have different sizes.
    – Ionut
    Mar 9, 2017 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.