How to Load Production Images in WordPress Dev with .htaccess

The .htaccess file is a configuration file used by the Apache webserver to customize the server’s behavior. WordPress uses this file to manage its URL rewriting rules. Below is a code block that modifies the default WordPress rules to allow for the loading of images from a production site instead of the local development site.

Loading images from production instead of development can be useful in scenarios where you have a large number of media files on the production site and don’t want to download them to the development environment. This approach can help speed up the development process and reduce the amount of storage space required for the development site. Additionally, it can help ensure that the site’s design and layout look consistent with the production site since the same images are being used.

There may be endless reasons why would you like to do it, but let’s get to code.

Solution

In the .htaccess file, WordPress adds a small code block by default, which starts with # BEGIN WordPress and ends accordingly with # END WordPress.

Now, inside this block, we need to insert the code lines that will rewrite the image URLs. It’ll basically show the normal image URLs, but will actually load them from production or a CDN, you name it…

Find the line that says RewriteRule ^index\.php$ - [L] and exactly after it insert this code block by replacing example.com with your prod server address:

# If images not found on development site, load from production
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^wp-content/uploads/[^/]+/.+\.(jpe?g|png|gif)$ https://example.com/$0 [R=302,L]


If you want to get into technical details here’s how does it work:
This code checks if the requested file is not found on the local development site (RewriteCond %{REQUEST_FILENAME} !-f).
If it’s an image file in the wp-content/uploads/ directory (RewriteRule ^wp-content/uploads/[^/]+/.+.(jpe?g|png|gif)$), then the rule redirects the request to the corresponding URL on the production site (https://example.com/$0).
The $0 variable represents the entire matched string from the RewriteRule pattern.
The [R=302,L] flags indicate that it’s a temporary redirect (302) and that no further rules should be processed (L).

Example of a full code block

Please note that the code within the WordPress begin and end tags may differ on your site. Therefore, rather than copying and pasting the code below, use it as an example of how I implemented it on my site and modify it to suit your needs.

# BEGIN WordPress
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# If images not found on development site, load from production
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^wp-content/uploads/[^/]+/.+\.(jpe?g|png|gif)$ https://example.com/$0 [R=302,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Conclusion

Overall, this code block modifies the default WordPress URL rewriting rules to allow for the loading of images from a production site when they are not found on the local development site. This can be useful in scenarios where developers want to test their site’s functionality without having to download all the media files from the production site.

Member since January 2, 2019

As a seasoned WordPress developer with expertise in various tech stacks and languages, I bring years of experience to every project I undertake. My passion for coding and dedication to delivering exceptional work ensures that every project I undertake is of the highest quality. I specialize in creating custom themes, developing plugins, and building full-scale web systems. By staying up-to-date with the latest industry trends and best practices, I am able to incorporate cutting-edge solutions into my work.

Comments

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