Related Content in Etch

If you want to add related content to your single post template, it is easy to do with Etch once you understand the query and how to pass the arguments.

In the code below, I have the query set up to receive five arguments:

• Post Type: $post_type
• Number of Posts: $count
• Post ID (to exclude the current post): $articleID
• Which taxonomy to use for comparison: $taxonomy
• Which terms to include : $term_id

$query_args = [
  'post_type' => $post_type,
  'posts_per_page' => $count ?? 4,
  'post_status' => 'publish',
  'post__not_in' => [$articleID],
  'orderby' => 'date',
  'order' => 'DESC',
  'meta_query' => [],
  'tax_query' => [
    'taxonomy' => $taxonomy ?? 'category',
    'field' => 'term_id',
    'terms' => $term_id ?? 1
  ]

$query_args = [
  'post_type' => $post_type,
  'posts_per_page' => $count ?? 4,
  'post_status' => 'publish',
  'post__not_in' => [$articleID],
  'orderby' => 'date',
  'order' => 'DESC',
  'meta_query' => [],
  'tax_query' => [
    'taxonomy' => $taxonomy ?? 'category',
    'field' => 'term_id',
    'terms' => $term_id ?? 1
  ]

When I build the loop, the arguments are passed based on the current post content (this.), and my card component is populated with the relevant content.

{#loop relatedContent($articleID: this.id, $post_type: this.type, $taxonomy: "category", $term_id: term.id, $count: 4) as c}
  <NewsItemCard title={c.title} url={c.permalink.relative} standfirst={c.meta.social_description} mediaOrder="-1" cardImage={c.image.id} />
{/loop}

{#loop relatedContent($articleID: this.id, $post_type: this.type, $taxonomy: "category", $term_id: term.id, $count: 4) as c}
  <NewsItemCard title={c.title} url={c.permalink.relative} standfirst={c.meta.social_description} mediaOrder="-1" cardImage={c.image.id} />
{/loop}

You can see this in action below.