How We Implemented External Featured Images in Nelio Content

At the end of 2009 WordPress 2.9 was released. One of the most interesting features it included was featured images—a new tool themes could enable to improve the look and feel of our blog.

Assuming you’re already using them in your own blog (it’s 2017, so why shouldn’t you?), you’ve probably realized that you may only use images in the media library as featured images. However, if you add a regular image in your posts, you can do so using their URL and, therefore, you can skip the media library. Why so?

Today I’ll explain how featured images work in WordPress, why you can only use images from your media library, and how Nelio Content overcomes this limitation and allows you to set featured images using an external URL.

Featured Images in WordPress

As you can see in WordPress.com:

A featured image represent the contents, mood, or theme of a post or page. Posts and pages can have a single featured image, which many themes and tools can use to enhance the presentation of your site.

If you take a look at our blog, for instance, you’ll see that all our posts have featured images. For example, here’s our front page:

In the following you can see how featured images look like when reading the post itself:

And this last screenshot depicts the appearance of a Related Posts section:

Featured images come in all shapes and colors and are used all around our theme!

As you already know, you can easily set a featured image using the following box in the edit post screen:

When you click on Set Featured Image, a new dialog pops up and shows you the images you have in your media library. You can then select the image you want to use or upload a new one. But why do you have to select an image from the media library? Why can’t you use the URL of an image stored somewhere else?

What’s Going On Under The Hood…

Whenever you upload an image to your media library, WordPress performs several tasks:

1. its saves the image in your server, under wp-content/uploads,
2. it creates a new entry in your database (table wp_posts), so that it “knows” there’s a new image available and, thus, it can list it in your Dashboard,
3. generates multiple thumbnails, scaling and cropping them as necessary, and
4. saves some meta-information about your image and the thumbnails it created in wp_postmeta.

The most interesting step in the previous process is thumbnail generation. If, for example, the image you upload is about 1200x800px, you might be able to find thumbnails sized at 540x350px or 150×150. Why do we need these thumbnails?

As I said at the beginning, thumbnails play an important role in your site—they might appear in multiple locations, and every time they are included in your site, they might come in different sizes and shapes. Take a closer look again at the screenshots I shared before—featured images in the front page are bigger than those included in the Related Posts section, but smaller than the image included in the heading of this post. That’s why your theme specifies which image sizes should be available—it’s the one that will decide when and where a certain thumbnail will be used. ?

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

Setting Featured Images in WordPress

When you set a featured image, the only thing that WordPress stores in the database is something like “post x uses image y as its featured image”, where x and y are database IDs. This information is actually stored in wp_postmeta, using a meta field named _thumbnail_id. That’s it! Using this simple information, WordPress can retrieve the featured image of a post (using the meta-information tables we talked about a few lines above) and output the proper thumbnail.

External Featured Images with Nelio Content

Now that you know how images and featured images work in WordPress, I guess you can imagine why you can’t use an image’s URL solely to set the featured image of a post… I’ll give you a couple of minutes to think about it?

Not yet? ⏲

Clock’s tickin’… ⌛

Think harder! ?

? Great! I’m sure you got the right answer—it’s because of thumbnails. If you theme expects images to have a certain size, we need to be able to generate thumbnails that fit the expected sizes. However, if we only have the URL of an external image, we won’t be able to create such thumbnails (remember we don’t want them in the media library) and we’ll be therefore limited to one size only—the size of the image behind that mysterious URL. Is it a portrait image? Panoramic? Squared? Which dimensions does it have? You only know the URL and nothing more! ?

Nelio Content’s External Featured Image Should Look and Feel Native

We wanted to make it possible for WordPress users to use external images as their post’s featured images, overcoming all the limitations and problems that external featured images pose (namely, skipping the media library and having no thumbnails) and offering a behaviour that closely resembles regular featured images—both in the UI and under the hood. The user interface we implemented for inserting external featured images is perfectly integrated in WordPress. Thus, for example, we modified the featured image box so that it allows users to add external featured images:

If you click on External, the following dialog opens up and you’ll be able to paste the link of your soon-to-be featured image:

As you can see, this beautiful dialog looks quite similar to the dialog you get when adding an image in your content from its URL, doesn’t it?

Now, if we want to use this URL as the external featured image of our post, we need to solve two problems:

1. How to use this URL in the front end
2. How to generate thumbnails

Let’s get started! ?

How to Use a URL as the External Featured Image

As we’ve already discussed in previous posts, you can easily extend WordPress using its filters and actions. Featured images are no exception and come with a set of filters you can hook into, allowing you to change the final result. One of the most-common functions for printing the featured image (but not the only one) is get_the_post_thumbnail—if you have a post’s ID (or the post itself), you can add the following snipped in your theme:

get_the_post_thumbnail( $post_id, 'post-thumbnail' );

and it’ll generate the following tag:

<img src="https://example.com/wp-content/uploads/image-150x150.jpg" ... />

a simple img tag pointing to a thumbnail version of your featured image (in this case, we’re using a thumbnail named post-thumbnail whose dimensions are 150x150px). This function has a filter named post_thumbnail_html—if you hook into it, you can modify the img tag and return whatever you want. In other words, you can modify the previous tag so that the src attribute points to the external URL:

<img src="https://server.com/external-image.jpg" ... />

Cool! Assuming the URL is saved in a post meta, we now have all the tools for printing an image tag that uses said URL. Let’s tackle our next problem—how the heck do we generate thumbnails?

Simulating Thumbnails for External Featured Images

The easiest solution to modify the final size of your image is adding the attributes width and height in the final img. This way, it’ll be automatically (down-)scaled and will fit the dimensions your theme expects. But if you do so, an image like this:

might look stretched and weird like this:

It works… kinda ? If we don’t want the image to be stretched, we need to find a different solution. But, which one? ?

Well, let’s follow a completely different approach. All posts using an external featured image will actually use a special image from our media library. “But… we didn’t want to use images from the media library!” I know, but it’s a small price we have to pay. Bear with me. Let’s start by adding a new transparent PNG image in your media library. Something like this:

See? Exactly! There’s nothing to see ? When you install our plugin, Nelio Content will upload a transparent image in your media library. As any other image, WordPress will generate multiple thumbnails—all of which will be transparent PNG files. Cool! If we now use this image in all the posts that use external featured images, the img tag WordPress will generate with get_the_post_thumbnail will be the following:

<img src="https://example.com/wp-content/uploads/transparent-150x150.png" ... />

which means we’ll have an image of the appropriate size. But, well, it’s not the image we want. We solved one problem and introduced the previous one once again—we’re not using the actual external URL! Luckily, this can be solved easily. Using the same filter we used before (post_thumbnail_html), we can add the actual featured image via CSS as the background of the img tag:

<img src="https://example.com/wp-content/uploads/transparent-150x150.png"
   style="background:url( https://server.com/external-image.jpg )" ... />

Then, we can tweak the size of the background (background-size: cover) so that it perfectly fits the size of the img tag. This little hack simulates scaling and cropping images without stretching! Awesome!! ??

I hope you liked this post and some of the tricks we use to get the most out of WordPress. I believe this kind of examples are a great way to learn more about WordPress and might give you ideas on how to overcome issues that might seem unsolvable at first. If you have any questions, don’t hesitate to ask in the comments section!

Featured image by Glenn Carstens-Peters.