Dynamically Show Related Posts

After reading through a varity of related posts in the forum I sadly didn't find a solution for my requirements, I was trying to create a dynamic "related" posts section under my article / post.

The call had to be dynamic as I have tons of content pages and didn't want to have to select each individual related page per hand.

I used Ditto for the posts with TvTagCloud to output the tags on the page.

What my aim was:

My template variable "myTags" was set-up as follows:

  • Input Type: Check Box
  • Input option values: @CHUNK Tags
  • Widget: Delimited List
  • Delimiter: ,

Now that the TV was set, I wanted to "Dynamically" show similar posts using the tags that were selected for the post from the "myTags" TV.

Example: selected tags for the resource with ID 2: "Tag1", "Tag2" & "Tag26" - posts should be shown on the current resources page from other resources who have the same tags selected.

Preferably with the option to show an image or text and to say how many posts should be shown e.g &display=`8`

An example output could be

<p>Lots of page content here</p>
<hr>
<p>Readers who viewed this page, also viewed:</p>
<ul>
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  <li><a href="page3.html">Page 3</a></li>
</ul>

The Working Solution

Thanks to a lot of forum reading, searching search engines and 3rd party websites, I was able to create a working solution.

After understanding a little more about how Ditto works, the solution was to "Filter" the results.

Once I knew why and what Ditto does when it actually filters stuff I found a forum post: "Related by tags (filter) how to?" which pointed me to the Ditto Filter parameters and I also found "Category Tagging with Ditto" in the tutorials documentation.

I ended up with the following Ditto call:

[!Ditto?
&filter=`id,[*id*],2`
&parents=`[*parent*]`
&tagData=`myTags`
&tags=`[*myTags*]`
&randomize=`1`
&display=`4`
&tagDelimiter=`,`
&tpl=`RelatedTags`
&showInMenuOnly=`0`
&showPublishedOnly=`1`
!]

The call is uncached as I wanted the content to be radomised each time the page was loaded.

As can be seen, the call has its filters:

&filter=`id,[*id*],2`

If you wish to use this solution, you will need to change some elements:

  • &tagData=`myTags` - Change to your TemplateVariable where your tags are
  • &tags=`[*myTags*]` - Change to your tags source or individual tags e.g &tags=`World,City,Bar1,Bar2,ArtBooksMusic`
  • &tpl=`RelatedTags` - Change to your template source
  • &display=`4` - Change to your display amount

All Together

As I use a bespoke template for my article / blog / news posts, I added the call directly to it, as can be seen here:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>[*pagetitle*] | [*pagetitle@parent*] | [(site_name)]</title>
<meta charset="[(modx_charset)]">
<base href="[(site_url)]">
</head>
<body>
<main>
  <h1>[*description*]</h1>
  [*content*]
  <hr>
  <section id="relatedposts">
    [!Ditto?
    &filter=`id,[*id*],2`
    &parents=`[*parent*]`
    &tagData=`myTags`
    &tags=`[*myTags*]`
    &randomize=`1`
    &display=`4`
    &tagDelimiter=`,`
    &tpl=`RelatedTags`
    &showInMenuOnly=`0`
    &showPublishedOnly=`1`
    !]
  </section>
</main>
<aside>
  {{sidebar}}
</aside>
</body>
</html>

Suggest an edit to this page.