Adding a Featured Image to Angular 2 WP Theme

March 20, 2016 by Stuart Kuentzel

– Updated 4/14/16 – As of the new WordPress release 4.5, the featured image response has changed. The article is now updated to reflect that.

This article is part of a running series, building an Angular 2 WP Theme. The full source code can be viewed on GitHub. Since both Angular 2 and WP API 2 are in beta, there will be changes

In the previous article, we created a single article page, and the ability to route to it from a list. Let’s say we want to liven up our post with a featured image. How do we go about this?

Enable post thumbnails in functions.php

You might notice, if the theme is activated and you are writing a post, there is no area that allows for a featured image. We need to start by enabling post thumbnails in WordPress. Open functions.php. At the bottom of the file, add…

functions.php

...

//featured images
add_theme_support( 'post-thumbnails' ); 

?>

Now the featured images functionality has been enabled in our theme.

Add _embed to the Service

The new WP API 2 is different than the earlier version when it comes to including a post thumbnail / featured image. In WP API 2, they introduced something called Linking. At first look, it’s an unpleasant layer of obfuscation. Also, how we implement linking seems in flux, as it’s still the beta version. But linking allows us to make more complex calls to items associated with the post. We can add custom link relations, as well the ability to query things like author, collection, comments, etc.

Think of the featured image as something linked to the post. At the time of writing this, it is being linked as ‘featured media’. WP API 2 makes it easy for us to access linked resources by adding support to automatically embed data. All we need to do is change our HTTP request inside of articles.service. Inside of the getArticle function, add…

articles.service

export class ArticlesService {

	private _wpBase = 'http://<path-to-your-site>/wp-json/wp/v2/';

	...

	getArticle(slug) {
		return this.http.get(this._wpBase + 'posts?filter[name]=' + slug + '&_embed');
	}

}

The magic here is &_embed we added at the end of our call. This will automatically include linked resources.

Now, in Firebug or Chrome Developers Tootls, if you check the JSON response of a post with a featured image, you will see an _embedded object which wasn’t there before.

Include in Article component markup

Next, we’ll just include the new data in our ArticleComponent. Open the article.component file and inside of the template in our @Component we’ll make some additions.

article.component

@Component({
	selector: 'router-outlet',
	template: `
		<div *ngIf="article">
			<h1>{{ article.title.rendered }}</h1>
			<img src="{{article._embedded['wp:featuredmedia'][0].media_details.sizes.medium_large.source_url}}" />
			<div [innerHTML]="article.content.rendered"> </div>
		</div>
	`,
	providers: [ArticlesService]
})

We creating an image and setting the source as the JSON response. As a side note, I’m guessing this will syntax will change, as people find it annoying writing ['https://api.w.org/featuredmedia']. Fortunately, it looks like the WP API 2 team is already on it. <= As of WP 4.5, we use [wp:featuredmedia]. Much better.

Now just make sure a featured image has been added to your post, and you’re golden. If you’re having trouble, leave a comment. In the mean time, build something cool!

© 2018