How to use live images on local install?

Question

How to use live images on a local WP install? I want to do something like the code down here in the wp-config.php. Problem is that the siteurl must be a relative path and cant be a url. I want to set up a local environment to test some parts offline and need to show the images.

if ($_SERVER['SERVER_ADMIN'] == 'dev') {
  define('WP_HOME','http://localhost/siteurl.com/public_html/');
  define('WP_SITEURL','http://localhost/siteurl.com/public_html/');
  // use live images
  define( 'UPLOADS', 'http://siteurl.com/wp-content/uploads/' );
}

Answer 1

Try to filter the output URLs temporarily to replace them with online images, using the following code:

add_filter( 'wp_get_attachment_image_src', function ( $image, $attachment_id, $size ) {

    // For thumbnails
    if ( $size ) {
        switch ( $size ) {
            case 'thumbnail':
            case 'medium':
            case 'medium-large':
            case 'large':
                $image[0] = str_replace( 'localhost/', 'EXAMPLE.COM/', $image[0] );
                break;
            default:
                break;
        }
    } else {
        $image[0] = str_replace( 'localhost/', 'EXAMPLE.COM/', $image[0] );
    }
    return $image;
}, 10, 3 );

This will replace any string containing localhost with your online domain's name. However, you can't modify or do anything with the image's, it's just for correcting the URL for development purposes.

Note that you should use the domain name without http:// or any / before the domain's name.

Delete this function from your theme's functions.php after you are done with it.

Answer 2

The best way to do it is to use URL Rewrites.

This way you'll not have to do any change before uploading CODE to your server back again. Try the following CODE in your .htaccess file:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# custom rules for loading server images or any other uploaded media files
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^.*/uploads/(.*)$ http://siteurl.com/wp-content/uploads/$1 [L,R=301,NC]

# default WordPress rules
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Adjust your live domain to siteurl.com accordingly in the above code and your server images will be loaded when you develop from localhost.

Also, with this line: RewriteCond %{REQUEST_FILENAME} !-f, the web server will check first if the image is available in your localhost (with the exact same name), and load from server only if it's not available locally. If you want to load server image even if that same image exists locally, then simply remove that line.

Answer 3

I tweaked @scott answer to fit my needs with this variation:

# custom rules for loading server images or any other uploaded media files
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
RewriteRule ^(.*)$ https://siteurl.com/$1 [QSA,L]