Things I learned while developing the million eyez WordPress plugin — part 1
This is the story of how I stopped hating and learned to love PHP - and WordPress development in particular.
Working with featured photos
Million eyez is all about quality photos for your posts, so it’s only natural you would want to use one of these photos as your post’s featured photo. One of the first tasks I had for our plugin was exactly that.
By checking a checkbox in the plugin settings page, the plugin will set the featured photo of a post (if the selected theme has support for featured photos and no featured photo was selected in WordPress itself) to the post’s corresponded million eyez Photobox featured photo.
In order to achieve this behavior I needed to intercept the flow of how WordPress gets the featured photo of a post.
I started with adding the following 2 filters:
Hooking into get_post_metadata allows me to replace the ID of the featured photo (aka: the _thumbnail_id) of a specific post with anything I wish to, in my case it would be the ID of the post’s Photobox.
Hooking into wp_get_attachment_image_src allows me to use the ID I set in the previous hook and get the requested photo from million eyez.
Let’s dig a little deeper into the get_post_metadata hook first:
Lines 5–8 are irrelevant for this post, but from a high level view, these lines make sure that the million eyez plugin should intercept the featured photo’s flow and if not, just returns the metadata ($t) value that was passed to the function.
The fun part starts at line 10
If the metadata key that is being handled now is _thumbnail_id we intercept the flow:
- Line 14 — we get the current value of the _thumbnail_id property of the handled post.
- Lines 16–18 — if the _thumbnail_id property has a value we finish the hook interception by returning whatever value that might be (this usually means the featured photo was already set in WordPress itself or by using other plugins we don’t want to override)
- Lines 24–26 — by using the preg_match function we check whether the post content contains the million eyez short code, and if it does we return it (in the format for me-[photobox id]) as the _thumbnail_id property.
Next, let’s dig into the wp_get_attachment_image_src hook:
As stated earlier, this hook allows us to act upon the ID set by the previous hook and if it’s a valid million eyez ID, act upon it (meaning — get the featured photo from million eyez servers).
- Line 4 — performs a check on the $attachment_id variable to make sure its a valid million eyez ID.
- Lines 5–9 — These 5 lines determine the width for the featured photo. If the $size variable is an array, we take the first value of the array (located at index 0), if its not an array, we use $size as the index for the global array $_wp_additional_image_sizes and from that array we take the ‘width’ property. To better understand $_wp_additional_image_sizes take a look at these docs.
- Line 10 — At million eyez, we use an aspect ratio of 4/3 for all our photos, so in order to calculate the height of the featured photo, we divide its width by 4 and multiply it by 3.
- Line 11 — We end the function by returning an array containing the photo URL (which the /featuredPhoto endpoint redirects to), height and width.
To see how it actually looks on a blog, visit www.eyezwideopen.com or just checkout at the photo below :) (and yes, these are real photos uploaded to the posts by members of our talented photographers community!)
The featured photo example is just the tip of the iceberg of the things we do with WordPress at million eyez, in my next post I’ll write about how we handle auto updates for the counters in our plugin.