WordPress Rename Image URL For a CDN Usage

Recently, we moved all our static assets to a CDN (Content Delivery Network) as described here. However, we have over 8000+ old blog posts and we need to point static images url to our CDN account hosted at http://MyACCOUNT.cloudfront.net/images/ folder. How do I rename all image urls stored in wordpress posts? How do I offload static images to a CDN urls under WordPress?

You need to use php function called preg_replace() to perform a regular expression search and replace. Find 'UNIX' and replace with 'Linux' from the subject as follows:

 
<?php
 echo preg_replace("/UNIX/", "Linux", "Use UNIX or die!" ) . "\n";
?>
 

Sample output:

Use Linux or die!

In this example find url:
www.cyberciti.biz/blog/uploads/2010/11/file.png
And replace as follows:
cdn.cyberciti.biz/blog/uploads/2010/11/file.png
Sample php code that can be used to replace any url in post using regex:

 
<?php
 $pattern="/www.cyberciti.biz\/blog\/uploads\/(.*)\/(.*)\/(.*).png/";
 $replacement="cdn.cyberciti.biz/blog/uploads/$1/$2/$3.png";
 $imagepath="cdn.cyberciti.biz/blog/uploads/2010/11/file.png";
 echo preg_replace($pattern, $replacement, $imagepath ) . "\n";
?>
 

You can now roll out your own php code to find and replace all image urls. However, there is another easy way - WP RegEx Replace plugin. This plugin will replace regular expressions in the final rendered WordPress output. First, download and install WP RegEx Replace plugin. Upload wp-regex-replace.php to the $blog/wp-content/plugins/wp-regex-replace/ directory:
$ ssh user@www45.nixcraft.net.in mkdir -p /var/www/html/blog/wp-content/plugins/wp-regex-replace/
$ scp wp-regex-replace.php user@www45.nixcraft.net.in:/var/www/html/blog/wp-content/plugins/wp-regex-replace/
Activate the plugin through the 'Plugins' menu in WordPress.

Backup Your Data

It cannot be stressed enough how important it is to make a backup of your blog and mysql database before you do this. See how to backup MySQL database here. You can use MySQL command as follows to backup database (you need ssh access):
$ mysqldump --add-drop-table -h mysql02.lan.nixcraft.net.in -u nixcraft -p'MySecretPassword' blogdb-name | bzip2 -c > blog.sql.bz2
You can also backup your files using the following command:
$ tar -zcvf /backup/blogfiles.tar.gz /var/www/html/blog/

How Do I Use This Plugin?

Make sure you upload all your current images to the CDN network using ftp / sftp / rsync client. Another recommends option is to use "Origin Pull CDN" method. Finally, make sure you can view ALL your images from the CDN network.

WARNING! These examples may result into corrupted database if NOT executed with care. It is strongly recommended that you backup your database before using your own php code or the following plugin.

Next, visit example.com/wp-admin/ > 'Settings' menu > 'WP RegEx Replace' plugin option. To replace all png files, enter the following regex in replace box:
http://www.example.com/images/(.*)/(.*)/(.*).png
with:
http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.png
To replace all jpg images, enter:
Replace:
http://www.example.com/images/(.*)/(.*)/(.*).jpg
with:
http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.jpg
To replace all gif images, enter:
Replace:
http://www.example.com/images/(.*)/(.*)/(.*).gif
with:
http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.gif

Fig.01: Changing Image URL's path after wordpress move or CDN offloading

Make sure you are using correct path. Finally, hit 'update' button. If you are using any caching plugin (such as wp-cache or supercache) just clean the cache. Visit any post with attached images and all your static images should come from CDN urls.

Redirecting Old Image URLs (HTTP 301 Moved Permanently)

The HTTP response status code 301 Moved Permanently is used for permanent redirection.

nginx HTTP 301 Moved Permanently Configuration

If you are using an Nginx web server, edit nginx.conf and append the following config code:

 
### redirect media / images to CDN url ###
rewrite "^/images/(.*)/(.*)/(.*).png$" http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.png permanent;
rewrite "^/images/(.*)/(.*)/(.*).jpg$" http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.jpg permanent;
rewrite "^/images/(.*)/(.*)/(.*).gif$" http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.gif permanent;
 

Reload your nginx web server, enter:
# /usr/local/nginx/sbin/nginx -s reload

Lighttpd HTTP 301 Moved Permanently Configuration

If you are using a Lighttpd web server, edit lighttpd.conf and append the following config code:

 
### redirect media / images to CDN url ###
"^/images/(.*)/(.*)/(.*).png$" => "http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.png",
"^/images/(.*)/(.*)/(.*).jpg$" => "http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.jpg",
"^/images/(.*)/(.*)/(.*).gif$" => "http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.gif"
 

Reload your lighttpd web server, enter:
# service lighttpd reload

Apache HTTP 301 Moved Permanently Configuration

If you are using an Apache web serer, edit httpd.conf and append the following config code:

 
### redirect media / images to CDN url ###
RewriteEngine on
RewriteRule   ^/images/(.*)/(.*)/(.*).(png|jpg|gif)$  http://MyACCOUNT.cloudfront.net/images/$1/$2/$3.$4 [R=301,L]
 

Reload your Apache web server, enter:
# service httpd restart