WordPress oEmbed With Your SmugMug Custom Domain Name
By Clifford P
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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
// 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)
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.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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
WordPress oEmbed With Your SmugMug Custom Domain Name
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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
style.css
hosted with ❤ by GitHub
Further Reading
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!