Replacing Embedded Flickr Photos

Flickr has long been the platform of choice for many amateur photographers and bloggers to host and share their photos. Its simple interface and large active community make it an all-around great choice and by using the service to host their photos bloggers can also save a considerable amount of money on bandwidth costs.

Flickr recently introduced a new photo page with the previous default medium image width of 500 pixels now being expanded to 640 pixels – a 30% increase which is pretty striking when you look at them side-to-side:

Given that Randomwire is fairly image heavy I immediately wanted to go back through all my old posts and replace the old small images with the new larger ones – the problem is that there were 813 of them which needed to be changed, a job which would take days to complete manually by hand.

I figured that there must be an easier way so I examined the URLs of the two image sizes for a single image:

500 px image URL: https://randomwire.com/wp-content/uploads/flickr_backup/4732419953_ac4ea90ce8.jpg
640 px image URL: https://randomwire.com/wp-content/uploads/flickr_backup/4732419953_ac4ea90ce8_z.jpg

You’ll notice that the only difference between the image URLs is that the latter has _z appended before the .jpg file extension. In order to replace all the image URL’s in my WordPress database, it seemed that I would just have to replace .jpg with _z.jpg for Flickr images and adjust the width/height parameters.

After a bit of research, I found a useful plugin called Search Regex which adds a powerful set of search and replace functions to WordPress. It allows you to use regular expressions, written in a formal language, to match patterns of characters within your content. For the technically inclined here’s how you do it (be sure to backup your database first) –

Step 1: Replacing Image URL

After installing and activating the plugin you can access it from Tools → Search Regex under the admin menu. From here you enter a search pattern and replace pattern which finds all the Flickr image URLs and appends _z before .jpg:

Search pattern: /static.flickr.com/([a-z0-9_/]+).jpg/
Replace pattern: static.flickr.com/$1_z.jpg

Before making the changes permanent be sure to test the change using the “Search” and “Replace” functions. The parts highlighted in red indicate what’s about to be changed:

Once you’ve checked that what’s being changed is correct click “Replace & Save” to commit the changes.

Step 2: Replacing Width / Height Parameters

Although the image URLs are now correct you still have to alter the width and height parameters to match the new size of the images. Most people will be using the default image size of their camera but if you’ve cropped them or use a large number of different cameras this is going to be more tricky. There are two options –

Option 1: Remove Width and Height Parameters

If your width and high parameters are inconsistent then the fastest solution is to remove them altogether. Web browsers can still auto detect the image size but only after the image has fully downloaded on the page, slightly increasing the load time:

Search pattern:/alt="(.+)"[s]width="([0-9]+)"[s]height="([0-9]+)"/
Replace pattern: alt="$1"

Option 2: Replace Width and Height Parameters

If your photos are the same size then you can safely do a direct replacement from the old size to the new size:

Search pattern: /width="500"[s]height="281"/
Replace pattern: width="1024" height="575"

Remember that you need to search for both portrait and landscape photos and that your width/height parameters may be reversed so be sure to search and replace all combinations (by adjusting the search pattern).

As a final tip if you want to search for all embedded images which are NOT 640px wide try this search expression: /static.flickr.com.+width="(?!640)([^"]+)"/

Once these steps are complete you should see all your Flickr photos are now displaying in the larger image format. While this process is fairly straightforward please note that I will accept no responsibility for any damage caused to your data – make sure everything is fully backed up before you try it!