If you do a lot of WordPress development for many clients, eventually you’ll end up with those local sites eating up a good portion of your computer’s hard drive space. Some of my clients have uploads folders that are +1gb. I used to have to just delete these local sites data and then redownload during development. Even after a recent purge, my htdocs folder takes up 26gb.

I recently came across a thread on StackExchange  that showed me another way.

The best way to accomplish this is to use URL Rewrites in your .htaccess files.

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. Make sure to place this at the very top, before any other rules inserted via security or caching plugins or WordPress core.

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

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

As I use Local, MAMP PRO, or Docker, I use local development domains such as site.localdev. These records are stored in my hosts file. So change localhost to your local domain of choice.

Also, with this line: RewriteCond %{REQUEST_FILENAME} !-f, the web server will check first if the image is available in your localhost (must have the exact same name and file path), and load the image from the 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.

Obviously, this is a situation in which you’ll want to make sure that you’re not tracking and pushing changes made to the .htaccess file through a GIT continuation integration system.

GOTCHA: I started developing off a Pantheon multi-dev environment and tried to retrieve images off of that server, to no avail. I spent an hour exploring alternatives to this before I realized that the reason these weren’t retrieving was because the site had a server level username/password on it. Making that site public solved my issue.

Or you could build this into your own mu-plugin

Having Problems?

For this to work, you need to make sure mod_rewrite apache module is loaded and overridable from .htaccess.

Make sure to clear your local browser cache after implementing this. Sometimes it helps to restart your local site as well.

How to make this more efficient

you can make this more efficient by skipping the .htaccess file and including your rules in the main Apache configuration file for your site, usually found within /etc/apache2/sites-available/ on Debian-based systems or /etc/httpd/sites-available/ on RedHat-based systems.

The advantage of placing your rules in the main Apache configuration is performance. Apache needs to read .htaccess files at runtime for each request, which can lead to inefficiency, especially if there are many .htaccess files. When rules are in the main configuration, they are loaded once at startup or reload.

Here’s how to include your rewrite rules in the main Apache configuration file:

  1. Open the Apache configuration file for your site in a text editor. You might need root access for this. The file is often named something like 000-default.conf or your-site-name.conf.bashCopy codesudo nano /etc/apache2/sites-available/your-site-name.conf
  2. Locate the <VirtualHost *:80> block or similar that corresponds to your site.
  3. Within this <VirtualHost> block, add your rewrite rules:apacheCopy code<VirtualHost *:80> ServerName solo.test # Other configurations <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{HTTP_HOST} ^solo.test$ RewriteRule ^.*/uploads/(.*)$ https://staging-soloio.pantheonsite.io/wp-content/uploads/$1 [L,R=301,NC] </IfModule> </VirtualHost>
  4. Save your changes and exit the editor.
  5. To apply your changes, reload the Apache configuration:bashCopy codesudo systemctl reload apache2

This should replicate the functionality you had in your .htaccess file but with better performance

NGINX option

You can achieve similar functionality with Nginx by editing the Nginx configuration file (usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/your-site-config).

Here’s how you can translate your .htaccess rules to an Nginx configuration:

nginxCopy code

server { listen 80; server_name solo.test; location / { # Your usual configuration here } location ~ ^/.*/uploads/(.*)$ { if (!-f $request_filename) { rewrite ^/.*/uploads/(.*)$ https://solo.io/wp-content/uploads/$1 permanent; } } }

Here’s the breakdown:

  • location ~ ^/.*/uploads/(.*)$ matches any URL path that contains “/uploads/” and captures everything after it into $1.
  • if (!-f $request_filename) checks whether the requested file exists.
  • rewrite ^/.*/uploads/(.*)$ https://solo.io/wp-content/uploads/$1 permanent; performs the redirect if the file is not found.

After editing your Nginx configuration, don’t forget to reload or restart the Nginx service to apply the changes. You can do this with one of the following commands:

  • sudo nginx -s reload
  • sudo systemctl reload nginx

Note that the if directive is generally discouraged in Nginx for performance reasons, but its use for checking a file’s existence is one of the cases where it’s acceptable to use.


Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.