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 WordPressConclusion
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.
