Dealing with images when developing on localhost with wordpress

Many developers tend to work on new features directly on the production server, asserting that configuring a wordpress development environment locally for a site already online has the following disadvantages:

• Too much time to configure
• Too much disk space occupied by images
• It's just a website...

Ignoring the last point, in my mind I always think "We are developers, We are smart!" regardless of what we are developing: webapp, website in wordpress or a cooking recipe.

A developer uses methodologies and tools to maximize the result with minimal effort (sometimes 😂).

Now I'll show you my personal recipe of how I prepare my local development environment for a wordpress site.

Before start

I assume you have a minimum of experience in developing websites on wordpress.

In this post I will not cover the configuration of the AMP stack, however there are several solutions on the market such as MAMP, Vagrant or Valet.

Cloning and configuring

When I set up my environment I generally start with these steps:

1. Download wordpress in your local environment making sure to have the same wordpress version as the online website.
2. Download themes and plugins from the remote site
3. Dump the sql database from the remote server and import it into your local mysql server.
4. Review your local wp-config.php file to make your wordpress site start correctly.

It may seem like a lot of work, but you only do it once.

After importing the the database I usually apply a search and replace to change the hostname. For example, if the published website address is www.exmaple.com I will replace it with www.example.com.local using the wp-cli tool.

wp search-replace 'www.example.com' 'www.example.com.local'

You may also use sed command from the terminal to apply the replacement directly in the dump file before importing it.

sed -i.bak 's/www.example.com/www.example.com.local/g' your-wordpress-db-dump-file.sql

Both approach are fine for me.

Be careful, wordpress uses the serialize and unserialize functions to save and restore several type of data in the database so this operation could break some configuration in your theme or plugins that use these functions to save information related to the site hostname.

Tweaking the .htaccess

We don't need to download all the images from the remote site because these are already available online right? So this is where our trick begins.

Assuming our website is available at the address www.example.com add these lines to your .htaccess file after the RewirteBase directive.

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule (.*?)(\.gif|\.jpe?g|\.png|\.bmp) https://www.example.com/$1$2 [NC,L]

With these line we're telling the web server "If a file is not present in the documents root and its extensions is one of the image types listed in the regex, then rewrite the local url to point to the online website where the image we know exists". Brilliant isn't it?

Now your local wordpress development environment is now ready.

Conclusions

This is not the best solution to deal with this kind of problems but I believe it is useful in several cases, the drawback is that it is necessary to have an active internet connection.

I suggest to use a similar approach in website development since wordpress handle the "not found" images through an internal php route which makes the loading of each web site page kinda slow.

Following the example shown previously in this post you may create a variant of the .htaccess to show a placeholder image for all not found images in your local environment.

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule \.(gif|jpe?g|png|bmp) /placeholder.jpg [NC,L]

Just put a placeholder.jpg file in your web root and you're done.