[WordPress Tips] Responsive Flickr Embed Photos

[WordPress Tips] Responsive Flickr Embed Photos

Background & the Non Responsive Flickr Embed Problem

WordPress provides a very nice embed feature to automatically convert Flickr (and many other sites) share urls into <a> and <img> tags html codes in the live editor.

Example of the raw embed codes wordpress automatically translates from the Flickr share url “https://flic.kr/p/RR3cYT”.

Yet there is one problem about the translated html tags: it is not responsive.

Unlike wordpress function the_post_thumbnail(..) that generates responsive images for the post’s featured image, the above embed codes do not contain the srcset attribute, but it only grabs the Flickr image of 640px width.

The 640 px image is of too low resolution for typical PCs (thus the photo looks bad), and too high resolution (thus increase loading time) for typical smart phones. This is also a waste of Flickr’s capability to create different size photos.

A comparison of non-responsive versus responsive Flickr photo is shown below:

non-responsive-flickr

Non-responsive Flickr photo looks fuzzy due to stretching (640 px width photo displayed as 945 px).

responsive-flickr

Responsive Flickr photo looks much better (1024px width photo displayed as 945 px)

Using the_content Filter

Here we introduce one method (hack) to change wordpress’ non-responsive embed into responsive Flickr photo embed. The solution is adopted from here.

Add the following codes into functions.php:

(Note: you might notice that my search regex is only part of the original article’s regex. I discovered that with the original regex wordpress will start adding photo links to description text below the photo. I haven’t figured out why wordpress does so … )

The principle is simple:

  1. We use wordpress filter the_content (line 5) to modify stored post data before sending it to the browser.
  2. We modify the post data by finding the specific Flickr <img> tags and add the srcset attribute. This is all done by the PHP function preg_replace and the specific before/after regex expression (line 2).

With the above codes, the original non responsive Flickr embed code is changed to:

Code Detail: Construct the Right preg_replace arguments

If you want to apply the same principle to other wordpress-support photo services, below we introduce the code’s detail. You also need to know the detail if the wordpress Flickr embed codes change in the future, as the responsive Flickr codes must change accordingly.

The three critical points of the above codes are:

  1. Get the right search regular expression (first argument of preg_replace) that correctly matches Flickr embed codes.
  2. Make sure the match groups in the search regular expression are used correctly to construct the replaced responsive Flickr embed code (second argument of preg_replace).
  3. Make sure the right resolution Flickr file corresponds correctly to the viewing width.

Using Regex Tester

An easy way to get the right search regex and the right match groups is, similar as regex SEO url redirection, to use an online regex tester like Regex101. Below we will explain how we use the regex101 for building the right regex.

wordpress-regex-tester

Major regex tester sections.

1. Input Search Regular Expression

You input the search regex you are building in the #1 region in above image.

2. Input Example Flickr Embed Code

You input the example Flickr embed code at #2 “test string” region in above image. Then the tester will see if the regex has any matches. You can get quick reference of regex’s special characters from #4 region to help you modify the regex.

You might also want to add Non-Flickr embed code and make sure it is not matched by your regex.

3. Find Match Groups

Once you have a match, you can find the match groups at #3 region “Match Information”. “Group 1” corresponds to “$1” at preg_replace’s second argument, “Group 2” to “$2”, and so on.

Substitute these match groups into the second argument of preg_replace to make sure it gives the correct responsive Flickr codes.

Find the Right Flickr File

Flickr attaches an extension "_X" , where "X" corresponds to different alphabet, to represent the various resolution files of the same photo. You can discover what resolution each "X" corresponds to at Flickr image’s download page.

flickr-photo-download-page

Flickr photo download page.

Look at the url of each size photo, it should be something like:

Where the last alphabet is the "X". Some examples in our codes are:

  • no extension: original photo
  • “n” : 320w
  • “z”  : 640w
  • “b” : 1024w
  • “h” : 1600w

Notice that the largest available size depends on your maximal sharing size setting. Check this in your Flickr account setting.

Also Recommended:

[Wordpress Tips] Automating Flickr Photo Insertion to WordPress Blogs

[ WordPress SEO Basics #5] URL Redirection

Like My Post? Subscribe Below and Get the Latest Post Email Updates!