Black Friday/Cyber Monday Sale — ends 2nd December!

25% off all new licenses / 50% off all extensions & renewals

A simple WordPress plugin for loading media library images from a live site

If you’re writing a lot of code, you’re most probably doing so on a local (development) version of a live (production) site. This is a great way to work but if there is a large media library, it can be a bit of a pain syncing all those files down to your local machine.

A good workaround is to rewrite requests made to the uploads directory so that the requests are actually forwarded to the live site. This generally requires some knowledge about managing server configuration through .htaccess or through the NGINX config which isn’t necessarily everyone’s cup of tea.

I recently had to knock up a quick solution that we could use in a staging environment to save on disk use. My quick solution was to hook into WordPress’ media functions and just replace the host name for image URLs as they are generated.

A simple plugin solution for loading images remotely in staging/development

I’ve put together a simple plugin that you can use to do the same. You’ll need to configure a couple of constants in your wp-config.php file as demonstrated further down.

<?php
/**
* Plugin Name: Load Images From Production (for staging/dev)
* Description: Hooks into WP's media URL generation and replaces the domain with the production domain.
* Author: Phil Kurth
* Author URI: https://hookturn.io
*/
// If this file is called directly, abort.
defined( 'WPINC' ) or die();
// Configure these
defined( 'LIFP_PRODUCTION_HOST' ) or define( 'LIFP_PRODUCTION_HOST', '' );
defined( 'LIFP_PRODUCTION_SCHEME' ) or define( 'LIFP_PRODUCTION_SCHEME', 'https' );
// If prod host name hasn't been defined, bail.
if ( empty( LIFP_PRODUCTION_HOST ) ) {
return;
}
add_filter( 'wp_get_attachment_image_src', function ( $image, $attachment_id, $size, $icon ) {
$parts = parse_url( $image[0] );
// Override with prod values.
$parts['scheme'] = LIFP_PRODUCTION_SCHEME;
$parts['host'] = LIFP_PRODUCTION_HOST;
// Ensure all keys are set.
$parts = array_merge( [ 'path' => '', 'query' => '' ], $parts );
// Build the new URL.
$image[0] = "{$parts['scheme']}://{$parts['host']}{$parts['path']}";
if ( $parts['query'] ) {
$image[0] .= '?' . $parts['query'];
}
return $image;
}, 10, 4 );

Configuring the plugin

To configure, simply add a couple of constants in your wp-config.php file:

<?php
// Configure these in your wp-config.php file…
define( 'LIFP_PRODUCTION_HOST', 'www.mycoolsite.com' );
define( 'LIFP_PRODUCTION_SCHEME', 'https' )
view raw wp-config.php hosted with ❤ by GitHub

Not for production!

It should be pretty clear that this isn’t a plugin that should be active on your production site. As part of our automated deployment process, this plugin gets activated in the staging environment and deactivated and removed in the production environment.

About the author

Phil Kurth is a web developer living in Melbourne, Australia. Phil has a long history of WordPress development and enjoys building tools to empower others in their web design/development practice.

When not working with the web, Phil is usually spending time with his two young sons or is out hiking through the Australian bush.

Good dev stuff, delivered.

Product news, tips, and other cool things we make.

We never share your data. Read our Privacy Policy

© 2016 – 2022 Hookturn Digital. All rights reserved.