Dealing with images when developing on localhost with wordpress
Tags: wordpress, htaccess, images, webdev
Published: 2022-06-02 22:16:43

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](https://www.mamp.info/), [Vagrant](https://www.vagrantup.com/) or [Valet](https://laravel.com/docs/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](https://wp-cli.org/) tool.

```bash
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.

```bash
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.

```apache
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.

```apache
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.