Proxying Media Files in a Local WordPress Development Environment with DDEV

Proxying media files in a local WordPress development environment is an essential skill for developers who want to ensure that their local site reflects the content and functionality of the live production site.

Downloading all the media files to your local environment might not be the best solution, especially if the production site has a large media library. Instead, you can set up your local development environment to proxy media requests to the production server. For local development, I am using DDEV, an open-source tool that makes it dead simple to get local PHP development environments up and running within minutes. In this blog post, I will share a solution that I found useful for proxying media files in a local DDEV environment without using a plugin.

The Problem

While working with WordPress locally using DDEV, I needed a way to display media files without actually downloading them to my local environment. My goal was to make WordPress load these files from the production server whenever they are requested.

The Solution

We can achieve this by adding custom functions to our WordPress theme’s functions.php file. These functions will change the URLs for attachments and thumbnails to point to the production server.

Here’s the code snippet that you can add to your functions.php file:

if ($_SERVER['HTTP_HOST'] == 'your-local-ddev-url') {

    function replace_domain($url) {
        return str_replace('https://your-local-ddev-url', 'https://your-production-url', $url);
    }

    function rewrite_attachment_url($url) {
        return replace_domain($url);
    }
    add_filter('wp_get_attachment_url', 'rewrite_attachment_url');

    function rewrite_thumbnail_attributes($attr, $attachment, $size) {
        if (isset($attr['srcset'])) {
            $attr['srcset'] = replace_domain($attr['srcset']);
        }
        return $attr;
    }
    add_filter('wp_get_attachment_image_attributes', 'rewrite_thumbnail_attributes', 10, 3);

}

Replace your-local-ddev-url with the URL of your local DDEV environment, and your-production-url with the URL of your production server.

How It Works

• The replace_domain function takes a URL as an input and replaces the local domain with the production domain.
• The rewrite_attachment_url function uses the wp_get_attachment_url filter to change the URLs of attachment files.
• The rewrite_thumbnail_attributes function changes the srcset attribute for thumbnail images. This is useful when your theme uses responsive images with different sizes.

DDEV: A Great Tool for Local Development

DDEV is an open-source tool that helps you quickly set up local PHP development environments with Docker. It’s incredibly easy to use and can dramatically speed up your development workflow. By using DDEV for your local WordPress development, you can ensure that your environment is consistent with your production server which is crucial for avoiding the “it works on my machine” problem.

If you’re new to DDEV and want to know how to set it up for WordPress and Drupal, I have a guide that will walk you through the process of setting up a local site with DDEV. Check out my previous post: How to Set Up a WordPress and Drupal Local Site with DDEV.

Conclusion

By proxying media files from a production server, you can save space and time in your local development environment. This solution is especially useful when using DDEV for large WordPress sites with extensive media libraries. Always be mindful of the load this could add to the production server and make sure that your production environment can handle the additional traffic. Happy coding!