4

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/' );
}
6
  • WordPress needs to save, delete, crop etc the images inside the upload folder. How can do it if it is in a different server and through the HTTP protocol? Why don't you just upload a few images just for testing?
    – Laxmana
    Feb 21, 2017 at 12:40
  • I only need to display the images not to upload it locally. Its extra work and should be easy to use the live online images because they exist already its only an another url Feb 21, 2017 at 12:41
  • I don't think uploading 2-3 photos will be that of an extra work. You don't need to upload them all.
    – Laxmana
    Feb 21, 2017 at 12:42
  • Also you are confusing what is a URL and what is a path to a system folder.
    – Laxmana
    Feb 21, 2017 at 12:43
  • but that's not my question ;) is it possible to set up an local environment like that? I can show a client a local version of a new feature for example and it would be nice if the images are shown Feb 21, 2017 at 12:44

3 Answers 3

0

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.

7
  • This is working! But not all images urls are new, thumbnails are not working, is there also an solution for that? Feb 21, 2017 at 13:14
  • hmm, i removed the if() to make sure everything works. How are the links to your thumbnails? still using localhost or totally broken after the code?
    – Johansson
    Feb 21, 2017 at 13:20
  • No broken code maybe it is because it are woocommerce images? are they use an another filter src? Feb 21, 2017 at 13:21
  • I updated the answer for thumbnails. See if it works. Btw i haven't worked with wooCommerce yet. If you can tell me the function that renders the images, i can filter it for you.
    – Johansson
    Feb 21, 2017 at 13:24
  • Nope this version doesn't do anything, the previous is fine for now for me if you didn't have another update :D Feb 21, 2017 at 13:30
10

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.

4
  • Idea looks good but not working for me with MAMP, some additional settings are needed? Feb 21, 2017 at 20:03
  • You need to make sure mod_rewrite apache module is loaded and overridable from .htaccess
    – Scott
    Feb 22, 2017 at 11:50
  • 3
    This should definitely be the correct answer. So good.
    – skolind
    Mar 27, 2018 at 10:55
  • Instead of checking if it's local RewriteCond %{HTTP_HOST} ^localhost$, I'd see if it's not production RewriteCond %{HTTP_HOST} !^example.com$ to account for staging environments. Aug 19, 2020 at 13:39
1

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]

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.