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

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 );

view raw load-images-from-production.php hosted with ❤ by GitHub

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.

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

Configuring the plugin

Not for production!

Good dev stuff, delivered.