When you develop a website, that has already gone live, you usually have to get the latest version of the database to test things. You also need a WordPress system locally with all the plugins and themes that are used on the live website. But how about all the media files that are stored in the uploads folder and that can easily be some gigabytes in size? Well, many times you will need them as well, especially when working on the design. But which ones do you really need locally and how do you keep them up to date with the live website? The good news is: you don’t need to and this blog post will show you an easy way how to solve it differently.

Let’s assume you have just imported a fresh copy of the live database into your local development system. You are probably not seeing some of the files, because as you have updated the URLs in your database to your local domain, those files are not found by the local webserver. You could now connect to the remote server and synchronize the upload folder, potentially downloading many megabytes or gigabyte. If you have multiple projects in development, this will quickly fill up your local hard drive. Or you could just remove the uploads folder alltogether (or at least the uploaded media files in it) and use the files from the live website.

Serve missing files from the live server

For a local environment running on an Apache webserver, you just have to add some lines into your .htaccess files:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^wp-content/uploads/(.*) https://xyz.com/wp-content/uploads/$1 [R=302,L]
</IfModule>

Insert this at the beginning of your .htaccess file and it will do the following.

How it works

The Apache webserver will check, if a file or folder exists locally using two RewriteCond statements. If the file/folder is not found, it will use a RewriteRule for all queries to the wp-content/uploads folder and redirect the query to the domain of your live site.

This will effectively load all images from the remote server. If caching headers are set correctly on the live server, the media files will be downloaded only once.

With this little trick, you can see all the lates media files from the live website without the need to download them. You can even edit them in the media library. Once you save changed being made to a file in the media library, WordPress will store a copy of the live version on the local uploads folder including all other generated images sizes. These changes would not be “synced back” to the live website, but you can test changes easily on your local environment.

Some caveats

This approach works perfectly for most cases. But it will not work, if a theme or plugin checks, if a file exists on the server. They will usually use some PHP function to check the upload folder, if the required files does exists. As this fix is solved by the webserver, this PHP check would result in a “miss” of the specfic file.

As most files being checked for existance are usually not stored in the uploads folder, but in folders of the plugins and themes, it should be a huge issue. But in case you ran into such a situation, you have to download the files needed. Finding them might be a bit tricky though.

A second issue is the necessity of a connection to the live webserver. You might work on a website locally, without an internet connection, or a very slow one. While writing this blog post, I’m just taking a train which can result in bad or lost connections. So if you really need the files to work locally, maybe still sychronize some media files.

Does it work for other environments, too?

The same is possible when you use an nginx server in your development environment. But because you usually can not simply add a file to your WordPress document root, you have to add the following lines to your nginx server configuration:

location ~ ^/wp-content/uploads/(.*)$ {
        try_files $uri @missing;
}
location @missing {
	return https://xyz.com$uri;
}

Conclusion

Whenever you make changes to a website, you should work on a local copy. But keeping those copies up to date can be a time and ressource heavy task. In excluding the media files from synchronisations, you can be up running a lot faster and will save a lot of local disk space.