The WordPress blogs I maintain are hosted through Docker containers running in the cloud on Infrastructure-as-a-Service (iIaas). While this method of hosting a blog has many benefits like the ability to use your own domain names (e.g. tech.bitrox.io) and outstanding availability, it does come with some downsides. The primary downside for me is simply the cost.
A simple virtual server is cheap enough for the super low volume blogging that I do. However, WordPress typically works by uploading media to the server itself where it is then served by WordPress; i.e., the media (photos, video, etc.) take up storage space on the server itself. While this isn’t a huge issue in the short run, over time the storage requirements can grow significantly, especially when video enters into the equation. WordPress also creates like 6 copies of each photo uploaded, so even that causes the storage requirements to grow. Throw in regular servers backups and backups of the wordpress sites themselves and it all adds up, resulting in ever growing cloud hosting fees.
The easiest way to avoid this with WordPress is to simply link, rather than upload content. I already have nearly all my media automatically uploaded and stored with my preferred media portfolio site Smugmug. So there isn’t any reason why I shouldn’t be able to simply link to it.
WordPress supports this out of the box with an included Smugmug widget, so I thought that I was in business. Unfortunately, when I tried to embed a photo, all I constantly got was a big box loudly telling me that “Sorry, this content could not be embedded.” Try as I might, I could not figure out any way to get the content embedded.
The WordPress Embed also supports other photo sharing sites, including Flickr, and indeed when I grabbed a link to a Flickr photo, it was embedded just fine. As a side note, there’s a bit of irony here in that Smugmug actually purchased Flickr from Yahoo and so they’re owned by the same company.
After realizing that Flickr photos could be embedded, but not Smugmug photos, I actually grew frustrated enough to open up a trouble ticket with Smugmug’s technical support team.
While waiting for Smugmug to respond, I delved deep into how embeds work, including how the work with WordPress. It turns out that it’s all powered by a standard called oEmbed which you can read about in this article.
After delving into oEmbed and how WordPress handles it, I finally figured out that the issue was that I am using a custom domain with Smugmug (media.bitrox.io). The way WordPress handles embedding, is that it has a list of embed “providers” (aka oembed servers) that are mapped to specific URL patterns. For example, Flickr URLs to specific folders look like this: https://flic.kr/p/2nx064R. WordPress embed system sees that https://flic.kr base URL and sends the oembed request to a service at: http://www.flickr.com/services/oembed. The problem was that WordPress simply didn’t know what to do with https://media.bitrox.io/*.
After much digging around, I found that what was needed was modification of the active wordpress template to tell it what to do with embeds from media.bitrox.io. I had to go into the WordPress control panel to Appearance/Theme File Editor, then select Theme Functions to edit the theme’s functions.php file. Of course when I tried that I go permission denied, so had to make that the Linux permissions for that file (functions.php) were set to writeable by owner (chmod +w functions.php) and then try again.
What was needed was the following line added to the top of the file:
wp_oembed_add_provider( '#https?://?media.bitrox.io/.*#i', 'http://api.smugmug.com/services/oembed/', true );
This works like a charm and I was then able to embed any photo in a public or unlisted Smugmug gallery using my custom domain. There was some small bit of additional confusion on my part because when you click on the Smugmug share option you’re given a link to the photo and an option for an “embed” link. You do NOT, want to use the “embed” link, which is an actual direct link the photo itself (of whatever size is chosen). Those “embed” links can actually be used in the WordPress image widget to get the image from URL. Rather, use the link to the image that looks like this:
https://media.bitrox.io/2022/2022-Home/2022-Freezing-Rain/Photos/i-V2SFB7B/AI actually did get back to Smugmug support (which was excellent btw) and explain my findings. I explained the confusion re: use of a tab labeled “Embed” to get links that are not usable for embedding in the world’s most popular web site software. I suggested titling it something like “Direct Links” or something similar.
