Skip to content

Instantly share code, notes, and snippets.

Last active July 27, 2023 14:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scottgruber/894e0dbbde73499b09a1 to your computer and use it in GitHub Desktop.
Save scottgruber/894e0dbbde73499b09a1 to your computer and use it in GitHub Desktop.
Using perch:related in a block proof of concept.
<perch:block type="related_article_block" label="Related Articles">
<perch:template path="content/blocks/related_article_block.html" />
<perch:if exists="related_article_posts">
<div class="related_article--section">
<perch:related id="related_articles_posts" collection="Articles" label="Related Articles" scope-parent="true">
<h3 class="related_article--headline"><a href="/articles/<perch:content id="slug" type="slug" />">
<perch:content id="heading" type="smarttext" /></a></h3><perch:if exists="intro"><p><perch:content id="intro" type="textarea" html="false" markdown="false" /></p></perch:if>
Copy link

As an experiment I tested to see if I could use perch:related in a block to enhance an article but include related content in the body of the article. The experiment was a success. Here is a simple example of what I did

First create a template that references the collection you would like to related, naturally using the perch:related

The template could look sometime like this.

Then in the page where you want to insert the block you would add

So far, I've tested it successfully linking multiple collections each with its own template and each referenced with its own block in the main page template.

Of course, this being Perch, the markup can be customized to fit your design, but I was happy to see that it worked. It opens up many creative possiblities

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment