When you link to a SmugMug gallery, single video, or single photo, WordPress knows to use oEmbed to actually display the media instead of the text. It not only works for SmugMug but also YouTube, Vimeo, SlideShare, and many other popular sites.
However, if you use a SmugMug custom domain (e.g. media.tourkick.com), WordPress doesn’t know that it’s really a SmugMug URL. We have to add it to WordPress’ whitelist of oEmbed providers if we want such links to work just like SmugMug links (e.g. tourkick.smugmug.com).
Did you see what I did there? I just hinted at a trick you may choose to use instead of enabling oEmbed (although I don’t see why you would):
You can replace the MyCustomDomainForSmugMug.com part of your gallery, video, and photo URLs with your MySmugMugHandle.smugmug.com and oEmbed will know to work, since it’s simply a subdomain of smugmug.com.
Okay, now for the custom domain oEmbed code…
If you want to allow your SmugMug Custom Domain name to work with WordPress’ oEmbed functionality, you just need one line of code added to functions.php (or your own plugin):
Looking at the code, you can see my SmugMug custom domain followed by an asterisk. Then you leave the second half (after the comma) unchanged. That’s it (but use the version below instead).
Here’s the more bulletproof version with all the regular expression stuff to be more dummy proof, like if a user types a URL with HTTPS even though SmugMug does not support HTTPS:
(of course, replace with your own SmugMug custom domain name)
Below are some examples of the oEmbed results, along with the URL that I entered on its own line so you can see the before and after.
Single image from http://media.tourkick.com/Nature/2012-11-14-Ray-Harral-Nature-P/i-XbrpZwB
Single image from [ embed width=300 height=100 ]http://media.tourkick.com/Nature/2012-11-14-Ray-Harral-Nature-P/i-XbrpZwB[ / embed ]
Single video from http://media.tourkick.com/20141125-12001-N-108th-E-Ave/i-k56jpPv
Single video from [ embed width=600 height=100 ]http://media.tourkick.com/20141125-12001-N-108th-E-Ave/i-k56jpPv[ / embed ]
Gallery from http://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/
Gallery from [ embed width=500 height=200 ]http://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/[ / embed ]
How to Change the default width and height of Embeds
WordPress defaults to a width of 500px and a height of 1.5 times the width (with a minimum of 1000px). Reference: wp_embed_defaults
If you don’t want a width of 500px and a height of 1000px (assuming it isn’t set to something else, e.g. by your theme), you can use the embed_defaults filter.
If you looked closely at the Examples above, you might have noticed that you can change a single embed’s width and height by using the [ embed ] shortcode.
How to Center SmugMug Embeds
Once you’ve got your embeds working as desired, you might notice they could use some sizing or alignment help. In my opinion, most stuff usually looks better centered. For resizing help, see the “Further Reading” links at the end of this post.
Prior to WordPress 4.x, you could have used the TinyMCE Editor to paste a URL and click the “Align Center” button and it’d be in a p tag with text-align:center when displayed on the front-end.
Good news and bad news
The WP 4.x Editor (since September 2014) actually displays the embeds. It’s a great thing because you can preview how the embed will display on the front-end.
Unfortunately, switching between the Text and Visual Editors either removes the p tag centering or does not process the embed (it has to be on its own line or wrapped with [ embed ] shortcode).
Get ‘er Done (Do the Centering)
To get it to keep centered even when switching between Visual and Text Editors, you’ll need to insert something other than a p tag (like a div) and some centering code (inline CSS or add a class to the div).
Another way is to center ALL SmugMug-sourced images, videos, and slideshows. Here’s the CSS code for that:
- About SmugMug custom domains
- wp_oembed_add_provider() is used in the PHP code snippet
- A good explanation of the regex involved in using wp_oembed_add_provider
- wp_oembed_get() could be used when doing custom PHP coding
- embed_defaults filter or wp_embed_defaults() could be used to customize the oEmbed output
- SmugMug oEmbed documentation
- oEmbed.com’s list of provider implementations (SmugMug being one of them)
- About CSS attribute selectors (used in the CSS code snippet) by SitePoint: CSS, CSS3
Get Your Own SmugMug
SmugMug’s cool. It can save you from having to upload and serve all your media uploads from the WordPress media library (pros and cons), and there are a lot of other benefits. Pricing starts at $5/month or $40/year
Get your own SmugMug account via my affiliate link and get a 20% discount!