Trusted Business Software and Services Since 2010 Trusted Business Software and Services Since 2010
  • Resources
    • Fastest WordPress Hosting
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Portfolio
  • Contact Us
    • Marketing Spend Calculator
  • Free Online Small
    Business Marketing Report
  • Blog
  • Join Cliff’s Email List

WordPress oEmbed With Your SmugMug Custom Domain Name

By Clifford P on December 2, 2014

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…

Demo 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):


<?php
// From https://tourkick.com/advice-tips-howto/smugmug-custom-domain-oembed-wordpress/
// Works but full regex version could be used instead: https://gist.github.com/cliffordp/7afaa8700d2a5711e9d6
wp_oembed_add_provider( 'https://media.tourkick.com/*', 'https://api.smugmug.com/services/oembed/' );
view raw

functions.php

hosted with ❤ by GitHub

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).

Actual Code

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)


<?php
// From http://tourkick.com/2014/smugmug-custom-domain-oembed-wordpress/
// This version is based on the SmugMug code from wp-includes/class-oembed.php
// Even if you set both WWW and non-WWW versions as CNAMEs in your DNS settings, an oEmbed attempt to the wrong custom SmugMug domain (e.g. WWW if the custom domain in your SmugMug settings is non-WWW) will not work, which is why (www\.)? is not in the regex
// for a custom SmugMug subdomain like http://media.mydomain.com (notice the "backslash-dot" after the subdomain)
wp_oembed_add_provider( '#https?://?media\.mydomain\.com/.*#i', 'http://api.smugmug.com/services/oembed/', true );
// for a custom SmugMug domain like http://mydomain.com:
//wp_oembed_add_provider( '#https?://?mydomain\.com/.*#i', 'http://api.smugmug.com/services/oembed/', true );
view raw

functions.php

hosted with ❤ by GitHub

oEmbed Examples

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 https://media.tourkick.com/Nature/2012-11-14-Ray-Harral-Nature-P/i-XbrpZwB

Single image from [ embed width=300 height=100 ]https://media.tourkick.com/Nature/2012-11-14-Ray-Harral-Nature-P/i-XbrpZwB[ / embed ]

Single video from https://media.tourkick.com/20141125-12001-N-108th-E-Ave/i-k56jpPv

Single video from [ embed width=600 height=100 ]https://media.tourkick.com/20141125-12001-N-108th-E-Ave/i-k56jpPv[ / embed ]

Gallery from https://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/

https://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/

Gallery from [ embed width=500 height=200 ]https://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/[ / embed ]

https://media.tourkick.com/Tours/20110411-1122-S-Evanston-Ave/

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:


/**
* SmugMug oEmbed centering
* From https://tourkick.com/advice-tips-howto/smugmug-custom-domain-oembed-wordpress/
*/
img[src*="https://media.tourkick.com"], /* Single Image from custom domain URL */
img[src*="https://photos.smugmug.com"], /* Single Image from smugmug.com URL */
iframe[src*="https://api.smugmug.com"]{ /* Videos and Slideshows (multiple images) regardless of custom domain URL or smugmug.com URL */
display: block;
margin: 0 auto;
}
view raw

style.css

hosted with ❤ by GitHub

Further Reading

  • 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!

Posted in Advice/Tips/How-To.
PreviousUse Google AdWords to Learn the Seasonality of Your Business
NextWordPress Instant Demo Site with Multisite Database Reset
  • For your review: our Policies and Contact Information

    Copyright © 2010–2023 · Log in

    Made with by Clifford Paulick

  • Trustworthy, Long-Term Software and Business Services Since 2010
  • Free Online Small Business Marketing Report
  • Resources
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Contact Us
    • Marketing Spend Calculator
  • Blog
  • Join Cliff’s Email List
  • Resources
    • Fastest WordPress Hosting
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Portfolio
  • Contact Us
    • Marketing Spend Calculator
  • Free Online Small
    Business Marketing Report
  • Blog
  • Join Cliff’s Email List