Fix blurry images in your WordPress oEmbed and use your own logo

Not a developer? Read this post first.

In late October last year, WordPress.org announced the new embeds feature in 4.4.

I noticed that some WordPress sites I embedded, including my own, had blurry featured images and the WordPress logo instead of their own. This post will instruct you how to correct this.

First let’s get some history, you are not going to touch the WP core. If you look at the /wp-includes/embed-template.php file (4.4) or the /wp-includes/theme-compat/embed-content.php (4.5), you’ll notice that the script is working some php math to find the ratio for rectangular images. If your best fit for that rectangular image ratio is an image size (add_image_size) that is small, then the resulting embed will be blurry across the web. To check if your site’s embed is blurry (you must be updated to WordPress 4.4x), paste in a url to one of your blog posts in another post in draft mode. You can use the visual mode for this test. In a couple seconds, your post will show up like the one below. If you have a featured image on that post, that will show up as well.

Force the read more link on excerpts even if the content is below the threshold and/or custom excerpt

Fix the blurry image in WordPress oEmbed

First you need to find a size that will work for your particular images, since mine are rectangular and look good at 900×500 on my blog page and the original image uses the best ratio for both Facebook and Twitter Cards (1200 X 626) so that the image is not cropped off, I added this size to my images:

add_image_size( 'embed-image', 600, 333, array( 'center', 'top' ) );

Then, rather than running all my images through regeneration, I name my images so that they are easy to find, and I just regenerated the thumbnails on those. I recommend that you do small batches at a time when you regenerate your thumbnails.

To force this most reasonably sized image, I use the embed_thumbnail_image_size (found in the embed-template.php or embed-content.php mentioned earlier) filter in my functions.php file and I use the 'embed-image' in the variable content. That’s it! Cache clearing is a good idea. If I didn’t use WP Rocket, I would then visit the popular pages on my site (WP Rocket will preload cache, so it ROCKS).

Be sure to ONLY use FTP and a code editor and make sure you are well outside other functions. Also, if your name is not Christina, change the prefix.

/** ====================================================================================

 * embed: filter to make my embed image look best

==================================================================================== **/
function christina_default_oembed_image_size() {
    
    $image_size = 'embed-image';
    
    return $image_size;
}
add_filter( 'embed_thumbnail_image_size', 'christina_default_oembed_image_size' );

Let’s replace the WordPress logo with your own

You need to have a square image of your logo at 64X64 or higher (but not crazy high). I created a huge square site icon and then used Makeappicon.com and put them in my root since many devices see these without adding cruft to my head. For the .ico and smaller .png sizes, don’t use the generated version and make your own small versions since the quality can get crappy sizing down. Tip: Photoshop, open up your icon, save as a different name, then size it down in 10px increments and use the setting for reduction (can’t remember offhand).

/** ====================================================================================

 * embed: replace WP logo with my own logo / icon

==================================================================================== **/
function christina_oembed_site_title() {
    
    $site_title = sprintf(
	'<a href="%s" target="_top"><img src="%s" srcset="%s 2x" width="32" height="32" alt="Christina Creative Design" class="wp-embed-site-icon"/><span>%s</span></a>',
	esc_url( home_url() ),
	esc_url( get_site_icon_url( 32, site_url( '/apple-touch-icon-72x72.png' ) ) ),
	esc_url( get_site_icon_url( 64, site_url( '/apple-touch-icon-72x72.png' ) ) ),
	esc_html( get_bloginfo( 'name' ) )
    );
    
    return $site_title;
}
add_filter( 'embed_site_title_html', 'christina_oembed_site_title' );

All the best,

Affiliate Notice: I have affiliate links all over the place for companies I recommend. By purchasing through these links you help to support my family and to keep my blog going.