Using the content API to display blog links (title, image, description, link) on our home page?

Developer help
1

Hi guys,

Does anyone know if there are any walk throughs or any content on using the Ghost Content API to display blogs on our main website?

We basically want to pull through the title, image, description, and link to our latest blogs and show them on our homepage.

Any help would be very much appreciated. I found this article about it but couldn’t make it work:

Thanks,

Tom

2

Hi Tom,

It looks like you found “the guide”, it would be helpful if you could describe what didn’t work, share some code, and show any errors you got and then we can find what went wrong and fix the guide if needed.

3

Hey Hannah! Thanks so much for getting back to me!

I have it working now but can’t get it to only include blogs with certain tags. Here is my code, I am trying to get it to return only blogs that have the tag ‘Snow’ but instead it is just returning the 6 most recent blog posts. Any help would be massively appreciated:

<body>

<div class="container">
	<div id="blog-posts" class="row">
		<template>
			<div class="col-md-4">
				<div class="card">
					<!--Post Image-->
				<img src="" class="card-img-top" alt="">
				<div class="card-body">
					<h5 class="card-title"><!--Post Title--></h5>
					<p class="card-text"><!--Post Description--></p>
					<!--Post Link-->
					<a href="" class="btn btn-primary">Read more</a>
				</div>
				</div>
			</div>
			</template>
	</div>
</div>

<!-- Ghost Content API -->

<script src="https://unpkg.com/@tryghost/content-api@1.2.6/umd/content-api.min.js"></script>

<script>
    const api = new GhostContentAPI({
    url: **OUR API URL**
    key: **OUR API KEY**
    version: 'v2'
    });
    
    api.posts
		.browse({limit: 6, include: 'Snow'})
		.then((posts) => {
   			var temp = document.getElementsByTagName("template")[0]; 
   			posts.forEach((post) => {
				var card = temp.content.cloneNode(true);  
				var image = card.querySelector(".card-img-top");
				var title = card.querySelector(".card-title");
				var subtitle = card.querySelector(".card-text");
				var button = card.querySelector(".btn-primary")
				button.href=post.url;
				image.alt=post.title;
				image.src = post.feature_image;
				subtitle.textContent = post.custom_excerpt;
				title.textContent = post.title;
				var cardContainer = document.getElementById("blog-posts");
				cardContainer.appendChild (card); 
   			});
		})
4

Ok, so it works perfectly :grimacing:

You’re just getting stuck on query syntax. Docs are here:

Specifically you need to look at what include does and either change it back to tags if you do want tags included, or remove it if you don’t need them, and then take a look at filter for filtering the posts you want to return.

1 Like
5

Thanks so much for this @Hannah!

The filter is definitely what I need. Sorry to ask, but I can’t work out how to include the URL encoded filter (&filter=tag:snow) in my script tags. Do I have to include a {{#get}} and if so, does that replace the browse query (I tried directly replacing browse with a get but it didn’t return anything)?

Sorry for all the questions! I really hope that you can help!

Thanks as always!

6

All good, I worked it out, I added the filter to .browse and it worked:

.browse({limit: 6, include: 'tags', filter: 'tag:snow'})